working atproto oauth login and logout

Author: zeucapua

app/components/AppHeader.vue

@@ -137,22 +137,15 @@ onKeyStroke(',', e => {
             class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
             aria-hidden="true"
           >
-            <span class="i-carbon-logo-github w-4 h-4" />
-            <span class="hidden sm:inline">github</span>
-          </a>
-        </li>
-
-        <li>
-          <AuthButton />
-        </li>
-      </ul>
             ,
           </kbd>
         </NuxtLink>
 
         <div v-if="showConnector" class="hidden sm:block">
           <ConnectorStatus />
         </div>
+
+        <AuthButton />
       </div>
     </nav>
   </header>

app/components/AuthButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const showModal = ref(false)
+const { user } = await useAtproto()
 </script>
 
 <template>
@@ -10,7 +11,7 @@ const showModal = ref(false)
       :aria-label="ariaLabel"
       @click="showModal = true"
     >
-      Login
+      {{ user?.miniDoc?.handle || 'Login' }}
     </button>
 
     <AuthModal v-model:open="showModal" />

app/components/AuthModal.vue

@@ -3,6 +3,8 @@ const open = defineModel<boolean>('open', { default: false })
 
 const handleInput = ref('')
 
+const { user, logout } = await useAtproto()
+
 async function handleLogin() {
   if (handleInput.value) {
     await navigateTo(
@@ -53,8 +55,25 @@ async function handleLogin() {
               </button>
             </div>
 
+            <div v-if="user?.miniDoc?.handle" class="space-y-4">
+              <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
+                <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
+                <div>
+                  <p class="font-mono text-xs text-fg-muted">
+                    Logged in as @{{ user.miniDoc.handle }}
+                  </p>
+                </div>
+                <button
+                  @click="logout"
+                  class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+                >
+                  Logout
+                </button>
+              </div>
+            </div>
+
             <!-- Disconnected state -->
-            <form class="space-y-4" @submit.prevent="handleLogin">
+            <form v-else class="space-y-4" @submit.prevent="handleLogin">
               <p class="text-sm text-fg-muted">Login with your Atmosphere account</p>
 
               <div class="space-y-3">

app/composables/useAtproto.ts

@@ -0,0 +1,30 @@
+type MiniDoc = {
+  did: string
+  handle: string
+  pds: string
+}
+
+export async function useAtproto() {
+  const {
+    data: user,
+    pending,
+    clear,
+  } = await useAsyncData<MiniDoc | null>('user-state', async () => {
+    const data = await useRequestFetch()<MiniDoc>('/api/auth/session', {
+      headers: { accept: 'application/json' },
+    })
+
+    return data
+  })
+
+  const logout = async () => {
+    await useRequestFetch()<MiniDoc>('/api/auth/session', {
+      method: 'delete',
+      headers: { accept: 'application/json' },
+    })
+
+    clear()
+  }
+
+  return { user, pending, logout }
+}

pnpm-lock.yaml

@@ -35,10 +35,27 @@ export default defineEventHandler(async event => {
     return sendRedirect(event, redirectUrl.toString())
   }
 
-  const { session } = await atclient.callback(new URLSearchParams(query as Record<string, string>))
-  const agent = new Agent(session)
+  const { session: authSession } = await atclient.callback(
+    new URLSearchParams(query as Record<string, string>),
+  )
+  const agent = new Agent(authSession)
   event.context.agent = agent
-  console.log(agent.did)
+
+  const session = await useSession(event, {
+    password: process.env.NUXT_SESSION_PASSWORD as string,
+  })
+
+  const response = await fetch(
+    `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${agent.did}`,
+  )
+  const miniDoc = (await response.json()) as { did: string; handle: string; pds: string }
+
+  await session.update({
+    miniDoc,
+  })
+
+  await sessionStore.del()
+
   return sendRedirect(event, '/')
 })
 

server/api/auth/atproto.get.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async event => {
+  const session = await useSession(event, {
+    password: process.env.NUXT_SESSION_PASSWORD as string,
+  })
+
+  await session.clear()
+
+  return 'Session cleared'
+})

server/api/auth/session.delete.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async event => {
+  const session = await useSession(event, {
+    password: process.env.NUXT_SESSION_PASSWORD as string,
+  })
+
+  return session.data
+})

server/api/auth/session.get.ts

@@ -1,12 +1,12 @@
-import { OAuthClientMetadataInput } from '@atproto/oauth-client-node'
+import type { OAuthClientMetadataInput } from '@atproto/oauth-client-node'
 
 // TODO: limit scope as features gets added
 export const scope = 'atproto transition:generic'
 
 export function getOauthClientMetadata() {
   const dev = import.meta.dev
 
-  // TODO: CHECK - on dev, match in nuxt.config.ts devServer: { host: "127.0.0.1" }
+  // on dev, match in nuxt.config.ts devServer: { host: "127.0.0.1" }
   const client_uri = dev ? `http://127.0.0.1:3000` : 'https://npmx.dev'
   const redirect_uri = `${client_uri}/api/auth/atproto`