@atproto/oauth-provider-ui 0.0.2 → 0.1.0

package/src/components/layouts/layout-welcome.tsx

@@ -1,6 +1,7 @@
+import { useLingui } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX } from 'react'
 import type { CustomizationData } from '@atproto/oauth-provider-api'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 import { LocaleSelector } from '../../locales/locale-selector.tsx'
 import { LinkAnchor } from '../utils/link-anchor.tsx'
@@ -22,12 +23,14 @@ export function LayoutWelcome({
   children,
   ...props
 }: LayoutWelcomeProps) {
+  const { t } = useLingui()
+
   return (
     <div
       {...props}
       className={clsx(
         'min-h-screen w-full',
-        'flex items-center justify-center flex-col',
+        'flex flex-col items-center justify-center',
         'bg-white text-slate-900',
         'dark:bg-slate-900 dark:text-slate-100',
         className,
@@ -35,18 +38,18 @@ export function LayoutWelcome({
     >
       {title && <title>{title}</title>}
 
-      <main className="w-full overflow-hidden flex-grow flex flex-col items-center justify-center p-6">
+      <main className="flex w-full grow flex-col items-center justify-center overflow-hidden p-6">
         {logo && (
           <img
             src={logo}
-            alt={name || `Logo`}
+            alt={name || t`Logo`}
             aria-hidden
-            className="w-16 h-16 md:w-24 md:h-24 mb-4 md:mb-8"
+            className="mb-4 h-16 w-16 md:mb-8 md:h-24 md:w-24"
           />
         )}
 
         {name && (
-          <h1 className="text-2xl md:text-4xl mb-4 md:mb-8 mx-4 text-center font-bold">
+          <h1 className="mx-4 mb-4 text-center text-2xl font-bold md:mb-8 md:text-4xl">
             {name}
           </h1>
         )}
@@ -54,20 +57,22 @@ export function LayoutWelcome({
         {children}
       </main>
 
-      <nav className="w-full overflow-hidden border-t border-t-slate-200 dark:border-t-slate-700 flex flex-wrap justify-center content-center">
-        {links?.map((link, i) => (
-          <LinkAnchor
-            key={i}
-            link={link}
-            className="m-2 md:m-4 text-xs md:text-sm text-brand hover:underline"
-          />
-        ))}
+      <footer className="bg-contrast-25 dark:bg-contrast-50 flex w-full flex-wrap items-center justify-between overflow-hidden px-4 md:px-6">
+        <nav className="flex flex-wrap items-center justify-start">
+          {links?.map((link, i) => (
+            <LinkAnchor
+              key={i}
+              link={link}
+              className="text-text-light m-2 text-xs hover:underline md:m-4 md:text-sm"
+            />
+          ))}
+        </nav>
 
         <LocaleSelector
-          className="m-1 md:m-2 text-xs md:text-sm"
+          className="m-1 text-xs md:m-2 md:text-sm"
           key="localeSelector"
         />
-      </nav>
+      </footer>
     </div>
   )
 }

package/src/components/utils/account-image.tsx

@@ -19,13 +19,13 @@ export function AccountImage({ src, alt }: AccountIconProps) {
       crossOrigin="anonymous"
       src={src}
       alt={alt}
-      className="-ml-1 w-6 h-6 rounded-full"
+      className="-ml-1 h-6 w-6 rounded-full"
       onError={() => setErrored(true)}
     />
   ) : (
     <div
       aria-hidden
-      className="h-6 w-6 text-white bg-brand rounded-full border-solid border-2 border-brand overflow-hidden"
+      className="bg-primary border-primary h-6 w-6 overflow-hidden rounded-full border-2 border-solid text-white"
     >
       <AccountIcon className="-mx-1 -mb-1" />
     </div>

package/src/components/utils/admonition.tsx

@@ -1,5 +1,5 @@
+import { clsx } from 'clsx'
 import { JSX, memo } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 import { AlertIcon, EyeIcon } from './icons.tsx'
 
@@ -27,21 +27,21 @@ export const Admonition = memo(function Admonition({
         'rounded-lg',
         'border',
         'border-gray-300 dark:border-gray-700',
-        role === 'alert' && 'bg-error text-error-c',
+        role === 'alert' && 'bg-error text-error-contrast',
         className,
       )}
     >
       {role === 'info' ? (
         <EyeIcon
           aria-hidden
-          className={clsx('fill-current h-6 w-6', 'text-brand')}
+          className={clsx('h-6 w-6 fill-current', 'text-primary')}
         />
       ) : (
         <AlertIcon
           aria-hidden
           className={clsx(
-            'fill-current h-6 w-6',
-            role === 'alert' ? 'text-inherit' : 'text-brand',
+            'h-6 w-6 fill-current',
+            role === 'alert' ? 'text-inherit' : 'text-primary',
           )}
         />
       )}

package/src/components/utils/client-name.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react/macro'
-import { JSX } from 'react'
+import { JSX, useMemo } from 'react'
 import type { OAuthClientMetadata } from '@atproto/oauth-types'
 import { Override } from '../../lib/util.ts'
 import { UrlViewer } from './url-viewer.tsx'
@@ -21,6 +21,14 @@ export function ClientName({
   // span
   ...attrs
 }: ClientNameProps) {
+  const url = useMemo(() => {
+    try {
+      return new URL(clientId)
+    } catch {
+      return null
+    }
+  }, [clientId])
+
   if (clientTrusted && clientMetadata.client_name) {
     return <span {...attrs}>{clientMetadata.client_name}</span>
   }
@@ -29,7 +37,7 @@ export function ClientName({
   // @atproto/oauth-types here because 1) we don't need to validate here and 2)
   // we prefer not to import un-necessary code to improve bundle size.
 
-  if (clientId.startsWith('http://')) {
+  if (url?.protocol === 'http:') {
     return (
       <span {...attrs}>
         <Trans>An application on your device</Trans>
@@ -37,8 +45,26 @@ export function ClientName({
     )
   }
 
-  if (clientId.startsWith('https://')) {
-    return <UrlViewer {...attrs} url={clientId} path />
+  if (url?.protocol === 'https:') {
+    // Only display the url details if the client id does not follow our
+    // convention.
+    const simplifiedView =
+      url.protocol === 'https:' &&
+      url.pathname === '/oauth-client-metadata.json' &&
+      !url.port &&
+      !url.search
+
+    return (
+      <UrlViewer
+        {...attrs}
+        url={url}
+        proto={!simplifiedView}
+        host={true}
+        path={!simplifiedView}
+        query={!simplifiedView}
+        hash={false}
+      />
+    )
   }
 
   return <span {...attrs}>{clientId}</span>

package/src/components/utils/error-card.tsx

@@ -71,7 +71,7 @@ export const ErrorCard = memo(function ErrorCard({
 
       <div hidden={!showDetails} id={detailsDivId} aria-hidden={!showDetails}>
         {parsedError instanceof JsonErrorResponse ? (
-          <dl className="mt-2 grid grid-cols-[auto,1fr] gap-x-2 text-sm">
+          <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-2 text-sm">
             <dt className="font-semibold">
               <Trans>Code</Trans>
             </dt>

package/src/components/utils/help-card.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX } from 'react'
 import type { LinkDefinition } from '@atproto/oauth-provider-api'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 
 export type HelpCardProps = Override<
@@ -25,7 +25,7 @@ export function HelpCard({
     <p
       {...props}
       className={clsx(
-        'text-sm rounded-md bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400 p-3',
+        'rounded-md bg-slate-100 p-3 text-sm text-slate-800 dark:bg-slate-800 dark:text-slate-400',
         className,
       )}
     >
@@ -36,7 +36,7 @@ export function HelpCard({
           href={helpLink.href}
           rel={helpLink.rel}
           target="_blank"
-          className="text-brand"
+          className="text-primary"
         >
           <Trans>Contact support</Trans>
         </a>

package/src/components/utils/multi-lang-string.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro'
-import { ReactNode } from 'react'
+import { ReactNode, useMemo } from 'react'
 import type { LocalizedString } from '@atproto/oauth-provider-api'
 
 export type MultiLangStringProps = {
@@ -11,11 +11,17 @@ export function MultiLangString({
   value,
   fallback,
 }: MultiLangStringProps): ReactNode {
-  const { i18n } = useLingui()
+  const matchingString = useMatchingString(value)
   return (
-    findMatchingString(value, i18n.locale) ??
-    fallback ??
-    (typeof value === 'string' ? value : value.en)
+    matchingString ?? fallback ?? (typeof value === 'string' ? value : value.en)
+  )
+}
+
+function useMatchingString(value: LocalizedString) {
+  const { i18n } = useLingui()
+  return useMemo(
+    () => findMatchingString(value, i18n.locale),
+    [value, i18n.locale],
   )
 }
 
@@ -28,8 +34,8 @@ function findMatchingString(
 ): string | undefined {
   switch (typeof value) {
     case 'string':
-      // By convention, string values are in english ("en")
-      if (locale.startsWith('en')) return value
+      // By convention, string values are in english
+      if (locale === 'en' || locale.startsWith('en-')) return value
       break
 
     case 'object': {
@@ -37,7 +43,7 @@ function findMatchingString(
       const localeMatch = value[locale]
       if (typeof localeMatch === 'string') return localeMatch
 
-      // Fallback to language match
+      // Fallback to language match  (e.g. "fr-BE" -> "fr")
       const lang = locale.split('-')[0]
       const langMatch = value[lang]
       if (typeof langMatch === 'string') return langMatch

package/src/components/utils/password-strength-meter.tsx

@@ -1,6 +1,6 @@
 import { useLingui } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { PasswordStrength, getPasswordStrength } from '../../lib/password.ts'
 import { Override } from '../../lib/util.ts'
 
@@ -40,7 +40,7 @@ export function PasswordStrengthMeter({
   return (
     <div
       {...props}
-      className={clsx('w-full h-1 flex space-x-2', className)}
+      className={clsx('flex h-1 w-full space-x-2', className)}
       role="meter"
       aria-label={t`Password strength indicator`}
       aria-valuemin={0}
@@ -50,7 +50,7 @@ export function PasswordStrengthMeter({
       {Array.from({ length: 4 }, (_, i) => (
         <div
           key={i}
-          className={`rounded h-1 w-1/4 ${strength > i ? color : colorBg}`}
+          className={`h-1 w-1/4 rounded-sm ${strength > i ? color : colorBg}`}
         />
       ))}
     </div>

package/src/components/utils/url-viewer.tsx

@@ -28,7 +28,7 @@ export function UrlViewer<As extends keyof JSX.IntrinsicElements = 'span'>({
   // Element
   ...props
 }: Override<JSX.IntrinsicElements[As], UrlRendererProps>) {
-  const urlObj = useMemo(() => new URL(url), [url])
+  const urlObj = useMemo(() => (url instanceof URL ? url : new URL(url)), [url])
 
   return (
     <As {...props}>

package/src/error-page.tsx

@@ -1,28 +1,22 @@
-import './styles.css'
+import './style.css'
 
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import type {
-  AvailableLocales,
-  CustomizationData,
-  ErrorData,
-} from '@atproto/oauth-provider-api'
-import { readBackendData } from './lib/backend-data.ts'
+import type { HydrationData } from './hydration-data.d.ts'
 import { LocaleProvider } from './locales/locale-provider.tsx'
 import { ErrorView } from './views/error/error-view.tsx'
 
-export const availableLocales =
-  readBackendData<AvailableLocales>('__availableLocales')
-export const customizationData = readBackendData<CustomizationData>(
-  '__customizationData',
-)
-export const errorData = readBackendData<ErrorData>('__errorData')
+const {
+  //
+  __errorData: errorData,
+  __customizationData: customizationData,
+} = window as typeof window & HydrationData['error-page']
 
 const container = document.getElementById('root')!
 
 createRoot(container).render(
   <StrictMode>
-    <LocaleProvider availableLocales={availableLocales}>
+    <LocaleProvider>
       <ErrorView error={errorData} customizationData={customizationData} />
     </LocaleProvider>
   </StrictMode>,

package/src/hooks/use-api.ts

@@ -1,18 +1,17 @@
 import { useLingui } from '@lingui/react/macro'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useErrorBoundary } from 'react-error-boundary'
 import type {
   Account,
-  ConfirmResetPasswordData,
-  InitiatePasswordResetData,
+  ConfirmResetPasswordInput,
+  InitiatePasswordResetInput,
   Session,
-  SignInData,
-  SignUpData,
-  VerifyHandleAvailabilityData,
+  SignInInput,
+  SignUpInput,
+  VerifyHandleAvailabilityInput,
 } from '@atproto/oauth-provider-api'
-import { AcceptData, Api, UnknownRequestUriError } from '../lib/api.ts'
+import { Api, UnknownRequestUriError } from '../lib/api.ts'
 import { upsert } from '../lib/util.ts'
-import { useCsrfToken } from './use-csrf-token.ts'
 
 /**
  * Any function wrapped with this helper will automatically show the error
@@ -38,24 +37,20 @@ function useSafeCallback<F extends (...a: any) => any>(fn: F, deps: unknown[]) {
   )
 }
 
-export type UseApiOptions = {
-  requestUri: string
-  sessions?: readonly Session[]
-  newSessionsRequireConsent?: boolean
-  onRedirected?: () => void
+export type SessionWithToken = Session & {
+  ephemeralToken?: string
 }
 
 export function useApi({
-  requestUri,
   sessions: sessionsInit = [],
-  newSessionsRequireConsent = true,
   onRedirected,
-}: UseApiOptions) {
-  const csrfToken = useCsrfToken(`csrf-${requestUri}`)
-  if (!csrfToken) throw new Error('CSRF token is missing')
-
-  const api = useMemo(() => new Api(csrfToken), [csrfToken])
-  const [sessions, setSessions] = useState(sessionsInit)
+}: {
+  sessions?: readonly Session[]
+  onRedirected?: () => void
+}) {
+  const [api] = useState(() => new Api())
+  const [sessions, setSessions] =
+    useState<readonly SessionWithToken[]>(sessionsInit)
 
   const { i18n } = useLingui()
   const { locale } = i18n
@@ -74,30 +69,47 @@ export function useApi({
   const upsertSession = useCallback(
     ({
       account,
-      consentRequired,
-    }: {
-      account: Account
-      consentRequired: boolean
-    }) => {
-      const session: Session = {
+      ephemeralToken,
+      // The server will tell us if the user needs to consent to the
+      // authorization. Defaults to true in case of sign-ups
+      consentRequired = true,
+      // When a new session is inserted, assume that the user intends to use
+      // it, and therefore, it is selected by default.
+      selected = true,
+      // When a new session is inserted, it is assumed that the user just
+      // created the session, and therefore, login is not required.
+      loginRequired = false,
+    }: { account: Account } & Partial<SessionWithToken>) => {
+      const session: SessionWithToken = {
         account,
-        selected: true,
-        loginRequired: false,
-        consentRequired: newSessionsRequireConsent || consentRequired,
+        ephemeralToken,
+        selected,
+        loginRequired,
+        consentRequired,
       }
 
       setSessions((sessions) =>
         upsert(sessions, session, (s) => s.account.sub === account.sub).map(
-          // Make sure to de-select any other selected session
-          (s) => (s === session || !s.selected ? s : { ...s, selected: false }),
+          // Make sure to de-select any other selected session (if selected is
+          // true)
+          (s) =>
+            !selected || s === session || !s.selected
+              ? s
+              : { ...s, selected: false },
         ),
       )
     },
-    [setSessions, newSessionsRequireConsent],
+    [setSessions],
   )
 
   const performRedirect = useCallback(
-    (url: URL) => {
+    (url: string | URL) => {
+      // @TODO At this point, the request cannot be accepted/rejected anymore.
+      // We should probably change the app's state to something that indicates
+      // that in order to improve UX in case the user comes back to the app.
+      // This is currently ensured by the backend (through back-forward cache
+      // busting) but handling it here would provide a better UX.
+
       window.location.href = String(url)
       if (onRedirected) setTimeout(onRedirected)
     },
@@ -105,8 +117,9 @@ export function useApi({
   )
 
   const doSignIn = useSafeCallback(
-    async (data: Omit<SignInData, 'locale'>, signal?: AbortSignal) => {
+    async (data: Omit<SignInInput, 'locale'>, signal?: AbortSignal) => {
       const response = await api.fetch(
+        'POST',
         '/sign-in',
         { ...data, locale },
         { signal },
@@ -118,10 +131,11 @@ export function useApi({
 
   const doInitiatePasswordReset = useSafeCallback(
     async (
-      data: Omit<InitiatePasswordResetData, 'locale'>,
+      data: Omit<InitiatePasswordResetInput, 'locale'>,
       signal?: AbortSignal,
     ) => {
       await api.fetch(
+        'POST',
         '/reset-password-request',
         { ...data, locale },
         { signal },
@@ -131,22 +145,23 @@ export function useApi({
   )
 
   const doConfirmResetPassword = useSafeCallback(
-    async (data: ConfirmResetPasswordData, signal?: AbortSignal) => {
-      await api.fetch('/reset-password-confirm', data, { signal })
+    async (data: ConfirmResetPasswordInput, signal?: AbortSignal) => {
+      await api.fetch('POST', '/reset-password-confirm', data, { signal })
     },
     [api],
   )
 
   const doValidateNewHandle = useSafeCallback(
-    async (data: VerifyHandleAvailabilityData, signal?: AbortSignal) => {
-      await api.fetch('/verify-handle-availability', data, { signal })
+    async (data: VerifyHandleAvailabilityInput, signal?: AbortSignal) => {
+      await api.fetch('POST', '/verify-handle-availability', data, { signal })
     },
     [api],
   )
 
   const doSignUp = useSafeCallback(
-    async (data: Omit<SignUpData, 'locale'>, signal?: AbortSignal) => {
+    async (data: Omit<SignUpInput, 'locale'>, signal?: AbortSignal) => {
       const response = await api.fetch(
+        'POST',
         '/sign-up',
         { ...data, locale },
         { signal },
@@ -157,14 +172,19 @@ export function useApi({
   )
 
   const doAccept = useSafeCallback(
-    async (data: AcceptData) => {
-      performRedirect(api.buildAcceptUrl(data))
+    async (sub: string) => {
+      // If "remember me" was unchecked, we need to use the ephemeral token to
+      // authenticate the request.
+      const bearer = sessions.find((s) => s.account.sub === sub)?.ephemeralToken
+      const { url } = await api.fetch('POST', '/accept', { sub }, { bearer })
+      performRedirect(url)
     },
-    [api, performRedirect],
+    [api, sessions, performRedirect],
   )
 
   const doReject = useSafeCallback(async () => {
-    performRedirect(api.buildRejectUrl())
+    const { url } = await api.fetch('POST', '/reject', {})
+    performRedirect(url)
   }, [api, performRedirect])
 
   return {

package/src/hydration-data.d.ts

@@ -0,0 +1,42 @@
+import type {
+  CustomizationData,
+  ScopeDetail,
+  Session,
+} from '@atproto/oauth-provider-api'
+import type { OAuthClientMetadata } from '@atproto/oauth-types'
+
+export type AuthorizeData = {
+  requestUri: string
+
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  clientTrusted: boolean
+
+  scopeDetails?: ScopeDetail[]
+
+  loginHint?: string
+  uiLocales?: string
+}
+
+export type ErrorData = {
+  error: string
+  error_description: string
+}
+
+export type HydrationData = {
+  /**
+   * Matches the variables needed by `authorization-page.tsx`
+   */
+  'authorization-page': {
+    __customizationData: CustomizationData
+    __authorizeData: AuthorizeData
+    __sessions: readonly Session[]
+  }
+  'error-page': {
+    /**
+     * Matches the variables needed by `error-page.tsx`
+     */
+    __customizationData: CustomizationData
+    __errorData: ErrorData
+  }
+}

package/src/lib/api.ts

@@ -1,4 +1,10 @@
-import type { ApiEndpoints } from '@atproto/oauth-provider-api'
+import {
+  API_ENDPOINT_PREFIX,
+  ApiEndpoints,
+  CSRF_COOKIE_NAME,
+  CSRF_HEADER_NAME,
+} from '@atproto/oauth-provider-api'
+import { readCookie } from './cookies.ts'
 import {
   JsonClient,
   JsonErrorPayload,
@@ -7,27 +13,12 @@ import {
 
 export type { Options } from './json-client.ts'
 
-export type AcceptData = {
-  sub: string
-}
-
 export class Api extends JsonClient<ApiEndpoints> {
-  constructor(csrfToken: string) {
-    const baseUrl = new URL('/oauth/authorize', window.origin).toString()
-    super(baseUrl, csrfToken)
-  }
-
-  public buildAcceptUrl({ sub }: AcceptData): URL {
-    const url = new URL(`${this.baseUrl}/accept`)
-    url.searchParams.set('account_sub', sub)
-    url.searchParams.set('csrf_token', this.csrfToken)
-    return url
-  }
-
-  public buildRejectUrl(): URL {
-    const url = new URL(`${this.baseUrl}/reject`)
-    url.searchParams.set('csrf_token', this.csrfToken)
-    return url
+  constructor() {
+    const baseUrl = new URL(API_ENDPOINT_PREFIX, window.origin).toString()
+    super(baseUrl, () => ({
+      [CSRF_HEADER_NAME]: readCookie(CSRF_COOKIE_NAME),
+    }))
   }
 
   // Override the parent's parseError method to handle expected error responses

package/src/{cookies.ts → lib/cookies.ts}

@@ -1,5 +1,5 @@
 export const parseCookieString = (
-  cookie: string,
+  cookie: string = document.cookie,
 ): Record<string, string | undefined> =>
   Object.fromEntries(
     cookie
@@ -8,4 +8,10 @@ export const parseCookieString = (
       .map((str) => str.split('=', 2).map((s) => decodeURIComponent(s.trim()))),
   )
 
-export const cookies = parseCookieString(document.cookie)
+export function readCookie(
+  name: string,
+  cookie: string = document.cookie,
+): string | undefined {
+  const cookies = parseCookieString(cookie)
+  return cookies[name]
+}