Add email verification area with OTP field

src/pages/api/auth/confirm.ts

@@ -0,0 +1,20 @@
+import type { APIRoute } from "astro"
+import { supabase } from "@library/supabase"
+
+export const POST: APIRoute = async ({ request, redirect }) => {
+    const formData = await request.formData()
+    const EMAIL = formData.get("email")?.toString()
+    const OTP = formData.get("code")?.toString()
+
+    if (!OTP) {
+        return new Response("Code required", { status: 400 })
+    }
+
+    const { error } = await supabase.auth.verifyOtp({type: 'email', token: OTP, email: EMAIL})
+
+    if (error) {
+        return new Response(error.message, { status: 500 })
+    }
+
+    return redirect("/?=welcome")
+}

src/pages/api/auth/register.ts

@@ -15,6 +15,7 @@ export const POST: APIRoute = async ({ request, redirect }) => {
   // https://supabase.com/docs/reference/javascript/auth-signup?example=sign-up-with-additional-user-metadata
   const { error } = await supabase.auth.signUp({
     options: {
+      emailRedirectTo: "http://localhost:4321/?=welcome",
       data: {
         full_name: name,
         avatar_url: avatar_url,
@@ -32,5 +33,5 @@ export const POST: APIRoute = async ({ request, redirect }) => {
     return new Response(error.message, { status: 500 })
   }
 
-  return redirect("/")
+  return redirect("/email-confirm")
 }

src/pages/email-confirm.astro

@@ -0,0 +1,20 @@
+---
+import Base from "@layouts/Base.astro"
+---
+
+<Base Title="Account">
+    <div class="content">
+        <form action="/api/auth/confirm" method="post">
+            <p>Confimration Code</p>
+            <div class="form-field">
+                <label style="font-size: 12px;" for="password">Email</label>
+                <input id="email" type="email" name="email" required />
+            </div>
+            <div class="form-field">
+                <label style="font-size: 12px;" for="password">Code</label>
+                <input id="code" type="number" name="code" required />
+            </div>
+            <button type="submit">Confirm</button>
+        </form>
+    </div>
+</Base>