refactor: moved the oauth to useSession (#867)

Co-authored-by: Daniel Roe <[e-mail]>

app/composables/useAtproto.ts

···
-import type { UserSession } from '#shared/schemas/userSession'
-
 export function useAtproto() {
   const {
     data: user,
     pending,
     clear,
-  } = useFetch<UserSession | null>('/api/auth/session', {
+  } = useFetch('/api/auth/session', {
     server: false,
     immediate: !import.meta.test,
   })

modules/cache.ts

···
         ...nitroConfig.storage[FETCH_CACHE_STORAGE_BASE],
         driver: 'vercel-runtime-cache',
       }
-
-      const env = process.env.VERCEL_ENV
-
-      nitroConfig.storage['oauth-atproto-state'] = {
-        driver: env === 'production' ? 'vercel-kv' : 'vercel-runtime-cache',
-      }
-
-      nitroConfig.storage['oauth-atproto-session'] = {
-        driver: env === 'production' ? 'vercel-kv' : 'vercel-runtime-cache',
-      }
     })
   },
 })

nuxt.config.ts

···
         driver: 'fsLite',
         base: './.cache/fetch',
       },
-      'oauth-atproto-state': {
-        driver: 'fsLite',
-        base: './.cache/atproto-oauth/state',
-      },
-      'oauth-atproto-session': {
-        driver: 'fsLite',
-        base: './.cache/atproto-oauth/session',
-      },
     },
     typescript: {
       tsConfig: {

server/api/auth/atproto.get.ts

···
 import { createError, getQuery, sendRedirect } from 'h3'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
 import { SLINGSHOT_HOST } from '#shared/utils/constants'
-import type { UserSession } from '#shared/schemas/userSession'
+import { useServerSession } from '#server/utils/server-session'
+import type { PublicUserSession } from '#shared/schemas/publicUserSession'
 
 export default defineEventHandler(async event => {
   const config = useRuntimeConfig(event)
···
 
   const query = getQuery(event)
   const clientMetadata = getOauthClientMetadata()
-  const { stateStore, sessionStore } = useOAuthStorage(event)
+  const session = await useServerSession(event)
+  const { stateStore, sessionStore } = useOAuthStorage(session)
 
   const atclient = new NodeOAuthClient({
     stateStore,
···
   const agent = new Agent(authSession)
   event.context.agent = agent
 
-  const session = await useSession(event, {
-    password: config.sessionPassword,
-  })
-
   const response = await fetch(
     `https://${SLINGSHOT_HOST}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${agent.did}`,
     { headers: { 'User-Agent': 'npmx' } },
   )
-  const miniDoc = (await response.json()) as UserSession
-
-  await session.update(miniDoc)
+  if (response.ok) {
+    const miniDoc: PublicUserSession = await response.json()
+    await session.update({
+      public: miniDoc,
+    })
+  }
 
   return sendRedirect(event, '/')
 })

server/api/auth/session.delete.ts

···
 export default eventHandlerWithOAuthSession(async (event, oAuthSession, serverSession) => {
-  await Promise.all([oAuthSession?.signOut(), serverSession.clear()])
-
+  // Even tho the signOut also clears part of the server cache should be done in order
+  // to let the oAuth package do any other clean up it may need
+  await oAuthSession?.signOut()
+  await serverSession.clear()
   return 'Session cleared'
 })

server/api/auth/session.get.ts

···
-import { UserSessionSchema } from '#shared/schemas/userSession'
+import { PublicUserSessionSchema } from '#shared/schemas/publicUserSession'
 import { safeParse } from 'valibot'
 
 export default eventHandlerWithOAuthSession(async (event, oAuthSession, serverSession) => {
-  const result = safeParse(UserSessionSchema, serverSession.data)
+  const result = safeParse(PublicUserSessionSchema, serverSession.data.public)
   if (!result.success) {
     return null
   }

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

···
 import type { NodeSavedSession, NodeSavedSessionStore } from '@atproto/oauth-client-node'
-import type { H3Event } from 'h3'
-
-/**
- * Storage key prefix for oauth session storage.
- */
-export const OAUTH_SESSION_CACHE_STORAGE_BASE = 'oauth-atproto-session'
+import type { UserServerSession } from '#shared/types/userSession'
+import type { SessionManager } from 'h3'
 
 export class OAuthSessionStore implements NodeSavedSessionStore {
-  // TODO: not sure if we will support multi accounts, but if we do in the future will need to change this around
-  private readonly cookieKey = 'oauth:atproto:session'
-  private readonly storage = useStorage(OAUTH_SESSION_CACHE_STORAGE_BASE)
+  private readonly session: SessionManager<UserServerSession>
 
-  constructor(private event: H3Event) {}
+  constructor(session: SessionManager<UserServerSession>) {
+    this.session = session
+  }
 
   async get(): Promise<NodeSavedSession | undefined> {
-    const sessionKey = getCookie(this.event, this.cookieKey)
-    if (!sessionKey) return
-    const result = await this.storage.getItem<NodeSavedSession>(sessionKey)
-    if (!result) return
-    return result
+    const sessionData = this.session.data
+    if (!sessionData) return undefined
+    return sessionData.oauthSession
   }
 
-  async set(key: string, val: NodeSavedSession) {
-    setCookie(this.event, this.cookieKey, key, {
-      httpOnly: true,
-      secure: !import.meta.dev,
-      sameSite: 'lax',
+  async set(_key: string, val: NodeSavedSession) {
+    // We are ignoring the key since the mapping is already done in the session
+    await this.session.update({
+      oauthSession: val,
     })
-    await this.storage.setItem<NodeSavedSession>(key, val)
   }
 
   async del() {
-    const sessionKey = getCookie(this.event, this.cookieKey)
-    if (sessionKey) {
-      await this.storage.del(sessionKey)
-    }
-    deleteCookie(this.event, this.cookieKey)
+    await this.session.update({
+      oauthSession: undefined,
+    })
   }
 }

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

···
 import type { NodeSavedState, NodeSavedStateStore } from '@atproto/oauth-client-node'
-import type { H3Event } from 'h3'
-
-/**
- * Storage key prefix for oauth state storage.
- */
-export const OAUTH_STATE_CACHE_STORAGE_BASE = 'oauth-atproto-state'
+import type { UserServerSession } from '#shared/types/userSession'
+import type { SessionManager } from 'h3'
 
 export class OAuthStateStore implements NodeSavedStateStore {
-  private readonly cookieKey = 'oauth:atproto:state'
-  private readonly storage = useStorage(OAUTH_STATE_CACHE_STORAGE_BASE)
+  private readonly session: SessionManager<UserServerSession>
 
-  constructor(private event: H3Event) {}
+  constructor(session: SessionManager<UserServerSession>) {
+    this.session = session
+  }
 
   async get(): Promise<NodeSavedState | undefined> {
-    const stateKey = getCookie(this.event, this.cookieKey)
-    if (!stateKey) return
-    const result = await this.storage.getItem<NodeSavedState>(stateKey)
-    if (!result) return
-    return result
+    const sessionData = this.session.data
+    if (!sessionData) return undefined
+    return sessionData.oauthState
   }
 
-  async set(key: string, val: NodeSavedState) {
-    setCookie(this.event, this.cookieKey, key, {
-      httpOnly: true,
-      secure: !import.meta.dev,
-      sameSite: 'lax',
+  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,
     })
-    await this.storage.setItem<NodeSavedState>(key, val)
   }
 
   async del() {
-    const stateKey = getCookie(this.event, this.cookieKey)
-    deleteCookie(this.event, this.cookieKey)
-    if (stateKey) {
-      await this.storage.del(stateKey)
-    }
+    await this.session.update({
+      oauthState: undefined,
+    })
   }
 }

server/utils/atproto/oauth.ts

···
 import { parse } from 'valibot'
 import { getOAuthLock } from '#server/utils/atproto/lock'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
-import { UNSET_NUXT_SESSION_PASSWORD } from '#shared/utils/constants'
 import { OAuthMetadataSchema } from '#shared/schemas/oauth'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
+import { useServerSession } from '#server/utils/server-session'
 // TODO: limit scope as features gets added. atproto just allows login so no scary login screen till we have scopes
 export const scope = 'atproto'
 
···
 
 async function getOAuthSession(event: H3Event): Promise<OAuthSession | undefined> {
   const clientMetadata = getOauthClientMetadata()
-  const { stateStore, sessionStore } = useOAuthStorage(event)
+  const serverSession = await useServerSession(event)
+  const { stateStore, sessionStore } = useOAuthStorage(serverSession)
 
   const client = new NodeOAuthClient({
     stateStore,
···
   handler: EventHandlerWithOAuthSession<T, D>,
 ) {
   return defineEventHandler(async event => {
-    const config = useRuntimeConfig(event)
-
-    if (!config.sessionPassword) {
-      throw createError({
-        status: 500,
-        message: UNSET_NUXT_SESSION_PASSWORD,
-      })
-    }
-
-    const serverSession = await useSession(event, {
-      password: config.sessionPassword,
-    })
+    const serverSession = await useServerSession(event)
 
     const oAuthSession = await getOAuthSession(event)
     return await handler(event, oAuthSession, serverSession)

server/utils/atproto/storage.ts

···
-import type { H3Event } from 'h3'
+import type { SessionManager } from 'h3'
 import { OAuthStateStore } from './oauth-state-store'
 import { OAuthSessionStore } from './oauth-session-store'
+import type { UserServerSession } from '#shared/types/userSession'
 
-export const useOAuthStorage = (event: H3Event) => {
+export const useOAuthStorage = (session: SessionManager<UserServerSession>) => {
   return {
-    stateStore: new OAuthStateStore(event),
-    sessionStore: new OAuthSessionStore(event),
+    stateStore: new OAuthStateStore(session),
+    sessionStore: new OAuthSessionStore(session),
   }
 }

server/utils/server-session.ts

···
+// This is for getting the session on the npmx server and differs from the OAuthSession
+import type { H3Event } from 'h3'
+import type { UserServerSession } from '#shared/types/userSession'
+
+/**
+ * Get's the user's session that is stored on the server
+ * @param event
+ * @returns
+ */
+export const useServerSession = async (event: H3Event) => {
+  const config = useRuntimeConfig(event)
+
+  if (!config.sessionPassword) {
+    throw new Error('Session password is not configured')
+  }
+
+  const serverSession = useSession<UserServerSession>(event, {
+    password: config.sessionPassword,
+  })
+
+  return serverSession
+}

shared/schemas/publicUserSession.ts

···
+import { object, string, pipe, url } from 'valibot'
+import type { InferOutput } from 'valibot'
+
+export const PublicUserSessionSchema = object({
+  // Safe to pass to the frontend
+  did: string(),
+  handle: string(),
+  pds: pipe(string(), url()),
+})
+
+export type PublicUserSession = InferOutput<typeof PublicUserSessionSchema>

shared/schemas/userSession.ts

···
-import { object, string, pipe, url } from 'valibot'
-import type { InferOutput } from 'valibot'
-
-export const UserSessionSchema = object({
-  did: string(),
-  handle: string(),
-  pds: pipe(string(), url()),
-})
-
-export type UserSession = InferOutput<typeof UserSessionSchema>

shared/types/userSession.ts

···
+import type { NodeSavedSession, NodeSavedState } from '@atproto/oauth-client-node'
+
+export interface UserServerSession {
+  public: {
+    did: string
+    handle: string
+    pds: string
+  }
+  // Only to be used in the atproto session and state stores
+  // Will need to change to Record<string, T> and add a current logged in user if we ever want to support
+  // multiple did logins per server session
+  oauthSession: NodeSavedSession | undefined
+  oauthState: NodeSavedState | undefined
+}