@atproto/oauth-provider 0.1.0

package/src/account/account-store.ts

@@ -0,0 +1,74 @@
+import { ClientId } from '../client/client-id.js'
+import { DeviceId } from '../device/device-id.js'
+import { Awaitable } from '../lib/util/type.js'
+import { Sub } from '../oidc/sub.js'
+import { Account } from './account.js'
+
+export type LoginCredentials = {
+  username: string
+  password: string
+
+  /**
+   * If false, the account must not be returned from
+   * {@link AccountStore.listDeviceAccounts}. Note that this only makes sense when
+   * used with a device ID.
+   */
+  remember?: boolean
+}
+
+export type DeviceAccountInfo = {
+  remembered: boolean
+  authenticatedAt: Date
+  authorizedClients: readonly ClientId[]
+}
+
+// Export all types needed to implement the AccountStore interface
+export type { Account, DeviceId, Sub }
+
+export type AccountInfo = {
+  account: Account
+  info: DeviceAccountInfo
+}
+
+export interface AccountStore {
+  authenticateAccount(
+    credentials: LoginCredentials,
+    deviceId: DeviceId,
+  ): Awaitable<AccountInfo | null>
+
+  addAuthorizedClient(
+    deviceId: DeviceId,
+    sub: Sub,
+    clientId: ClientId,
+  ): Awaitable<void>
+
+  getDeviceAccount(deviceId: DeviceId, sub: Sub): Awaitable<AccountInfo | null>
+  removeDeviceAccount(deviceId: DeviceId, sub: Sub): Awaitable<void>
+
+  /**
+   * @note Only the accounts that where logged in with `remember: true` need to
+   * be returned. The others will be ignored.
+   */
+  listDeviceAccounts(deviceId: DeviceId): Awaitable<AccountInfo[]>
+}
+
+export function isAccountStore(
+  implementation: Record<string, unknown> & Partial<AccountStore>,
+): implementation is Record<string, unknown> & AccountStore {
+  return (
+    typeof implementation.authenticateAccount === 'function' &&
+    typeof implementation.getDeviceAccount === 'function' &&
+    typeof implementation.addAuthorizedClient === 'function' &&
+    typeof implementation.listDeviceAccounts === 'function' &&
+    typeof implementation.removeDeviceAccount === 'function'
+  )
+}
+
+export function asAccountStore(
+  implementation?: Record<string, unknown> & Partial<AccountStore>,
+): AccountStore {
+  if (!implementation || !isAccountStore(implementation)) {
+    throw new Error('Invalid AccountStore implementation')
+  }
+  return implementation
+}

package/src/account/account.ts

@@ -0,0 +1,10 @@
+import { OIDCStandardPayload } from '../oidc/claims.js'
+import { Sub } from '../oidc/sub.js'
+import { Simplify } from '../lib/util/type.js'
+
+export type Account = Simplify<
+  {
+    sub: Sub // Account id
+    aud: string | [string, ...string[]] // Resource server URL
+  } & OIDCStandardPayload
+>

package/src/assets/app/app.tsx

@@ -0,0 +1,28 @@
+import type {
+  AuthorizeData,
+  CustomizationData,
+  ErrorData,
+} from './backend-data'
+import { AuthorizeView } from './views/authorize-view'
+import { ErrorView } from './views/error-view'
+
+export type AppProps = {
+  authorizeData?: AuthorizeData
+  customizationData?: CustomizationData
+  errorData?: ErrorData
+}
+
+export function App({ authorizeData, customizationData, errorData }: AppProps) {
+  if (authorizeData && !errorData) {
+    return (
+      <AuthorizeView
+        customizationData={customizationData}
+        authorizeData={authorizeData}
+      />
+    )
+  } else {
+    return (
+      <ErrorView customizationData={customizationData} errorData={errorData} />
+    )
+  }
+}

package/src/assets/app/backend-data.ts

@@ -0,0 +1,65 @@
+import { OAuthClientMetadata } from '@atproto/oauth-types'
+
+// TODO: Find a way to share these types with the backend code
+
+export type Account = {
+  sub: string
+  aud: string
+
+  email?: string
+  name?: string
+  preferred_username?: string
+  picture?: string
+}
+
+export type Session = {
+  account: Account
+
+  selected: boolean
+  loginRequired: boolean
+  consentRequired: boolean
+}
+
+export type LinkDefinition = {
+  title: string
+  href: string
+  rel?: string
+}
+
+export type CustomizationData = {
+  name?: string
+  logo?: string
+  links?: LinkDefinition[]
+}
+
+export type ErrorData = {
+  error: string
+  error_description: string
+}
+
+export type AuthorizeData = {
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  clientTrusted: boolean
+  requestUri: string
+  csrfCookie: string
+  sessions: Session[]
+  newSessionsRequireConsent: boolean
+  loginHint?: string
+}
+
+// see "declareBackendData()" in the backend
+const readBackendData = <T>(key: string): T | undefined => {
+  const value = window[key] as T | undefined
+  delete window[key] // Prevent accidental usage / potential leaks to dependencies
+  return value
+}
+
+// These values are injected by the backend when it builds the
+// page HTML.
+
+export const customizationData = readBackendData<CustomizationData>(
+  '__customizationData',
+)
+export const errorData = readBackendData<ErrorData>('__errorData')
+export const authorizeData = readBackendData<AuthorizeData>('__authorizeData')

package/src/assets/app/components/accept-form.tsx

@@ -0,0 +1,112 @@
+import { OAuthClientMetadata } from '@atproto/oauth-types'
+import { type HTMLAttributes } from 'react'
+
+import { Account } from '../backend-data'
+import { clsx } from '../lib/clsx'
+import { AccountIdentifier } from './account-identifier'
+import { ClientIdentifier } from './client-identifier'
+import { ClientName } from './client-name'
+
+export type AcceptFormProps = {
+  account: Account
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  clientTrusted: boolean
+  onAccept: () => void
+  acceptLabel?: string
+
+  onReject: () => void
+  rejectLabel?: string
+
+  onBack?: () => void
+  backLabel?: string
+}
+
+export function AcceptForm({
+  account,
+  clientId,
+  clientMetadata,
+  clientTrusted,
+  onAccept,
+  acceptLabel = 'Accept',
+  onReject,
+  rejectLabel = 'Deny access',
+  onBack,
+  backLabel = 'Back',
+
+  ...attrs
+}: AcceptFormProps & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...attrs} className={clsx('flex flex-col', attrs.className)}>
+      {clientTrusted && clientMetadata.logo_uri && (
+        <div className="flex items-center justify-center mb-4">
+          <img
+            crossOrigin="anonymous"
+            src={clientMetadata.logo_uri}
+            alt={clientMetadata.client_name}
+            className="w-16 h-16 rounded-full"
+          />
+        </div>
+      )}
+
+      <ClientName
+        clientId={clientId}
+        clientMetadata={clientMetadata}
+        as="h1"
+        className="text-2xl font-semibold text-center text-primary"
+      />
+
+      <p className="mt-4">
+        <ClientIdentifier clientId={clientId} clientMetadata={clientMetadata} />{' '}
+        is asking for permission to access your{' '}
+        <AccountIdentifier account={account} /> account.
+      </p>
+
+      <p className="mt-4">
+        By clicking <b>{acceptLabel}</b>, you allow this application to access
+        your information in accordance to its{' '}
+        <a
+          href={clientMetadata.tos_uri}
+          rel="nofollow noopener"
+          target="_blank"
+          className="text-primary underline"
+        >
+          terms of service
+        </a>
+        .
+      </p>
+
+      <div className="flex-auto" />
+
+      <div className="p-4 flex flex-wrap items-center justify-between">
+        <button
+          type="button"
+          onClick={onAccept}
+          className="py-2 bg-transparent text-primary rounded-md font-semibold order-last"
+        >
+          {acceptLabel}
+        </button>
+
+        {onBack && (
+          <button
+            type="button"
+            onClick={() => onBack()}
+            className="mr-2 py-2 bg-transparent text-primary rounded-md font-light"
+          >
+            {backLabel}
+          </button>
+        )}
+
+        <div className="flex-auto"></div>
+
+        <button
+          type="button"
+          onClick={onReject}
+          className="mr-2 py-2 bg-transparent text-primary rounded-md font-light"
+        >
+          {rejectLabel}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/assets/app/components/account-identifier.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react'
+
+import { Account } from '../backend-data'
+
+export type AccountIdentifierProps = {
+  account: Account
+}
+
+export function AccountIdentifier({
+  account,
+  ...attrs
+}: AccountIdentifierProps & HTMLAttributes<Element>) {
+  return (
+    <b {...attrs}>
+      {account.preferred_username || account.email || account.sub}
+    </b>
+  )
+}

package/src/assets/app/components/account-picker.tsx

@@ -0,0 +1,108 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Account } from '../backend-data'
+import { clsx } from '../lib/clsx'
+
+export type AccountPickerProps = {
+  accounts: readonly Account[]
+
+  onAccount: (account: Account) => void
+  accountAria?: (account: Account) => string
+
+  onOther?: () => void
+  otherLabel?: ReactNode
+  otherAria?: string
+
+  onBack?: () => void
+  backLabel?: ReactNode
+  backAria?: string
+}
+
+export function AccountPicker({
+  accounts,
+
+  onAccount,
+  accountAria = (a) => `Sign in as ${a.name}`,
+
+  onOther = undefined,
+  otherLabel = 'Other account',
+  otherAria = 'Login to account that is not listed',
+
+  onBack,
+  backAria,
+  backLabel = backAria,
+
+  className,
+  ...attrs
+}: AccountPickerProps & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...attrs} className={clsx('flex flex-col', className)}>
+      <p className="font-medium p-4">Sign in as...</p>
+
+      {accounts.map((account) => {
+        const [name, identifier] = [
+          account.name,
+          account.preferred_username,
+          account.email,
+          account.sub,
+        ].filter(Boolean) as [string, string?]
+
+        return (
+          <button
+            key={account.sub}
+            className="cursor-pointer text-start flex items-center justify-between py-2 px-6 border-t border-b -mb-px hover:bg-slate-100 border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
+            onClick={() => onAccount(account)}
+            role="button"
+            aria-label={accountAria(account)}
+          >
+            <div className="pr-2 flex items-center justify-start max-w-full overflow-hidden">
+              {account.picture && (
+                <img
+                  crossOrigin="anonymous"
+                  src={account.picture}
+                  alt={name}
+                  className="w-8 h-8 mr-2 rounded-full"
+                />
+              )}
+              <div className="min-w-0 my-2 flex-auto truncate">
+                <span className="font-semibold">{name}</span>
+                {identifier && (
+                  <span className="ml-2 text-sm text-neutral-500 dark:text-neutral-400">
+                    {identifier}
+                  </span>
+                )}
+              </div>
+            </div>
+            <span className="scale-x-50 font-semibold text-xl">&gt;</span>
+          </button>
+        )
+      })}
+      {onOther && (
+        <button
+          className="cursor-pointer text-start flex items-center justify-between py-2 px-6 border-t border-b hover:bg-slate-100 border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
+          onClick={onOther}
+          aria-label={otherAria}
+          role="button"
+        >
+          <div className="min-w-0 my-2 flex-auto truncate">{otherLabel}</div>
+
+          <span className="scale-x-50 font-semibold text-xl">&gt;</span>
+        </button>
+      )}
+
+      <div className="flex-auto" />
+
+      {onBack && (
+        <div className="p-4 flex flex-wrap items-center justify-between">
+          <button
+            type="button"
+            onClick={() => onBack()}
+            className="py-2 bg-transparent text-primary rounded-md font-light"
+            aria-label={backAria}
+          >
+            {backLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/assets/app/components/client-identifier.tsx

@@ -0,0 +1,32 @@
+import { OAuthClientMetadata } from '@atproto/oauth-types'
+import { HTMLAttributes } from 'react'
+
+import { UrlViewer } from './url-viewer'
+
+export type ClientIdentifierProps = {
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  as?: keyof JSX.IntrinsicElements
+}
+
+export function ClientIdentifier({
+  clientId,
+  clientMetadata,
+  as: As = 'span',
+  ...attrs
+}: ClientIdentifierProps & HTMLAttributes<Element>) {
+  if (clientMetadata.client_uri) {
+    return (
+      <UrlViewer
+        as={As}
+        {...attrs}
+        url={clientMetadata.client_uri}
+        proto
+        path
+      />
+    )
+  }
+
+  // Fallback to the client ID
+  return <As {...attrs}>{clientId}</As>
+}

package/src/assets/app/components/client-name.tsx

@@ -0,0 +1,30 @@
+import { OAuthClientMetadata } from '@atproto/oauth-types'
+import { HTMLAttributes } from 'react'
+
+import { ClientIdentifier } from './client-identifier'
+
+export type ClientNameProps = {
+  clientId: string
+  clientMetadata: OAuthClientMetadata
+  as?: keyof JSX.IntrinsicElements
+}
+
+export function ClientName({
+  clientId,
+  clientMetadata,
+  as: As = 'span',
+  ...attrs
+}: ClientNameProps & HTMLAttributes<Element>) {
+  if (clientMetadata.client_name) {
+    return <As {...attrs}>{clientMetadata.client_name}</As>
+  }
+
+  return (
+    <ClientIdentifier
+      clientId={clientId}
+      clientMetadata={clientMetadata}
+      as={As}
+      {...attrs}
+    />
+  )
+}

package/src/assets/app/components/error-card.tsx

@@ -0,0 +1,41 @@
+import { HtmlHTMLAttributes } from 'react'
+import { clsx } from '../lib/clsx'
+
+export type ErrorCardProps = {
+  message?: null | string
+  role?: 'alert' | 'status'
+}
+
+export function ErrorCard({
+  message,
+
+  role = 'alert',
+  className,
+  ...attrs
+}: Partial<ErrorCardProps> &
+  Omit<HtmlHTMLAttributes<HTMLDivElement>, keyof ErrorCardProps | 'children'>) {
+  return (
+    <div
+      {...attrs}
+      className={clsx(
+        'flex items-center rounded bg-error py-1 px-2 text-white dark:text-black shadow-md',
+        className,
+      )}
+      role={role}
+    >
+      <svg
+        className="fill-current h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+      >
+        <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
+      </svg>
+
+      <div className="ml-4">
+        <p>
+          {typeof message === 'string' ? message : 'An unknown error occurred'}
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/assets/app/components/help-card.tsx

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react'
+import { LinkDefinition } from '../backend-data'
+import { clsx } from '../lib/clsx'
+
+export type HelpCardProps = {
+  links?: readonly LinkDefinition[]
+}
+
+export function HelpCard({
+  links,
+
+  className,
+  ...attrs
+}: HelpCardProps &
+  Omit<
+    HTMLAttributes<HTMLParagraphElement>,
+    keyof HelpCardProps | 'children'
+  >) {
+  const helpLink = links?.find((l) => l.rel === 'help')
+
+  if (!helpLink) return null
+
+  return (
+    <p
+      className={clsx(
+        'text-sm rounded-md bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400 p-3',
+        className,
+      )}
+      {...attrs}
+    >
+      Having trouble?{' '}
+      <a
+        href={helpLink.href}
+        rel={helpLink.rel}
+        target="_blank"
+        className="text-primary"
+      >
+        Contact {helpLink.title}
+      </a>
+    </p>
+  )
+}

package/src/assets/app/components/layout-title-page.tsx

@@ -0,0 +1,43 @@
+import { HTMLAttributes, ReactNode } from 'react'
+import { clsx } from '../lib/clsx'
+
+export type LayoutTitlePageProps = {
+  title?: ReactNode
+  subtitle?: ReactNode
+}
+
+export function LayoutTitlePage({
+  children,
+  title,
+  subtitle,
+  ...attrs
+}: LayoutTitlePageProps &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof LayoutTitlePageProps>) {
+  return (
+    <div
+      {...attrs}
+      className={clsx(
+        attrs.className,
+        'flex justify-center items-stretch min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100',
+      )}
+    >
+      <div className="w-1/2 hidden p-4 md:grid content-center justify-items-end text-right dark:bg-transparent dark:border-r bg-slate-100 dark:bg-slate-800 dark:border-slate-700">
+        {title && (
+          <h1 className="text-3xl lg:text-5xl mt-4 font-semibold mb-4 text-primary">
+            {title}
+          </h1>
+        )}
+
+        {subtitle && (
+          <p className="max-w-xs text-slate-500 dark:text-slate-500">
+            {subtitle}
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-stretch md:items-center w-full justify-center px-6 md:justify-start md:px-12">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/assets/app/components/layout-welcome.tsx

@@ -0,0 +1,58 @@
+import { PropsWithChildren } from 'react'
+
+export type LayoutWelcomeProps = {
+  name?: string
+  logo?: string
+  links?: Array<{
+    title: string
+    href: string
+    rel?: string
+  }>
+  logoAlt?: string
+}
+
+export function LayoutWelcome({
+  name,
+  logo,
+  logoAlt = name || 'Logo',
+  links,
+  children,
+}: PropsWithChildren<LayoutWelcomeProps>) {
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center flex-col bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
+      <div className="w-full max-w-screen-sm overflow-hidden flex-grow flex flex-col items-center justify-center">
+        {logo && (
+          <img
+            src={logo}
+            alt={logoAlt}
+            className="w-16 h-16 md:w-24 md:h-24 mb-8"
+          />
+        )}
+
+        {name && (
+          <h1 className="text-2xl md:text-4xl mb-8 mx-4 text-center font-bold">
+            {name}
+          </h1>
+        )}
+
+        {children}
+      </div>
+
+      {links != null && links.length > 0 && (
+        <nav className="w-full max-w-screen-sm overflow-hidden mt-4 border-t border-t-slate-200 dark:border-t-slate-700 flex flex-wrap justify-center">
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              rel={link.rel}
+              target="_blank"
+              className="m-2 md:m-4 text-xs md:text-sm text-primary hover:underline"
+            >
+              {link.title}
+            </a>
+          ))}
+        </nav>
+      )}
+    </div>
+  )
+}