@atproto/oauth-provider 0.1.0

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

@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import { Account, AuthorizeData, Session } from '../backend-data'
+import { Api } from '../lib/api'
+import { upsert } from '../lib/util'
+import { useCsrfToken } from './use-csrf-token'
+
+export type SignInCredentials = {
+  username: string
+  password: string
+  remember?: boolean
+}
+
+export type SignUpData = {
+  username: string
+  password: string
+  extra?: Record<string, string>
+}
+
+export function useApi(
+  {
+    clientId,
+    requestUri,
+    csrfCookie,
+    sessions: initialSessions,
+    newSessionsRequireConsent,
+  }: AuthorizeData,
+  {
+    onRedirected,
+  }: {
+    onRedirected?: () => void
+  } = {},
+) {
+  const csrfToken = useCsrfToken(csrfCookie) ?? '<csrf-token-missing>' // Invalid value
+  const [sessions, setSessions] = useState<readonly Session[]>(initialSessions)
+
+  const setSession = useCallback(
+    (sub: string | null) => {
+      setSessions((sessions) =>
+        sub === (sessions.find((s) => s.selected)?.account.sub || null)
+          ? sessions
+          : sessions.map((s) => ({ ...s, selected: s.account.sub === sub })),
+      )
+    },
+    [setSessions],
+  )
+
+  const api = useMemo(
+    () => new Api(requestUri, clientId, csrfToken, newSessionsRequireConsent),
+    [requestUri, clientId, csrfToken, newSessionsRequireConsent],
+  )
+
+  const performRedirect = useCallback(
+    (url: URL) => {
+      window.location.href = String(url)
+      if (onRedirected) setTimeout(onRedirected)
+    },
+    [onRedirected],
+  )
+
+  const doSignIn = useCallback(
+    async (credentials: SignInCredentials): Promise<void> => {
+      const session = await api.signIn(credentials)
+      const { sub } = session.account
+
+      setSessions((sessions) => {
+        return upsert(sessions, session, (s) => s.account.sub === sub).map(
+          // Make sure to de-select any other selected session
+          (s) => (s === session || !s.selected ? s : { ...s, selected: false }),
+        )
+      })
+    },
+    [api, performRedirect, clientId, setSessions],
+  )
+
+  const doSignUp = useCallback(
+    (data: SignUpData) => {
+      //
+      throw new Error('Not implemented')
+    },
+    [api],
+  )
+
+  const doAccept = useCallback(
+    async (account: Account) => {
+      performRedirect(await api.accept(account))
+    },
+    [api, performRedirect],
+  )
+
+  const doReject = useCallback(async () => {
+    performRedirect(await api.reject())
+  }, [api, performRedirect])
+
+  return {
+    sessions,
+    setSession,
+
+    doSignIn,
+    doSignUp,
+    doAccept,
+    doReject,
+  }
+}

package/src/assets/app/hooks/use-bound-dispatch.ts

@@ -0,0 +1,5 @@
+import { Dispatch, useCallback } from 'react'
+
+export function useBoundDispatch<A>(dispatch: Dispatch<A>, value: A) {
+  return useCallback(() => dispatch(value), [dispatch, value])
+}

package/src/assets/app/hooks/use-csrf-token.ts

@@ -0,0 +1,5 @@
+import { cookies } from '../cookies'
+
+export function useCsrfToken(cookieName: string) {
+  return cookies[cookieName]
+}

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

@@ -0,0 +1,64 @@
+import { fetchJsonProcessor, fetchOkProcessor } from '@atproto-labs/fetch'
+
+import { Account, Session } from '../backend-data'
+
+export class Api {
+  constructor(
+    private requestUri: string,
+    private clientId: string,
+    private csrfToken: string,
+    private newSessionsRequireConsent: boolean,
+  ) {}
+
+  async signIn(credentials: {
+    username: string
+    password: string
+    remember?: boolean
+  }): Promise<Session> {
+    const { json } = await fetch('/oauth/authorize/sign-in', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      mode: 'same-origin',
+      body: JSON.stringify({
+        csrf_token: this.csrfToken,
+        request_uri: this.requestUri,
+        client_id: this.clientId,
+        credentials,
+      }),
+    })
+      .then(fetchOkProcessor())
+      .then(
+        fetchJsonProcessor<{
+          account: Account
+          consentRequired: boolean
+        }>(),
+      )
+
+    return {
+      account: json.account,
+
+      selected: true,
+      loginRequired: false,
+      consentRequired: this.newSessionsRequireConsent || json.consentRequired,
+    }
+  }
+
+  async accept(account: Account): Promise<URL> {
+    const url = new URL('/oauth/authorize/accept', window.origin)
+    url.searchParams.set('request_uri', this.requestUri)
+    url.searchParams.set('account_sub', account.sub)
+    url.searchParams.set('client_id', this.clientId)
+    url.searchParams.set('csrf_token', this.csrfToken)
+
+    return url
+  }
+
+  async reject(): Promise<URL> {
+    const url = new URL('/oauth/authorize/reject', window.origin)
+    url.searchParams.set('request_uri', this.requestUri)
+    url.searchParams.set('client_id', this.clientId)
+    url.searchParams.set('csrf_token', this.csrfToken)
+
+    return url
+  }
+}

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

@@ -0,0 +1,4 @@
+export function clsx(a: string | undefined, b?: string) {
+  if (a && b) return `${a} ${b}`
+  return a || b
+}

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

@@ -0,0 +1,10 @@
+export function upsert<T>(
+  arr: readonly T[],
+  item: T,
+  predicate: (value: T, index: number, obj: readonly T[]) => boolean,
+): T[] {
+  const idx = arr.findIndex(predicate)
+  return idx === -1
+    ? [...arr, item]
+    : [...arr.slice(0, idx), item, ...arr.slice(idx + 1)]
+}

package/src/assets/app/main.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Matches colors defined in tailwind.config.js */
+@layer base {
+  :root {
+    --color-primary: 255 115 179;
+    --color-error: 235 65 49;
+  }
+}

package/src/assets/app/main.tsx

@@ -0,0 +1,28 @@
+// This must be loaded before any dependency to ensure that global variables
+// cannot be accessed by JS from node_modules.
+import * as backendData from './backend-data'
+
+import { createRoot } from 'react-dom/client'
+
+import { App } from './app'
+import './main.css'
+
+const { authorizeData } = backendData
+if (authorizeData) {
+  // When the user is logging in, make sure the page URL contains the
+  // "request_uri" in case the user refreshes the page.
+  const url = new URL(window.location.href)
+  if (
+    url.pathname === '/oauth/authorize' &&
+    !url.searchParams.has('request_uri')
+  ) {
+    url.search = ''
+    url.searchParams.set('client_id', authorizeData.clientId)
+    url.searchParams.set('request_uri', authorizeData.requestUri)
+    window.history.replaceState(history.state, '', url.pathname + url.search)
+  }
+}
+
+const container = document.getElementById('root')!
+const root = createRoot(container)
+root.render(<App {...backendData} />)

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

@@ -0,0 +1,51 @@
+import { OAuthClientMetadata } from '@atproto/oauth-types'
+
+import { Session } from '../backend-data'
+import { AcceptForm } from '../components/accept-form'
+import { LayoutTitlePage } from '../components/layout-title-page'
+
+export type AcceptViewProps = {
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  clientTrusted: boolean
+  session: Session
+
+  onAccept: () => void
+  onReject: () => void
+  onBack?: () => void
+}
+
+export function AcceptView({
+  clientId,
+  clientMetadata,
+  clientTrusted,
+  session,
+  onAccept,
+  onReject,
+  onBack,
+}: AcceptViewProps) {
+  const { account } = session
+  return (
+    <LayoutTitlePage
+      title="Authorize"
+      subtitle={
+        <>
+          Grant access to your{' '}
+          <b>{account.preferred_username || account.email || account.sub}</b>{' '}
+          account.
+        </>
+      }
+    >
+      <AcceptForm
+        className="max-w-lg w-full"
+        clientId={clientId}
+        clientMetadata={clientMetadata}
+        clientTrusted={clientTrusted}
+        account={account}
+        onBack={onBack}
+        onAccept={onAccept}
+        onReject={onReject}
+      />
+    </LayoutTitlePage>
+  )
+}

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

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react'
+
+import type { AuthorizeData, CustomizationData } from '../backend-data'
+import { LayoutTitlePage } from '../components/layout-title-page'
+import { useApi } from '../hooks/use-api'
+import { useBoundDispatch } from '../hooks/use-bound-dispatch'
+import { AcceptView } from './accept-view'
+import { SignInView } from './sign-in-view'
+import { SignUpView } from './sign-up-view'
+import { WelcomeView } from './welcome-view'
+
+export type AuthorizeViewProps = {
+  authorizeData: AuthorizeData
+  customizationData?: CustomizationData
+}
+
+export function AuthorizeView({
+  authorizeData,
+  customizationData,
+}: AuthorizeViewProps) {
+  const forceSignIn = authorizeData?.loginHint != null
+
+  const [view, setView] = useState<
+    'welcome' | 'sign-in' | 'sign-up' | 'accept' | 'done'
+  >(forceSignIn ? 'sign-in' : 'welcome')
+
+  const showDone = useBoundDispatch(setView, 'done')
+  const showSignIn = useBoundDispatch(setView, 'sign-in')
+  // const showSignUp = useBoundDispatch(setView, 'sign-up')
+  const showAccept = useBoundDispatch(setView, 'accept')
+  const showWelcome = useBoundDispatch(setView, 'welcome')
+
+  const { sessions, setSession, doAccept, doReject, doSignIn, doSignUp } =
+    useApi(authorizeData, { onRedirected: showDone })
+
+  const session = sessions.find((s) => s.selected && !s.loginRequired)
+  useEffect(() => {
+    if (session) {
+      if (session.consentRequired) showAccept()
+      else doAccept(session.account)
+    }
+  }, [session, doAccept, showAccept])
+
+  if (view === 'welcome') {
+    return (
+      <WelcomeView
+        name={customizationData?.name}
+        logo={customizationData?.logo}
+        links={customizationData?.links}
+        onSignIn={showSignIn}
+        // onSignUp={showSignUp}
+        onCancel={doReject}
+      />
+    )
+  }
+
+  if (view === 'sign-up') {
+    return (
+      <SignUpView
+        links={customizationData?.links}
+        onSignUp={doSignUp}
+        onBack={showWelcome}
+      />
+    )
+  }
+
+  if (view === 'sign-in') {
+    return (
+      <SignInView
+        loginHint={authorizeData.loginHint}
+        sessions={sessions}
+        setSession={setSession}
+        onSignIn={doSignIn}
+        onBack={forceSignIn ? doReject : showWelcome}
+      />
+    )
+  }
+
+  if (view === 'accept' && session) {
+    return (
+      <AcceptView
+        session={session}
+        clientId={authorizeData.clientId}
+        clientMetadata={authorizeData.clientMetadata}
+        clientTrusted={authorizeData.clientTrusted}
+        onAccept={() => doAccept(session.account)}
+        onReject={doReject}
+        onBack={() => {
+          setSession(null)
+          setView(sessions.length ? 'sign-in' : 'welcome')
+        }}
+      />
+    )
+  }
+
+  return (
+    <LayoutTitlePage title="Login complete">
+      You are being redirected...
+    </LayoutTitlePage>
+  )
+}

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

@@ -0,0 +1,27 @@
+import { CustomizationData, ErrorData } from '../backend-data'
+import { ErrorCard } from '../components/error-card'
+import { LayoutWelcome } from '../components/layout-welcome'
+
+export type ErrorViewProps = {
+  customizationData?: CustomizationData
+  errorData?: ErrorData
+}
+
+export function ErrorView({ errorData, customizationData }: ErrorViewProps) {
+  return (
+    <LayoutWelcome {...customizationData}>
+      <ErrorCard message={getUserFriendlyMessage(errorData)} />
+    </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'
+  }
+}

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

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { Session } from '../backend-data'
+import { AccountPicker } from '../components/account-picker'
+import { LayoutTitlePage } from '../components/layout-title-page'
+import { SignInForm, SignInFormOutput } from '../components/sign-in-form'
+
+export type SignInViewProps = {
+  sessions: readonly Session[]
+  setSession: (sub: string | null) => void
+  loginHint?: string
+
+  onSignIn: (credentials: SignInFormOutput) => void | PromiseLike<void>
+  onBack?: () => void
+}
+
+export function SignInView({
+  loginHint,
+  sessions,
+  setSession,
+
+  onSignIn,
+  onBack,
+}: SignInViewProps) {
+  const session = useMemo(() => sessions.find((s) => s.selected), [sessions])
+  const clearSession = useCallback(() => setSession(null), [setSession])
+  const accounts = useMemo(() => sessions.map((s) => s.account), [sessions])
+  const [showSignInForm, setShowSignInForm] = useState(sessions.length === 0)
+
+  useEffect(() => {
+    // Make sure the "back" action shows the account picker instead of the
+    // sign-in form (since the account was added to the list of current
+    // sessions).
+    if (session) setShowSignInForm(false)
+  }, [session])
+
+  if (session) {
+    // All set (parent view will handle the redirect)
+    if (!session.loginRequired) return null
+
+    return (
+      <LayoutTitlePage
+        title="Sign in"
+        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}
+          usernameReadonly={true}
+          rememberDefault={true}
+        />
+      </LayoutTitlePage>
+    )
+  }
+
+  if (loginHint) {
+    return (
+      <LayoutTitlePage title="Sign in" subtitle="Enter your password">
+        <SignInForm
+          className="max-w-lg w-full"
+          onSubmit={onSignIn}
+          onCancel={onBack}
+          cancelAria="Back"
+          usernameDefault={loginHint}
+          usernameReadonly={true}
+        />
+      </LayoutTitlePage>
+    )
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <LayoutTitlePage
+        title="Sign in"
+        subtitle="Enter your username and password"
+      >
+        <SignInForm
+          className="max-w-lg w-full"
+          onSubmit={onSignIn}
+          onCancel={onBack}
+          cancelAria="Back"
+        />
+      </LayoutTitlePage>
+    )
+  }
+
+  if (showSignInForm) {
+    return (
+      <LayoutTitlePage
+        title="Sign in"
+        subtitle="Enter your username and password"
+      >
+        <SignInForm
+          className="max-w-lg w-full"
+          onSubmit={onSignIn}
+          onCancel={() => setShowSignInForm(false)}
+          cancelAria="Back" // to account picker
+        />
+      </LayoutTitlePage>
+    )
+  }
+
+  return (
+    <LayoutTitlePage
+      title="Sign in as..."
+      subtitle="Select an account to continue."
+    >
+      <AccountPicker
+        className="max-w-lg w-full"
+        accounts={accounts}
+        onAccount={(a) => setSession(a.sub)}
+        onOther={() => setShowSignInForm(true)}
+        onBack={onBack}
+        backAria="Back" // to previous view
+      />
+    </LayoutTitlePage>
+  )
+}

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

@@ -0,0 +1,93 @@
+import { ReactNode, useCallback, useState } from 'react'
+
+import { LinkDefinition } from '../backend-data'
+import { HelpCard } from '../components/help-card'
+import { LayoutTitlePage } from '../components/layout-title-page'
+import {
+  SignUpAccountForm,
+  SignUpAccountFormOutput,
+} from '../components/sign-up-account-form'
+import { SignUpDisclaimer } from '../components/sign-up-disclaimer'
+
+export type SignUpViewProps = {
+  stepName?: (step: number, total: number) => ReactNode
+  stepTitle?: (step: number, total: number) => ReactNode
+
+  links?: LinkDefinition[]
+  onSignUp: (data: {
+    username: string
+    password: string
+    extra?: Record<string, string>
+  }) => void | PromiseLike<void>
+  onBack?: () => void
+}
+
+export function SignUpView({
+  stepName = (step, total) => `Step ${step} of ${total}`,
+  stepTitle = (step, total) => {
+    switch (step) {
+      case 1:
+        return 'Your account'
+      default:
+        return null
+    }
+  },
+
+  links,
+
+  onSignUp,
+  onBack,
+}: SignUpViewProps) {
+  const [_credentials, setCredentials] =
+    useState<null | SignUpAccountFormOutput>(null)
+  const [step, setStep] = useState<1 | 2>(1)
+
+  const stepCount = 2
+
+  const doSubmitAccount = useCallback(
+    (credentials: SignUpAccountFormOutput) => {
+      setCredentials(credentials)
+      setStep(2)
+    },
+    [onSignUp, setCredentials, setStep],
+  )
+
+  return (
+    <LayoutTitlePage
+      title="Create Account"
+      subtitle="We're so excited to have you join us!"
+    >
+      <div className="max-w-lg w-full flex flex-col">
+        <p className="mt-4 text-slate-400 dark:text-slate-600">
+          {stepName(step, stepCount)}
+        </p>
+        <h2 className="font-medium text-xl mb-4">
+          {stepTitle(step, stepCount)}
+        </h2>
+
+        {step === 1 && (
+          <SignUpAccountForm
+            className="flex-grow"
+            onSubmit={doSubmitAccount}
+            onCancel={onBack}
+            cancelLabel="Back"
+          >
+            <SignUpDisclaimer links={links} />
+          </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>
+        )}
+
+        <HelpCard className="mb-4" links={links} />
+      </div>
+    </LayoutTitlePage>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { LayoutWelcome, LayoutWelcomeProps } from '../components/layout-welcome'
+import { clsx } from '../lib/clsx'
+
+export type WelcomeViewParams = LayoutWelcomeProps & {
+  onSignIn?: () => void
+  signInLabel?: string
+
+  onSignUp?: () => void
+  signUpLabel?: string
+
+  onCancel?: () => void
+  cancelLabel?: string
+}
+
+export function WelcomeView({
+  onSignUp,
+  signUpLabel = 'Create a new account',
+  onSignIn,
+  signInLabel = 'Sign in',
+  onCancel,
+  cancelLabel = 'Cancel',
+
+  ...props
+}: WelcomeViewParams) {
+  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',
+          )}
+          onClick={onSignUp}
+        >
+          {signUpLabel}
+        </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',
+          )}
+          onClick={onSignIn}
+        >
+          {signInLabel}
+        </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}
+        >
+          {cancelLabel}
+        </button>
+      )}
+    </LayoutWelcome>
+  )
+}