@toa.io/extensions.configuration 1.0.0-alpha.273 → 1.0.0-alpha.274

package/ui/src/@/iam/svc/net/interface.ts

@@ -0,0 +1,17 @@
+import { origin, type RequestOptions } from '@/net'
+import type { Echo } from './Echo'
+
+const echo = origin.resource<Echo>('/accounts/echo/')
+
+async function get(authorization?: string): Promise<Echo | Error> {
+  const options: RequestOptions = { method: 'GET' }
+
+  if (authorization !== undefined) {
+    options.headers = { authorization }
+    options.credentials = 'include'
+  }
+
+  return echo.json(options)
+}
+
+export { get }

package/ui/src/@/iam/svc/net/otp/index.ts

@@ -0,0 +1 @@
+export * from './interface'

package/ui/src/@/iam/svc/net/otp/interface.ts

@@ -0,0 +1,14 @@
+import { origin } from '@/net'
+
+const otp = origin.resource('/accounts/otp/')
+
+interface Post {
+  email: string
+}
+
+async function post(a: string | Post, b?: Post): Promise<void | Error> {
+  if (typeof a === 'string') return await otp.json(a, { method: 'POST', body: b, credentials: 'include' })
+  else return await otp.json({ method: 'POST', body: a })
+}
+
+export { post }

package/ui/src/@/iam/svc/net/passkeys/index.ts

@@ -0,0 +1 @@
+export * from './interface'

package/ui/src/@/iam/svc/net/passkeys/interface.ts

@@ -0,0 +1,12 @@
+import { origin } from '@/net'
+import type { CreationResponse, RequestResponse } from '@/passkeys/svc/net'
+import type { Account } from '@/iam'
+
+const passkeys = origin.resource('/accounts/passkeys/')
+
+async function post(a: string | RequestResponse, body?: CreationResponse): Promise<Account | Error> {
+  if (typeof a === 'string') return await passkeys.json(a, { method: 'POST', body, credentials: 'include' })
+  else return await passkeys.json({ method: 'POST', body: a })
+}
+
+export { post }

package/ui/src/@/iam/svc/oidc/apple.ts

@@ -0,0 +1,47 @@
+import type { Descriptor } from './providers'
+
+const win = typeof window !== 'undefined' && (window as any)
+
+async function apple(descriptor: Descriptor): Promise<string | Error> {
+  await init(descriptor)
+
+  const response = await win.AppleID.auth.signIn().catch((err: unknown) => err)
+
+  if (response instanceof Error)
+    return response
+
+  if (response?.authorization === undefined)
+    return new Error('No authentication response received', { cause: response })
+
+  return response.authorization.code
+}
+
+function init(descriptor: Descriptor) {
+  if (win.AppleID !== undefined)
+    return undefined
+
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+
+    script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
+    script.async = true
+
+    script.onload = () => {
+      win.AppleID.auth.init({
+        clientId: descriptor.client,
+        scope: descriptor.scope,
+        redirectURI: window.location.origin,
+        state: btoa(JSON.stringify({ idp: 'apple' })),
+        usePopup: true,
+      })
+
+      resolve(undefined)
+    }
+
+    script.onerror = reject
+
+    document.head.appendChild(script)
+  })
+}
+
+export { apple }

package/ui/src/@/iam/svc/oidc/authenticate.ts

@@ -0,0 +1,62 @@
+import { sync } from '../sync'
+import * as net from '../net'
+import { authenticated } from '../authenticated'
+import { standard } from './standard'
+import { providers, type Descriptor, type IDP } from './providers'
+import { google } from './google'
+import { apple } from './apple'
+
+const vendors = { apple, google } as const
+
+export async function authenticate(idp: IDP, identity?: string) {
+  const credentials = await getCredentials(idp)
+
+  if (credentials instanceof Error)
+    return credentials
+
+  if (identity !== undefined)
+    return add(identity, credentials)
+  else
+    return verify(idp, credentials)
+}
+
+async function getCredentials(idp: IDP) {
+  const auth = (vendors[idp] ?? standard) as Authenticate
+  const descriptor = providers[idp]
+
+  const code = await auth(descriptor, idp)
+
+  if (code instanceof Error) {
+    console.error('Authentication failed', code)
+
+    return code
+  }
+
+  if (code === undefined)
+    throw new Error('No authentication code received, redirect flow is not supported')
+
+  const data = {
+    code,
+    iss: descriptor.iss,
+    for: window.location.origin,
+  }
+
+  return btoa(JSON.stringify(data))
+}
+
+async function add(identity: string, credentials: string) {
+  const err = await net.federation.post(identity, { scheme: 'code', credentials })
+
+  if (err instanceof Error)
+    return err
+
+  void sync()
+}
+
+async function verify(idp: IDP, credentials: string) {
+  const echo = await net.get('Code ' + credentials)
+
+  return authenticated(echo, idp)
+}
+
+type Authenticate = (descriptor: Descriptor, idp: IDP) => Promise<string | Error | undefined>

package/ui/src/@/iam/svc/oidc/google.ts

@@ -0,0 +1,45 @@
+import type { Descriptor } from './providers'
+
+async function google(descriptor: Descriptor): Promise<string | Error> {
+  await init()
+
+  const response = await new Promise((resolve) => {
+    const google = (window as any).google as any
+
+    const client = google.accounts.oauth2.initCodeClient({
+      client_id: descriptor.client,
+      scope: descriptor.scope,
+      ux_mode: 'popup',
+      state: btoa(JSON.stringify({ idp: 'google' })),
+      redirect_uri: window.location.origin + '/',
+      callback: async (response: { code?: string; error?: string }) => {
+        resolve(response)
+      },
+    })
+
+    client.requestCode()
+  }) as { code?: string; error?: string }
+
+  if (response?.code === undefined)
+    return new Error('NO_RESPONSE', { cause: response })
+
+  return response.code
+}
+
+function init() {
+  return new Promise((resolve, reject) => {
+    const google = (window as any).google as any
+
+    if (google?.accounts?.oauth2 !== undefined) return resolve(undefined)
+
+    const script = document.createElement('script')
+
+    script.src = 'https://accounts.google.com/gsi/client'
+    script.async = true
+    script.onload = () => resolve(undefined)
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}
+
+export { google }

package/ui/src/@/iam/svc/oidc/hello.ts

@@ -0,0 +1,82 @@
+/**
+ * OBSOLETE
+ * Currently unused as both apple and google use popups.
+ */
+
+import * as accounts from '@/iam/svc/net'
+import { fragment, query, assert } from '$lib/tools'
+import { navigation } from '$config'
+import { resolve } from '$app/paths'
+import { goto } from '$app/navigation'
+import { consume } from '../transfer'
+import { account, challenge, greeting } from '../store'
+import { logout } from '../logout'
+import { providers, type IDP } from './providers'
+import { nonce } from './nonce'
+
+export async function hello() {
+  const authorization = consume() ?? bearer() ?? code()
+
+  nonce.set(null)
+
+  if (authorization === null) return
+
+  logout()
+  greeting.set(true)
+
+  const echo = await accounts.get(authorization)
+
+  if (echo instanceof Error) {
+    challenge.set(null)
+    account.set(null)
+  } else {
+    account.set(echo)
+
+    if (navigation?.entry !== window.location.pathname)
+      await goto(resolve(navigation.entry), { replaceState: true })
+  }
+
+  greeting.set(false)
+}
+
+function bearer(): string | null {
+  const token = fragment('id_token')
+
+  if (token === null) return null
+
+  const stored = nonce.extract()
+  const payload = JSON.parse(atob(token.split('.')[1])) as { nonce: string }
+
+  if (stored === null || payload.nonce !== stored) {
+    console.error('Nonce mismatch')
+
+    return null
+  }
+
+  return 'Bearer ' + token
+}
+
+function code(): string | null {
+  // Google only passes code in a query string
+  const code = query('code') ?? fragment('code')
+  const state = query('state') ?? fragment('state')
+
+  if (code === null) return null
+
+  assert(typeof state === 'string', 'State is required')
+
+  const { idp } = JSON.parse(atob(state)) as { idp: IDP }
+  const provider = providers[idp]
+
+  assert(provider !== undefined, 'Unknown IDP')
+
+  const auth = {
+    code,
+    iss: providers[idp].iss,
+    for: window.location.origin + window.location.pathname,
+  }
+
+  const credentials = btoa(JSON.stringify(auth))
+
+  return 'Code ' + credentials
+}

package/ui/src/@/iam/svc/oidc/index.ts

@@ -0,0 +1,3 @@
+export { authenticate } from './authenticate'
+export { providers } from './providers'
+export type { IDP } from './providers'

package/ui/src/@/iam/svc/oidc/nonce.ts

@@ -0,0 +1,5 @@
+import { value } from 'svas'
+
+export const nonce = value<string>({
+  persist: 'auth:oidc:nonce',
+})

package/ui/src/@/iam/svc/oidc/providers.ts

@@ -0,0 +1,28 @@
+import { env } from '$env/dynamic/public'
+
+export const providers = {
+  apple: {
+    iss: 'https://appleid.apple.com',
+    endpoint: 'https://appleid.apple.com/auth/authorize',
+    type: 'code',
+    scope: 'openid',
+    client: env.PUBLIC_APPLE_CLIENT_ID,
+  },
+  google: {
+    iss: 'https://accounts.google.com',
+    endpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
+    type: 'id_token',
+    scope: 'openid profile',
+    client: env.PUBLIC_GOOGLE_CLIENT_ID,
+  },
+} as const satisfies Record<string, Descriptor>
+
+export interface Descriptor {
+  iss: string
+  endpoint: string
+  type: 'id_token' | 'code'
+  scope: string
+  client: string | undefined
+}
+
+export type IDP = keyof typeof providers

package/ui/src/@/iam/svc/oidc/standard.ts

@@ -0,0 +1,28 @@
+import { nonce } from './nonce'
+import type { Descriptor, IDP } from './providers'
+
+export function standard(descriptor: Descriptor, idp: IDP) {
+  const { client, endpoint, type, scope } = descriptor
+
+  if (client === undefined || client === '')
+    throw new Error('Client ID is required')
+
+  const id = newid()
+
+  const params = new URLSearchParams({
+    client_id: client,
+    redirect_uri: window.location.origin + '/',
+    response_type: type,
+    response_mode: 'fragment',
+    scope,
+    state: btoa(JSON.stringify({ idp })),
+    nonce: id,
+  })
+
+  nonce.set(id)
+  window.location.href = endpoint + '?' + params
+}
+
+function newid() {
+  return window.crypto?.randomUUID?.() ?? Math.random().toString(16).slice(2)
+}

package/ui/src/@/iam/svc/otp.ts

@@ -0,0 +1,18 @@
+import * as net from './net'
+import { authenticated } from './authenticated'
+import type { Echo } from './net'
+
+export async function send(email: string): Promise<void | Error> {
+  return net.otp.post({ email })
+}
+
+export async function add(identity: string, email: string): Promise<void | Error> {
+  return await net.otp.post(identity, { email })
+}
+
+export async function verify(username: string, otp: string): Promise<Echo | Error> {
+  const credentials = btoa(`${username}:${otp}`)
+  const echo = await net.get('OTP ' + credentials)
+
+  return authenticated(echo, 'password')
+}

package/ui/src/@/iam/svc/passkeys/create.ts

@@ -0,0 +1,20 @@
+import * as passkeys from '@/passkeys'
+import * as origin from '../net'
+import { authenticated } from '../authenticated'
+
+export async function create(name: string, identity?: string): Promise<origin.Echo | Error> {
+  const response = await passkeys.create(name, identity)
+
+  if (response instanceof Error) {
+    console.error('Credential creation failed', response)
+
+    return response
+  }
+
+  const echo = await origin.passkeys.post(response.identity, response.key)
+
+  if (echo instanceof Error)
+    console.error('Credential registration failed', echo)
+
+  return authenticated(echo, 'passkey')
+}

package/ui/src/@/iam/svc/passkeys/index.ts

@@ -0,0 +1,2 @@
+export { create } from './create'
+export { login } from './login'

package/ui/src/@/iam/svc/passkeys/login.ts

@@ -0,0 +1,21 @@
+import { request } from '@/passkeys'
+import { passkeys } from '../net'
+import { authenticated } from '../authenticated'
+import type { Echo } from '../net'
+
+export async function login(id?: string): Promise<Echo | Error> {
+  const response = await request(id)
+
+  if (response instanceof Error) {
+    console.error('Credential request failed', response)
+
+    return response
+  }
+
+  const echo = await passkeys.post(response)
+
+  if (echo instanceof Error)
+    console.error('Credential verification failed', echo)
+
+  return authenticated(echo, 'passkey')
+}

package/ui/src/@/iam/svc/store.ts

@@ -0,0 +1,36 @@
+import { derived, writable } from 'svelte/store'
+import { value } from 'svas'
+import type { IDP } from './oidc'
+import type { Echo } from './net'
+
+const account = value<Echo>({
+  persist: 'auth:account',
+})
+
+const challenge = value<string>({
+  persist: 'auth:challenge',
+  bind: account,
+})
+
+const method = value<Method>({
+  persist: 'auth:method',
+})
+
+const processing = writable(false)
+const greeting = writable(false)
+
+const authenticated = derived([challenge, account, processing],
+  ([$challenge, $account, $processing]) => $challenge !== null && $account !== null && $processing === false)
+
+function iam(value: Echo) {
+  if (account.extract()?.id !== value.id)
+    account.set(null) // clear bound stores
+
+  account.set(value)
+}
+
+type Account = Echo
+type Method = 'passkey' | 'password' | IDP
+
+export { account, challenge, method, authenticated, processing, greeting, iam }
+export type { Account, Echo, Method }

package/ui/src/@/iam/svc/sync.ts

@@ -0,0 +1,18 @@
+import { challenge, iam } from './store'
+import * as origin from './net'
+
+/**
+ * Sync account from origin
+ */
+export async function sync(): Promise<void | Error> {
+  const credentials = challenge.extract()
+
+  if (credentials === null) return
+
+  const echo = await origin.get(credentials)
+
+  if (echo instanceof Error)
+    return echo
+
+  iam(echo)
+}

package/ui/src/@/iam/svc/transfer.ts

@@ -0,0 +1,11 @@
+import { fragment, convert } from '$lib/tools'
+
+/**
+ * Consume a session `challenge` passed via the URL fragment.
+ */
+export function consume(): string | null {
+  const base64url = fragment('challenge')
+
+  if (base64url === null) return null
+  else return convert.fromBase64Url(base64url)
+}

package/ui/src/@/iam/svc/update.ts

@@ -0,0 +1,8 @@
+import { account, type Account } from './store'
+
+export function update(tobe: Partial<Account>): void {
+  account.update((asis) => {
+    if (asis === null) return null
+    else return { ...asis, ...tobe }
+  })
+}

package/ui/src/@/iam/ui/AccountLike.ts

@@ -0,0 +1,4 @@
+export interface AccountLike {
+  id: string
+  name?: string
+}

package/ui/src/@/iam/ui/Authenticated.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { authenticated, greeting, account as iam, method, processing } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { cn } from '$lib/utils'
+  import { browser } from '$app/environment'
+  import Refresh from './Refresh.svelte'
+  import Authentication from './Authentication.svelte'
+  import type { Props } from './Authenticated'
+
+  const { children, screen, account, oncreate }: Props = $props()
+</script>
+
+{#snippet authentication()}
+  {#if $iam}
+    <Refresh account={$iam} method={$method} />
+  {:else}
+    <Authentication
+      class={cn('scale-0 transition-transform', browser && 'scale-100')}
+      {account}
+      {oncreate}
+    />
+  {/if}
+{/snippet}
+
+{#if browser && $authenticated}
+  {@render children()}
+{:else if $greeting || $processing || !browser}
+  <div class="flex items-center justify-center h-screen">
+    <Spinner />
+  </div>
+{:else if screen}
+  {@render screen({ authentication })}
+{:else}
+  <div class="flex w-full max-w-sm items-center justify-center pt-[14vh] px-4 mx-auto">
+    {@render authentication()}
+  </div>
+{/if}

package/ui/src/@/iam/ui/Authenticated.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte'
+import type { Method } from '@/iam'
+import type { AccountLike } from './AccountLike'
+
+export interface Props {
+  children: Snippet
+  screen?: Snippet<[{ authentication: () => ReturnType<Snippet> }]>
+  account?: AccountLike
+  oncreate?: (account: AccountLike, method: Method) => void
+}

package/ui/src/@/iam/ui/Authentication.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { AtSign, FingerprintPattern } from '@lucide/svelte'
+  import { supported } from '@/passkeys'
+  import { dict } from '@/iam/ui/intl'
+  import * as Tabs from '$ui/tabs'
+  import { cn } from '$lib/utils'
+  import { Authentication as Password } from './password'
+  import { Authentication as Passkey } from './passkey'
+  import { Authentication as OIDC } from './oidc'
+  import type { Props } from './Authentication'
+
+  const { class: classes, account, oncreate }: Props = $props()
+
+  let tabsRef = $state<HTMLDivElement | null>(null)
+
+  function onValueChange(value: string) {
+    requestAnimationFrame(() => {
+      tabsRef?.querySelector<HTMLInputElement>(`[data-value="${value}"] input[autofocus]`)?.focus()
+    })
+  }
+
+  let value = $state<'passkey' | 'password'>('passkey')
+
+  onMount(() => {
+    value = supported ? 'passkey' : 'password'
+  })
+</script>
+
+<Tabs.Root bind:value class={cn('w-full', classes)} {onValueChange} bind:ref={tabsRef}>
+  <div class="flex justify-between gap-2">
+    <Tabs.List>
+      <Tabs.Trigger value="passkey" data-marker="passkey-tab">
+        <FingerprintPattern color="var(--muted-foreground)" />
+        {$dict.auth.passkey}
+      </Tabs.Trigger>
+      <Tabs.Trigger value="password" id="iam-email-tab">
+        <AtSign color="var(--muted-foreground)" />
+        {$dict.auth.email}
+      </Tabs.Trigger>
+    </Tabs.List>
+    <OIDC {account} />
+  </div>
+  <Tabs.Content value="passkey">
+    <Passkey {account} oncreate={(account) => oncreate?.(account, 'passkey')} />
+  </Tabs.Content>
+  <Tabs.Content value="password">
+    <Password {account} oncreate={(account) => oncreate?.(account, 'password')} />
+  </Tabs.Content>
+</Tabs.Root>

package/ui/src/@/iam/ui/Authentication.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Method } from '@/iam'
+import type { AccountLike } from './AccountLike'
+
+export interface Props {
+  account?: AccountLike
+  class?: ClassValue
+  oncreate?: (account: AccountLike, method: Method) => void
+}

package/ui/src/@/iam/ui/Authorized.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { account } from '@/iam'
+  import { Clipboard } from '$lib/components/clipboard'
+  import { dict } from './intl'
+  import { authorize, type Props } from './Authorized'
+
+  const { children, denied, ...checks }: Props = $props()
+
+  const allowed = $derived(authorize(checks, $account))
+  const id = $derived($account?.id ?? '')
+
+  /** As much of an id as a person reads before they trust the clipboard has the rest. */
+  const SHORT = 8
+</script>
+
+{#if allowed}
+  {@render children()}
+{:else if denied !== undefined}
+  {@render denied()}
+{:else if id !== ''}
+  <!-- nothing to read: what is missing is a role on this account, and all the reader can
+       do about it is hand their id to whoever grants one -->
+  <div class="flex justify-center pt-[14vh]">
+    <Clipboard
+      text={id}
+      label={id.slice(0, SHORT)}
+      aria-label={$dict.auth.copyId}
+      variant="outline"
+      class="font-mono"
+    />
+  </div>
+{/if}