feat: oauth server side and confidential 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

@@ -37,6 +37,7 @@ export default defineNuxtConfig({
     github: {
       orgToken: '',
     },
+    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 || '',
@@ -122,6 +123,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

@@ -34,6 +34,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,7 @@ 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,
-  })
 
   if (query.handle) {
     // Initiate auth flow
@@ -66,10 +53,13 @@ export default defineEventHandler(async event => {
     }
 
     try {
-      const redirectUrl = await atclient.authorize(query.handle, {
+      const redirectUrl = await event.context.oauthClient.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 }),
       })
 
@@ -87,7 +77,7 @@ export default defineEventHandler(async event => {
     // Handle callback
     try {
       const params = new URLSearchParams(query as Record<string, string>)
-      const result = await atclient.callback(params)
+      const result = await event.context.oauthClient.callback(params)
       try {
         const state = decodeOAuthState(event, result.state)
         const profile = await getMiniProfile(result.session)

server/api/auth/session.get.ts

@@ -1,12 +1,23 @@
 import { PublicUserSessionSchema } from '#shared/schemas/publicUserSession'
 import { safeParse } from 'valibot'
 
-export default defineEventHandler(async event => {
-  const serverSession = await useServerSession(event)
+export default eventHandlerWithOAuthSession(async (event, _, serverSession) => {
   const result = safeParse(PublicUserSessionSchema, serverSession.data.public)
   if (!result.success) {
     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/plugins/oauth-client.ts

@@ -0,0 +1,20 @@
+import type { NodeOAuthClient } from '@atproto/oauth-client-node'
+
+/**
+ * Creates a long living instance of the NodeOAuthClient.
+ */
+export default defineNitroPlugin(async nitroApp => {
+  const oauthClient = await getNodeOAuthClient()
+
+  // Attach to event context for access in composables via useRequestEvent()
+  nitroApp.hooks.hook('request', event => {
+    event.context.oauthClient = oauthClient
+  })
+})
+
+// Extend the H3EventContext type
+declare module 'h3' {
+  interface H3EventContext {
+    oauthClient: NodeOAuthClient
+  }
+}

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

@@ -0,0 +1,11 @@
+import { loadJWKs } from '#server/utils/atproto/oauth'
+
+export default defineEventHandler(async _ => {
+  const keys = await loadJWKs()
+  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,5 @@
-export default defineEventHandler(() => {
-  return getOauthClientMetadata()
+export default defineEventHandler(async _ => {
+  const keyset = await loadJWKs()
+  const pk = keyset?.findPrivateKey({ usage: 'sign' })
+  return getOauthClientMetadata(pk?.alg)
 })

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

@@ -1,39 +1,32 @@
 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'
+
+// Refresh tokens from a confidential client should last for 180 days, each new refresh of access token resets
+// the expiration with the new refresh token. Shorting to 179 days to keep it a bit simpler since we rely on redis to clear sessions
+// Note: This expiration only lasts this long in production. Local dev is 2 weeks
+const SESSION_EXPIRATION = CACHE_MAX_AGE_ONE_DAY * 179
 
 export class OAuthSessionStore implements NodeSavedSessionStore {
-  private readonly session: SessionManager<UserServerSession>
+  private readonly cache: CacheAdapter
+
+  constructor() {
+    this.cache = getCacheAdapter(OAUTH_CACHE_STORAGE_BASE)
+  }
 
-  constructor(session: SessionManager<UserServerSession>) {
-    this.session = session
+  private createStorageKey(did: string) {
+    return `sessions:${did}`
   }
 
-  async get(): Promise<NodeSavedSession | undefined> {
-    const sessionData = this.session.data
-    if (!sessionData) return undefined
-    return sessionData.oauthSession
+  async get(key: string): Promise<NodeSavedSession | undefined> {
+    let session = await this.cache.get<NodeSavedSession>(this.createStorageKey(key))
+    return session ?? undefined
   }
 
-  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,
-      })
-    } catch (error) {
-      // Not sure if this has been happening. But helps with debugging
-      console.error(
-        '[oauth session store] Failed to set session:',
-        error instanceof Error ? error.message : 'Unknown error',
-      )
-      throw error
-    }
+  async set(key: string, val: NodeSavedSession) {
+    await this.cache.set<NodeSavedSession>(this.createStorageKey(key), val, SESSION_EXPIRATION)
   }
 
-  async del() {
-    await this.session.update({
-      oauthSession: undefined,
-    })
+  async del(key: string) {
+    await this.cache.delete(this.createStorageKey(key))
   }
 }

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

@@ -1,30 +1,30 @@
 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 './storage'
+
+// It is recommended that oauth state is only saved for 30 minutes
+const STATE_EXPIRATION = CACHE_MAX_AGE_ONE_MINUTE * 30
 
 export class OAuthStateStore implements NodeSavedStateStore {
-  private readonly session: SessionManager<UserServerSession>
+  private readonly cache: CacheAdapter
+
+  constructor() {
+    this.cache = getCacheAdapter(OAUTH_CACHE_STORAGE_BASE)
+  }
 
-  constructor(session: SessionManager<UserServerSession>) {
-    this.session = session
+  private createStorageKey(key: string) {
+    return `state:${key}`
   }
 
-  async get(): Promise<NodeSavedState | undefined> {
-    const sessionData = this.session.data
-    if (!sessionData) return undefined
-    return sessionData.oauthState
+  async get(key: string): Promise<NodeSavedState | undefined> {
+    const state = await this.cache.get<NodeSavedState>(this.createStorageKey(key))
+    return state ?? undefined
   }
 
-  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 set(key: string, val: NodeSavedState) {
+    await this.cache.set<NodeSavedState>(this.createStorageKey(key), val, STATE_EXPIRATION)
   }
 
-  async del() {
-    await this.session.update({
-      oauthState: undefined,
-    })
+  async del(key: string) {
+    await this.cache.delete(this.createStorageKey(key))
   }
 }