working atproto auth w/o nuxt-auth-utils

Author: zeucapua

app/components/AppHeader.vue

@@ -54,6 +54,10 @@ withDefaults(
             <span class="hidden sm:inline">github</span>
           </a>
         </li>
+
+        <li>
+          <AuthButton />
+        </li>
       </ul>
     </nav>
   </header>

app/components/AuthButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const showModal = ref(false)
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      type="button"
+      class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      :aria-label="ariaLabel"
+      @click="showModal = true"
+    >
+      Login
+    </button>
+
+    <AuthModal v-model:open="showModal" />
+  </div>
+</template>

app/components/AuthModal.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+const open = defineModel<boolean>('open', { default: false })
+
+const handleInput = ref('')
+
+async function handleLogin() {
+  if (handleInput.value) {
+    await navigateTo(
+      {
+        path: '/api/auth/atproto',
+        query: { handle: handleInput.value },
+      },
+      { external: true },
+    )
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <!-- Backdrop -->
+        <button
+          type="button"
+          class="absolute inset-0 bg-black/60 cursor-default"
+          aria-label="Close modal"
+          @click="open = false"
+        />
+
+        <!-- Modal -->
+        <div
+          class="relative w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="auth-modal-title"
+        >
+          <div class="p-6">
+            <div class="flex items-center justify-between mb-6">
+              <h2 id="auth-modal-title" class="font-mono text-lg font-medium">Account Login</h2>
+              <button
+                type="button"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                aria-label="Close"
+                @click="open = false"
+              >
+                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+              </button>
+            </div>
+
+            <!-- Disconnected state -->
+            <form 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">
+                <div>
+                  <label
+                    for="handle-input"
+                    class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
+                  >
+                    Internet Handle
+                  </label>
+                  <input
+                    id="handle-input"
+                    v-model="handleInput"
+                    type="text"
+                    name="handle"
+                    placeholder="alice.bsky.social"
+                    autocomplete="off"
+                    spellcheck="false"
+                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                  />
+                </div>
+
+                <details class="text-sm">
+                  <summary
+                    class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+                  >
+                    What is an Atmosphere account?
+                  </summary>
+                  <div class="mt-3">
+                    <p>TODO</p>
+                  </div>
+                </details>
+              </div>
+
+              <button
+                type="submit"
+                :disabled="!handleInput.trim()"
+                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"
+              >
+                Login
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

nuxt.config.ts

@@ -18,6 +18,9 @@ export default defineNuxtConfig({
   ],
 
   devtools: { enabled: true },
+  devServer: {
+    host: '127.0.0.1',
+  },
 
   app: {
     head: {

package.json

@@ -26,6 +26,8 @@
     "test:unit": "vitest --project unit"
   },
   "dependencies": {
+    "@atproto/api": "^0.18.17",
+    "@atproto/oauth-client-node": "^0.3.15",
     "@iconify-json/simple-icons": "^1.2.67",
     "@iconify-json/vscode-icons": "^1.2.40",
     "@nuxt/a11y": "1.0.0-alpha.1",