Add email verification area with OTP field

This commit is contained in:
Korbs 2024-07-17 03:19:00 -04:00
parent c6e948f5aa
commit 9d3cc8badb
3 changed files with 42 additions and 1 deletions

View file

@ -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")
}

View file

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

View file

@ -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>