feat(auth): implement atproto password reset flow

Author: pauliecodes

app/pages/account/settings.vue

@@ -1,5 +1,73 @@
 <script setup lang="ts">
 const { user } = useAtproto()
+
+const isResetting = ref(false)
+const resetEmail = ref('')
+const isCodeSent = ref(false)
+const resetToken = ref('')
+const newPassword = ref('')
+const isConfirming = ref(false)
+
+const errorMessage = ref('')
+const successMessage = ref('')
+
+async function handlePasswordReset() {
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  if (!resetEmail.value) {
+    errorMessage.value = 'Please enter your email first.'
+    return
+  }
+
+  isResetting.value = true
+  try {
+    await $fetch('/api/atproto/password-reset', {
+      method: 'POST',
+      body: { email: resetEmail.value },
+    })
+
+    isCodeSent.value = true
+    successMessage.value = 'Code sent! Check your email.'
+  } catch (e: any) {
+    errorMessage.value = e.statusMessage || 'Something went wrong. Please try again.'
+  } finally {
+    isResetting.value = false
+  }
+}
+
+async function handleConfirmReset() {
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  if (!resetToken.value || !newPassword.value) {
+    errorMessage.value = 'Please enter both the code and your new password.'
+    return
+  }
+
+  isConfirming.value = true
+  try {
+    await $fetch('/api/atproto/password-reset-confirm', {
+      method: 'POST',
+      body: {
+        token: resetToken.value,
+        password: newPassword.value,
+      },
+    })
+
+    successMessage.value = 'Password updated successfully!'
+
+    // Reset the form
+    isCodeSent.value = false
+    resetToken.value = ''
+    newPassword.value = ''
+    resetEmail.value = ''
+  } catch (e: any) {
+    errorMessage.value = e.statusMessage || 'Failed to update password. Check your code.'
+  } finally {
+    isConfirming.value = false
+  }
+}
 </script>
 
 <template>
@@ -42,23 +110,63 @@ const { user } = useAtproto()
       >
         <div>
           <h2 class="font-mono text-xl mb-1">Email Address</h2>
-          <p class="text-sm text-fg-muted">Update the email address used for account recovery.</p>
+          <p class="text-sm text-fg-muted">Update the email address of your account.</p>
         </div>
         <ButtonBase variant="secondary">Request Email Change</ButtonBase>
       </section>
 
       <section
-        class="p-6 bg-bg-subtle border border-border rounded-lg flex flex-col sm:flex-row sm:items-center justify-between gap-4"
+        class="flex flex-col gap-2 max-w-sm p-4 border border-border rounded-lg bg-bg-subtle"
       >
-        <div>
-          <h2 class="font-mono text-xl mb-1">Password Reset</h2>
-          <p class="text-sm text-fg-muted">
-            Send a secure password reset link to your registered email.
+        <h3 class="font-mono text-lg text-fg">Reset Password</h3>
+
+        <p v-if="errorMessage" class="text-sm text-red-500 mb-2">{{ errorMessage }}</p>
+        <p v-if="successMessage" class="text-sm text-green-500 mb-2">{{ successMessage }}</p>
+
+        <div v-if="!isCodeSent">
+          <p class="text-sm text-fg-muted mb-2">
+            Enter your atmosphere email to receive a reset link.
           </p>
+          <input
+            v-model="resetEmail"
+            type="email"
+            placeholder="you@example.com"
+            class="w-full bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus:border-accent outline-none mb-2"
+          />
+          <ButtonBase
+            variant="secondary"
+            class="text-red-500 mt-2"
+            :disabled="isResetting || !resetEmail"
+            @click="handlePasswordReset"
+          >
+            {{ isResetting ? 'Sending...' : 'Send Reset Code' }}
+          </ButtonBase>
+        </div>
+
+        <div v-else class="flex flex-col gap-2">
+          <input
+            v-model="resetToken"
+            type="text"
+            placeholder="Reset Code (e.g. ABC-DEF)"
+            class="w-full bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus:border-accent outline-none"
+          />
+
+          <input
+            v-model="newPassword"
+            type="password"
+            placeholder="New Password"
+            class="w-full bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus:border-accent outline-none"
+          />
+
+          <ButtonBase
+            variant="secondary"
+            class="text-red-500 mt-2"
+            :disabled="isConfirming || !resetToken || !newPassword"
+            @click="handleConfirmReset"
+          >
+            {{ isConfirming ? 'Saving...' : 'Save New Password' }}
+          </ButtonBase>
         </div>
-        <ButtonBase variant="secondary" class="text-red-500 hover:bg-red-500/10 border-red-500/20">
-          Reset Password
-        </ButtonBase>
       </section>
     </div>
   </main>

app/pages/profile/[identity]/index.vue

@@ -161,7 +161,7 @@ defineOgImageComponent('Default', {
             {{ profile.displayName }}
           </h1>
           <LinkBase
-            v-if="user?.handle === handle"
+            v-if="user?.handle === profile?.handle"
             to="/account/settings"
             variant="button-secondary"
             classicon="i-lucide:settings"

server/api/atproto/password-reset-confirm.post.ts

@@ -0,0 +1,28 @@
+import { Agent } from '@atproto/api'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  if (!oAuthSession) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  const body = await readBody(event)
+  if (!body || !body.token || !body.password) {
+    throw createError({ statusCode: 400, statusMessage: 'Token and new password are required' })
+  }
+
+  const agent = new Agent(oAuthSession)
+
+  try {
+    await agent.com.atproto.server.resetPassword({
+      token: body.token.trim(),
+      password: body.password,
+    })
+
+    return { success: true }
+  } catch (err: any) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: err.message || 'Failed to update password. Check your code.',
+    })
+  }
+})

server/api/atproto/password-reset.post.ts

@@ -0,0 +1,27 @@
+import { Agent } from '@atproto/api'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  if (!oAuthSession) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  const body = await readBody(event)
+  if (!body || !body.email) {
+    throw createError({ statusCode: 400, statusMessage: 'Email is required' })
+  }
+
+  const agent = new Agent(oAuthSession)
+
+  try {
+    await agent.com.atproto.server.requestPasswordReset({
+      email: body.email,
+    })
+
+    return { success: true }
+  } catch (err: any) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: err.message || 'Failed to request password reset.',
+    })
+  }
+})