feat: oauth server side and onfidential client

app/components/Header/AuthModal.client.vue

@@ -50,6 +50,14 @@ watch(handleInput, newHandleInput => {
     handleInput.value = normalized
   }
 })
+
+watch(user, async newUser => {
+  if (newUser?.relogin) {
+    await authRedirect(newUser.did, {
+      redirectTo: route.fullPath,
+    })
+  }
+})
 </script>
 
 <template>

modules/cache.ts

@@ -4,6 +4,8 @@ import { provider } from 'std-env'
 
 // Storage key for fetch cache - must match shared/utils/fetch-cache-config.ts
 const FETCH_CACHE_STORAGE_BASE = 'fetch-cache'
+// Storage key for OAuth cache - must match server/utils/atproto/storage.ts
+const OAUTH_CACHE_STORAGE_BASE = 'atproto:oauth'
 
 export default defineNuxtModule({
   meta: {
@@ -37,6 +39,11 @@ export default defineNuxtModule({
           ...nitroConfig.storage[FETCH_CACHE_STORAGE_BASE],
           driver: 'vercel-runtime-cache',
         }
+
+        nitroConfig.storage[OAUTH_CACHE_STORAGE_BASE] = {
+          ...nitroConfig.storage[OAUTH_CACHE_STORAGE_BASE],
+          driver: 'vercel-runtime-cache',
+        }
       }
 
       const env = process.env.VERCEL_ENV

nuxt.config.ts

@@ -34,6 +34,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     sessionPassword: '',
+    oauthJwkOne: process.env.OAUTH_JWK_ONE || undefined,
     // Upstash Redis for distributed OAuth token refresh locking in production
     upstash: {
       redisRestUrl: process.env.UPSTASH_KV_REST_API_URL || process.env.KV_REST_API_URL || '',
@@ -119,6 +120,7 @@ export default defineNuxtConfig({
     '/_avatar/**': { isr: 3600, proxy: 'https://www.gravatar.com/avatar/**' },
     '/opensearch.xml': { isr: true },
     '/oauth-client-metadata.json': { prerender: true },
+    '/.well-known/jwks.json': { prerender: true },
     // never cache
     '/api/auth/**': { isr: false, cache: false },
     '/api/social/**': { isr: false, cache: false },

package.json

@@ -33,6 +33,7 @@
     "generate:sprite": "node scripts/generate-file-tree-sprite.ts",
     "generate:fixtures": "node scripts/generate-fixtures.ts",
     "generate:lexicons": "lex build --lexicons lexicons --out shared/types/lexicons --clear",
+    "generate:jwk": "node scripts/gen-jwk.ts",
     "test": "vite test",
     "test:a11y": "pnpm build:test && LIGHTHOUSE_COLOR_MODE=dark pnpm test:a11y:prebuilt && LIGHTHOUSE_COLOR_MODE=light pnpm test:a11y:prebuilt",
     "test:a11y:prebuilt": "./scripts/lighthouse.sh",

scripts/gen-jwk.ts

@@ -0,0 +1,11 @@
+import { JoseKey } from '@atproto/oauth-client-node'
+
+async function run() {
+  const kid = Date.now().toString()
+  const key = await JoseKey.generate(['ES256'], kid)
+  const jwk = key.privateJwk
+
+  console.log(JSON.stringify(jwk))
+}
+
+await run()

server/api/auth/atproto.get.ts

@@ -1,19 +1,16 @@
 import type { OAuthSession } from '@atproto/oauth-client-node'
-import { NodeOAuthClient, OAuthCallbackError } from '@atproto/oauth-client-node'
+import { OAuthCallbackError } from '@atproto/oauth-client-node'
 import { createError, getQuery, sendRedirect, setCookie, getCookie, deleteCookie } from 'h3'
 import type { H3Event } from 'h3'
-import { getOAuthLock } from '#server/utils/atproto/lock'
-import { useOAuthStorage } from '#server/utils/atproto/storage'
 import { SLINGSHOT_HOST } from '#shared/utils/constants'
 import { useServerSession } from '#server/utils/server-session'
-import { handleResolver } from '#server/utils/atproto/oauth'
 import { handleApiError } from '#server/utils/error-handler'
 import type { DidString } from '@atproto/lex'
 import { Client } from '@atproto/lex'
 import * as com from '#shared/types/lexicons/com'
 import * as app from '#shared/types/lexicons/app'
 import { isAtIdentifierString } from '@atproto/lex'
-import { scope, getOauthClientMetadata } from '#server/utils/atproto/oauth'
+import { scope } from '#server/utils/atproto/oauth'
 import { UNSET_NUXT_SESSION_PASSWORD } from '#shared/utils/constants'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
@@ -28,17 +25,8 @@ export default defineEventHandler(async event => {
   }
 
   const query = getQuery(event)
-  const clientMetadata = getOauthClientMetadata()
   const session = await useServerSession(event)
-  const { stateStore, sessionStore } = useOAuthStorage(session)
-
-  const atclient = new NodeOAuthClient({
-    stateStore,
-    sessionStore,
-    clientMetadata,
-    requestLock: getOAuthLock(),
-    handleResolver,
-  })
+  const atclient = await getNodeOAuthClient(session, config)
 
   if (query.handle) {
     // Initiate auth flow
@@ -69,7 +57,10 @@ export default defineEventHandler(async event => {
       const redirectUrl = await atclient.authorize(query.handle, {
         scope,
         prompt: query.create ? 'create' : undefined,
-        ui_locales: query.locale?.toString(),
+        // TODO: I do not beleive this is working as expected on
+        // a unsupported locale on the PDS. Gives Invalid at body.ui_locales
+        // Commenting out for now
+        // ui_locales: query.locale?.toString(),
         state: encodeOAuthState(event, { redirectPath }),
       })
 

server/api/auth/session.get.ts

@@ -8,5 +8,17 @@ export default defineEventHandler(async event => {
     return null
   }
 
+  // A one time redirect to upgrade the previous sessions.
+  // Can remove in 2 weeks from merge if we'd like
+  if (serverSession.data.oauthSession && serverSession.data?.public?.did) {
+    await serverSession.update({
+      oauthSession: undefined,
+    })
+    return {
+      ...result.output,
+      relogin: true,
+    }
+  }
+
   return result.output
 })

server/routes/.well-known/jwks.json.get.ts

@@ -0,0 +1,12 @@
+import { loadJWKs } from '#server/utils/atproto/oauth'
+
+export default defineEventHandler(async event => {
+  const config = useRuntimeConfig(event)
+  const keys = await loadJWKs(config)
+  if (!keys) {
+    console.error('Failed to load JWKs. May not be set')
+    return []
+  }
+
+  return keys.publicJwks
+})

server/routes/oauth-client-metadata.json.get.ts

@@ -1,3 +1,7 @@
-export default defineEventHandler(() => {
-  return getOauthClientMetadata()
+export default defineEventHandler(async event => {
+  const config = useRuntimeConfig(event)
+  const keyset = await loadJWKs(config)
+  // @ts-expect-error Taken from statusphere-example-app. Throws a ts error
+  const pk = keyset?.findPrivateKey({ use: 'sig' })
+  return getOauthClientMetadata(pk?.alg)
 })

server/utils/atproto/oauth-session-store.ts

@@ -1,26 +1,47 @@
 import type { NodeSavedSession, NodeSavedSessionStore } from '@atproto/oauth-client-node'
 import type { UserServerSession } from '#shared/types/userSession'
 import type { SessionManager } from 'h3'
+import { OAUTH_CACHE_STORAGE_BASE } from '#server/utils/atproto/storage'
 
 export class OAuthSessionStore implements NodeSavedSessionStore {
-  private readonly session: SessionManager<UserServerSession>
+  private readonly serverSession: SessionManager<UserServerSession>
+  private readonly storage = useStorage(OAUTH_CACHE_STORAGE_BASE)
 
   constructor(session: SessionManager<UserServerSession>) {
-    this.session = session
+    this.serverSession = session
   }
 
-  async get(): Promise<NodeSavedSession | undefined> {
-    const sessionData = this.session.data
-    if (!sessionData) return undefined
-    return sessionData.oauthSession
+  private createStorageKey(did: string, sessionId: string) {
+    return `sessions:${did}:${sessionId}`
   }
 
-  async set(_key: string, val: NodeSavedSession) {
-    // We are ignoring the key since the mapping is already done in the session
-    try {
-      await this.session.update({
-        oauthSession: val,
+  async get(key: string): Promise<NodeSavedSession | undefined> {
+    const serverSessionData = this.serverSession.data
+    if (!serverSessionData) return undefined
+    if (!serverSessionData.oauthSessionId) {
+      console.warn('[oauth session store] No oauthSessionId found in session data')
+      return undefined
+    }
+
+    let session = await this.storage.getItem<NodeSavedSession>(
+      this.createStorageKey(key, serverSessionData.oauthSessionId),
+    )
+    return session ?? undefined
+  }
+
+  async set(key: string, val: NodeSavedSession) {
+    const serverSessionData = this.serverSession.data
+    let sessionId
+    if (!serverSessionData?.oauthSessionId) {
+      sessionId = crypto.randomUUID()
+      await this.serverSession.update({
+        oauthSessionId: sessionId,
       })
+    } else {
+      sessionId = serverSessionData.oauthSessionId
+    }
+    try {
+      await this.storage.setItem<NodeSavedSession>(this.createStorageKey(key, sessionId), val)
     } catch (error) {
       // Not sure if this has been happening. But helps with debugging
       console.error(
@@ -31,9 +52,16 @@ export class OAuthSessionStore implements NodeSavedSessionStore {
     }
   }
 
-  async del() {
-    await this.session.update({
-      oauthSession: undefined,
+  async del(key: string) {
+    const serverSessionData = this.serverSession.data
+    if (!serverSessionData) return undefined
+    if (!serverSessionData.oauthSessionId) {
+      console.warn('[oauth session store] No oauthSessionId found in session data')
+      return undefined
+    }
+    await this.storage.removeItem(this.createStorageKey(key, serverSessionData.oauthSessionId))
+    await this.serverSession.update({
+      oauthSessionId: undefined,
     })
   }
 }

server/utils/atproto/oauth-state-store.ts

@@ -1,30 +1,45 @@
 import type { NodeSavedState, NodeSavedStateStore } from '@atproto/oauth-client-node'
 import type { UserServerSession } from '#shared/types/userSession'
 import type { SessionManager } from 'h3'
+import { OAUTH_CACHE_STORAGE_BASE } from '#server/utils/atproto/storage'
 
 export class OAuthStateStore implements NodeSavedStateStore {
-  private readonly session: SessionManager<UserServerSession>
+  private readonly serverSession: SessionManager<UserServerSession>
+  private readonly storage = useStorage(OAUTH_CACHE_STORAGE_BASE)
 
   constructor(session: SessionManager<UserServerSession>) {
-    this.session = session
+    this.serverSession = session
   }
 
-  async get(): Promise<NodeSavedState | undefined> {
-    const sessionData = this.session.data
-    if (!sessionData) return undefined
-    return sessionData.oauthState
+  private createStorageKey(did: string, sessionId: string) {
+    return `state:${did}:${sessionId}`
   }
 
-  async set(_key: string, val: NodeSavedState) {
-    // We are ignoring the key since the mapping is already done in the session
-    await this.session.update({
-      oauthState: val,
+  async get(key: string): Promise<NodeSavedState | undefined> {
+    const serverSessionData = this.serverSession.data
+    if (!serverSessionData) return undefined
+    if (!serverSessionData.oauthStateId) return undefined
+    const state = await this.storage.getItem<NodeSavedState>(
+      this.createStorageKey(key, serverSessionData.oauthStateId),
+    )
+    return state ?? undefined
+  }
+
+  async set(key: string, val: NodeSavedState) {
+    let stateId = crypto.randomUUID()
+    await this.serverSession.update({
+      oauthStateId: stateId,
     })
+    await this.storage.setItem<NodeSavedState>(this.createStorageKey(key, stateId), val)
   }
 
-  async del() {
-    await this.session.update({
-      oauthState: undefined,
+  async del(key: string) {
+    const serverSessionData = this.serverSession.data
+    if (!serverSessionData) return undefined
+    if (!serverSessionData.oauthStateId) return undefined
+    await this.storage.removeItem(this.createStorageKey(key, serverSessionData.oauthStateId))
+    await this.serverSession.update({
+      oauthStateId: undefined,
     })
   }
 }