@atproto/oauth-provider 0.1.0 → 0.1.1

package/src/assets/app/components/sign-up-account-form.tsx

@@ -6,36 +6,41 @@ import {
   useState,
 } from 'react'
 
-import { clsx } from '../lib/clsx'
-import { ErrorCard } from './error-card'
+import { Button } from './button'
+import { FormCard, FormCardProps } from './form-card'
+import { Override } from '../lib/util'
+import { Fieldset } from './fieldset'
 
 export type SignUpAccountFormOutput = {
   username: string
   password: string
 }
 
-export type SignUpAccountFormProps = {
-  onSubmit: (credentials: SignUpAccountFormOutput) => void | PromiseLike<void>
-  submitLabel?: ReactNode
-  submitAria?: string
-
-  onCancel?: () => void
-  cancelLabel?: ReactNode
-  cancelAria?: string
-
-  username?: string
-  usernamePlaceholder?: string
-  usernameLabel?: string
-  usernameAria?: string
-  usernamePattern?: string
-  usernameTitle?: string
-
-  passwordPlaceholder?: string
-  passwordLabel?: string
-  passwordAria?: string
-  passwordPattern?: string
-  passwordTitle?: string
-}
+export type SignUpAccountFormProps = Override<
+  FormCardProps,
+  {
+    onSubmit: (credentials: SignUpAccountFormOutput) => void | PromiseLike<void>
+    submitLabel?: ReactNode
+    submitAria?: string
+
+    onCancel?: () => void
+    cancelLabel?: ReactNode
+    cancelAria?: string
+
+    username?: string
+    usernamePlaceholder?: string
+    usernameLabel?: string
+    usernameAria?: string
+    usernamePattern?: string
+    usernameTitle?: string
+
+    passwordPlaceholder?: string
+    passwordLabel?: string
+    passwordAria?: string
+    passwordPattern?: string
+    passwordTitle?: string
+  }
+>
 
 export function SignUpAccountForm({
   onSubmit,
@@ -59,9 +64,8 @@ export function SignUpAccountForm({
   passwordPattern,
   passwordTitle,
 
-  className,
   children,
-  ...attrs
+  ...props
 }: SignUpAccountFormProps &
   Omit<FormHTMLAttributes<HTMLFormElement>, keyof SignUpAccountFormProps>) {
   const [loading, setLoading] = useState(false)
@@ -98,104 +102,84 @@ export function SignUpAccountForm({
   )
 
   return (
-    <form
-      {...attrs}
-      className={clsx('flex flex-col', className)}
+    <FormCard
+      append={children}
+      error={errorMessage}
       onSubmit={doSubmit}
-    >
-      <fieldset disabled={loading}>
-        <label className="text-sm font-medium" htmlFor="username">
-          {usernameLabel}
-        </label>
-
-        <div
-          id="username"
-          className="mb-4 relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100"
-        >
-          <span className="w-6 ml-1 text-center text-base">@</span>
-          <input
-            name="username"
-            type="text"
-            onChange={() => setErrorMessage(null)}
-            className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100 disabled:text-gray-500"
-            placeholder={usernamePlaceholder}
-            aria-label={usernameAria}
-            autoCapitalize="none"
-            autoCorrect="off"
-            autoComplete="username"
-            spellCheck="false"
-            dir="auto"
-            enterKeyHint="next"
-            required
-            defaultValue={defaultUsername}
-            pattern={usernamePattern}
-            title={usernameTitle}
-          />
-        </div>
-
-        <label className="text-sm font-medium" htmlFor="password">
-          {passwordLabel}
-        </label>
-
-        <div
-          id="password"
-          className="mb-4 relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100"
-        >
-          <span className="w-6 ml-1 text-center text-2xl font-light -mb-2">
-            *
-          </span>
-          <input
-            name="password"
-            type="password"
-            onChange={() => setErrorMessage(null)}
-            className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100"
-            placeholder={passwordPlaceholder}
-            aria-label={passwordAria}
-            autoCapitalize="none"
-            autoCorrect="off"
-            autoComplete="new-password"
-            dir="auto"
-            enterKeyHint="done"
-            spellCheck="false"
-            required
-            pattern={passwordPattern}
-            title={passwordTitle}
-          />
-        </div>
-      </fieldset>
-
-      {children && <div className="mt-4">{children}</div>}
-
-      {errorMessage && <ErrorCard className="mt-2" message={errorMessage} />}
-
-      <div className="flex-auto"></div>
-
-      <div className="p-4 flex flex-wrap items-center justify-start">
-        <button
-          className="py-2 bg-transparent text-primary rounded-md font-semibold order-last"
+      cancel={
+        onCancel && (
+          <Button aria-label={cancelAria} onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+        )
+      }
+      actions={
+        <Button
+          color="brand"
           type="submit"
-          role="Button"
           aria-label={submitAria}
           disabled={loading}
         >
           {submitLabel}
-        </button>
-
-        {onCancel && (
-          <button
-            className="py-2 bg-transparent text-primary rounded-md font-light"
-            type="button"
-            role="Button"
-            aria-label={cancelAria}
-            onClick={onCancel}
-          >
-            {cancelLabel}
-          </button>
-        )}
+        </Button>
+      }
+      {...props}
+    >
+      <Fieldset disabled={loading}>
+        <label className="text-sm font-medium block">
+          <p>{usernameLabel}</p>
+
+          <div className="relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100">
+            <span className="w-6 ml-1 text-center text-base">@</span>
+            <input
+              name="username"
+              type="text"
+              onChange={() => setErrorMessage(null)}
+              className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100 disabled:text-gray-500"
+              placeholder={usernamePlaceholder}
+              aria-label={usernameAria}
+              autoCapitalize="none"
+              autoCorrect="off"
+              autoComplete="username"
+              spellCheck="false"
+              dir="auto"
+              enterKeyHint="next"
+              required
+              defaultValue={defaultUsername}
+              pattern={usernamePattern}
+              title={usernameTitle}
+            />
+          </div>
+        </label>
 
-        <div className="flex-auto" />
-      </div>
-    </form>
+        <label className="text-sm font-medium block">
+          <p>{passwordLabel}</p>
+
+          <div className="relative flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100">
+            <span className="w-6 ml-1 text-center text-2xl font-light -mb-2">
+              *
+            </span>
+            <input
+              name="password"
+              type="password"
+              onChange={() => setErrorMessage(null)}
+              className="relative m-1 block w-[1px] min-w-0 flex-auto leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100"
+              placeholder={passwordPlaceholder}
+              aria-label={passwordAria}
+              autoCapitalize="none"
+              autoCorrect="off"
+              autoComplete="new-password"
+              dir="auto"
+              enterKeyHint="done"
+              spellCheck="false"
+              required
+              pattern={passwordPattern}
+              title={passwordTitle}
+            />
+          </div>
+        </label>
+      </Fieldset>
+    </FormCard>
   )
 }
 

package/src/assets/app/components/sign-up-disclaimer.tsx

@@ -31,7 +31,7 @@ export function SignUpDisclaimer({
                 href={l.href}
                 rel={l.rel}
                 target="_blank"
-                className="text-primary underline"
+                className="text-brand underline"
               >
                 {l.title}
               </a>

package/src/assets/app/hooks/use-api.ts

@@ -8,6 +8,8 @@ import { useCsrfToken } from './use-csrf-token'
 export type SignInCredentials = {
   username: string
   password: string
+  emailOtp?: string
+
   remember?: boolean
 }
 

package/src/assets/app/lib/api.ts

@@ -1,4 +1,4 @@
-import { fetchJsonProcessor, fetchOkProcessor } from '@atproto-labs/fetch'
+import { FetchResponseError, Json } from '@atproto-labs/fetch'
 
 import { Account, Session } from '../backend-data'
 
@@ -15,7 +15,7 @@ export class Api {
     password: string
     remember?: boolean
   }): Promise<Session> {
-    const { json } = await fetch('/oauth/authorize/sign-in', {
+    const response = await fetch('/oauth/authorize/sign-in', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       mode: 'same-origin',
@@ -26,20 +26,40 @@ export class Api {
         credentials,
       }),
     })
-      .then(fetchOkProcessor())
-      .then(
-        fetchJsonProcessor<{
-          account: Account
-          consentRequired: boolean
-        }>(),
-      )
 
-    return {
-      account: json.account,
+    const json: Json = await response.json()
 
-      selected: true,
-      loginRequired: false,
-      consentRequired: this.newSessionsRequireConsent || json.consentRequired,
+    if (response.ok) {
+      const data = json as {
+        account: Account
+        consentRequired: boolean
+      }
+
+      return {
+        account: data.account,
+
+        selected: true,
+        loginRequired: false,
+        consentRequired: this.newSessionsRequireConsent || data.consentRequired,
+      }
+    } else if (
+      response.status === 400 &&
+      json?.['error'] === 'invalid_request' &&
+      json?.['error_description'] === 'Invalid credentials'
+    ) {
+      throw new InvalidCredentialsError()
+    } else if (
+      response.status === 401 &&
+      json?.['error'] === 'second_authentication_factor_required'
+    ) {
+      const data = json as {
+        type: 'emailOtp'
+        hint: string
+      }
+
+      throw new SecondAuthenticationFactorRequiredError(data.type, data.hint)
+    } else {
+      throw new FetchResponseError(response)
     }
   }
 
@@ -62,3 +82,18 @@ export class Api {
     return url
   }
 }
+
+export class InvalidCredentialsError extends Error {
+  constructor() {
+    super('Invalid credentials')
+  }
+}
+
+export class SecondAuthenticationFactorRequiredError extends Error {
+  constructor(
+    public type: 'emailOtp',
+    public hint: string,
+  ) {
+    super(`${type} authentication factor required (hint: ${hint})`)
+  }
+}

package/src/assets/app/lib/clsx.ts

@@ -1,4 +1,9 @@
-export function clsx(a: string | undefined, b?: string) {
+export function clsx(
+  a?: string,
+  ...args: readonly (string | undefined)[]
+): string | undefined {
+  if (args.length === 0) return a
+  const b = clsx(...args)
   if (a && b) return `${a} ${b}`
   return a || b
 }

package/src/assets/app/lib/util.ts

@@ -8,3 +8,6 @@ export function upsert<T>(
     ? [...arr, item]
     : [...arr.slice(0, idx), item, ...arr.slice(idx + 1)]
 }
+
+export type Simplify<T> = { [K in keyof T]: T[K] } & NonNullable<unknown>
+export type Override<T, U> = Simplify<Omit<T, keyof U> & U>

package/src/assets/app/main.css

@@ -5,7 +5,8 @@
 /* Matches colors defined in tailwind.config.js */
 @layer base {
   :root {
-    --color-primary: 255 115 179;
+    --color-brand: 255 115 179;
     --color-error: 235 65 49;
+    --color-warning: 255 201 73;
   }
 }

package/src/assets/app/views/accept-view.tsx

@@ -31,13 +31,14 @@ export function AcceptView({
       subtitle={
         <>
           Grant access to your{' '}
-          <b>{account.preferred_username || account.email || account.sub}</b>{' '}
-          account.
+          <b className="text-black dark:text-white">
+            {account.preferred_username || account.email || account.sub}
+          </b>{' '}
+          account
         </>
       }
     >
       <AcceptForm
-        className="max-w-lg w-full"
         clientId={clientId}
         clientMetadata={clientMetadata}
         clientTrusted={clientTrusted}

package/src/assets/app/views/authorize-view.tsx

@@ -85,10 +85,14 @@ export function AuthorizeView({
         clientTrusted={authorizeData.clientTrusted}
         onAccept={() => doAccept(session.account)}
         onReject={doReject}
-        onBack={() => {
-          setSession(null)
-          setView(sessions.length ? 'sign-in' : 'welcome')
-        }}
+        onBack={
+          forceSignIn
+            ? undefined
+            : () => {
+                setSession(null)
+                setView(sessions.length ? 'sign-in' : 'welcome')
+              }
+        }
       />
     )
   }

package/src/assets/app/views/error-view.tsx

@@ -1,27 +1,36 @@
 import { CustomizationData, ErrorData } from '../backend-data'
-import { ErrorCard } from '../components/error-card'
-import { LayoutWelcome } from '../components/layout-welcome'
+import { InfoCard } from '../components/info-card'
+import { LayoutWelcome, LayoutWelcomeProps } from '../components/layout-welcome'
+import { Override } from '../lib/util'
 
-export type ErrorViewProps = {
-  customizationData?: CustomizationData
-  errorData?: ErrorData
-}
+export type ErrorViewProps = Override<
+  Omit<LayoutWelcomeProps, keyof CustomizationData>,
+  {
+    customizationData?: CustomizationData
+    errorData?: ErrorData
+  }
+>
 
-export function ErrorView({ errorData, customizationData }: ErrorViewProps) {
+export function ErrorView({
+  errorData,
+  customizationData,
+  ...props
+}: ErrorViewProps) {
   return (
-    <LayoutWelcome {...customizationData}>
-      <ErrorCard message={getUserFriendlyMessage(errorData)} />
+    <LayoutWelcome {...customizationData} {...props}>
+      <InfoCard role="alert">{getUserFriendlyMessage(errorData)}</InfoCard>
     </LayoutWelcome>
   )
 }
 
 function getUserFriendlyMessage(errorData?: ErrorData) {
   const desc = errorData?.error_description
-  switch (desc) {
-    case 'Unknown request_uri': // Request was removed from database
-    case 'This request has expired':
-      return 'This sign-in session has expired'
-    default:
-      return desc || 'An unknown error occurred'
+  if (
+    desc === 'This request has expired' ||
+    desc?.startsWith('Unknown request_uri') // Request was removed from database
+  ) {
+    return 'This sign-in session has expired'
+  } else {
+    return desc || 'An unknown error occurred'
   }
 }

package/src/assets/app/views/sign-in-view.tsx

@@ -44,11 +44,12 @@ export function SignInView({
         subtitle="Confirm your password to continue"
       >
         <SignInForm
-          className="max-w-lg w-full"
           onSubmit={onSignIn}
           onCancel={clearSession}
           cancelAria="Back" // to account picker
-          usernameDefault={session.account.preferred_username}
+          usernameDefault={
+            session.account.preferred_username || session.account.sub
+          }
           usernameReadonly={true}
           rememberDefault={true}
         />
@@ -60,7 +61,6 @@ export function SignInView({
     return (
       <LayoutTitlePage title="Sign in" subtitle="Enter your password">
         <SignInForm
-          className="max-w-lg w-full"
           onSubmit={onSignIn}
           onCancel={onBack}
           cancelAria="Back"
@@ -77,12 +77,7 @@ export function SignInView({
         title="Sign in"
         subtitle="Enter your username and password"
       >
-        <SignInForm
-          className="max-w-lg w-full"
-          onSubmit={onSignIn}
-          onCancel={onBack}
-          cancelAria="Back"
-        />
+        <SignInForm onSubmit={onSignIn} onCancel={onBack} cancelAria="Back" />
       </LayoutTitlePage>
     )
   }
@@ -94,7 +89,6 @@ export function SignInView({
         subtitle="Enter your username and password"
       >
         <SignInForm
-          className="max-w-lg w-full"
           onSubmit={onSignIn}
           onCancel={() => setShowSignInForm(false)}
           cancelAria="Back" // to account picker
@@ -104,12 +98,8 @@ export function SignInView({
   }
 
   return (
-    <LayoutTitlePage
-      title="Sign in as..."
-      subtitle="Select an account to continue."
-    >
+    <LayoutTitlePage title="Sign in" subtitle="Select from an existing account">
       <AccountPicker
-        className="max-w-lg w-full"
         accounts={accounts}
         onAccount={(a) => setSession(a.sub)}
         onOther={() => setShowSignInForm(true)}

package/src/assets/app/views/sign-up-view.tsx

@@ -8,6 +8,7 @@ import {
   SignUpAccountFormOutput,
 } from '../components/sign-up-account-form'
 import { SignUpDisclaimer } from '../components/sign-up-disclaimer'
+import { Button } from '../components/button'
 
 export type SignUpViewProps = {
   stepName?: (step: number, total: number) => ReactNode
@@ -57,7 +58,7 @@ export function SignUpView({
       title="Create Account"
       subtitle="We're so excited to have you join us!"
     >
-      <div className="max-w-lg w-full flex flex-col">
+      <div className="flex flex-col">
         <p className="mt-4 text-slate-400 dark:text-slate-600">
           {stepName(step, stepCount)}
         </p>
@@ -76,15 +77,7 @@ export function SignUpView({
           </SignUpAccountForm>
         )}
 
-        {step === 2 && (
-          <button
-            type="button"
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-slate-700 bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
-            onClick={() => setStep(1)}
-          >
-            Back
-          </button>
-        )}
+        {step === 2 && <Button onClick={() => setStep(1)}>Back</Button>}
 
         <HelpCard className="mb-4" links={links} />
       </div>

package/src/assets/app/views/welcome-view.tsx

@@ -1,5 +1,5 @@
+import { Button } from '../components/button'
 import { LayoutWelcome, LayoutWelcomeProps } from '../components/layout-welcome'
-import { clsx } from '../lib/clsx'
 
 export type WelcomeViewParams = LayoutWelcomeProps & {
   onSignIn?: () => void
@@ -25,36 +25,29 @@ export function WelcomeView({
   return (
     <LayoutWelcome {...props}>
       {onSignUp && (
-        <button
-          className={clsx(
-            'm-1 w-60 max-w-full text-white py-2 px-4 rounded-full truncate',
-            onSignIn ? 'bg-primary' : 'bg-slate-400',
-          )}
+        <Button
+          className={'m-1 w-60 max-w-full'}
+          color={onSignIn ? 'brand' : undefined}
           onClick={onSignUp}
         >
           {signUpLabel}
-        </button>
+        </Button>
       )}
 
       {onSignIn && (
-        <button
-          className={clsx(
-            'm-1 w-60 max-w-full py-2 px-4 rounded-full truncate',
-            onSignUp ? 'bg-slate-100 dark:bg-slate-700' : 'bg-primary',
-          )}
+        <Button
+          className={'m-1 w-60 max-w-full'}
+          color={onSignUp ? undefined : 'brand'}
           onClick={onSignIn}
         >
           {signInLabel}
-        </button>
+        </Button>
       )}
 
       {onCancel && (
-        <button
-          className="m-1 w-60 max-w-full bg-transparent text-primary py-2 px-4 rounded-full truncate font-light"
-          onClick={onCancel}
-        >
+        <Button className="m-1 w-60 max-w-full" onClick={onCancel}>
           {cancelLabel}
-        </button>
+        </Button>
       )}
     </LayoutWelcome>
   )

package/src/client/client-auth.ts

@@ -1,9 +1,10 @@
 import { CLIENT_ASSERTION_TYPE_JWT_BEARER } from '@atproto/oauth-types'
-import { KeyLike, calculateJwkThumbprint, exportJWK } from 'jose'
-import { JOSEError } from 'jose/errors'
+import { KeyLike, calculateJwkThumbprint, errors, exportJWK } from 'jose'
 
 import { InvalidClientError } from '../errors/invalid-client-error.js'
 
+const { JOSEError } = errors
+
 export type ClientAuth =
   | { method: 'none' }
   | {

package/src/client/client-manager.ts

@@ -39,7 +39,8 @@ import { Client } from './client.js'
 
 const fetchMetadataHandler = pipe(
   fetchOkProcessor(),
-  fetchJsonProcessor('application/json', false),
+  // https://drafts.aaronpk.com/draft-parecki-oauth-client-id-metadata-document/draft-parecki-oauth-client-id-metadata-document.html#section-4.1
+  fetchJsonProcessor('application/json', true),
   fetchJsonZodProcessor(oauthClientMetadataSchema),
 )