feat: phone login via otp

src/routes/auth/+page.server.ts

@@ -31,7 +31,7 @@ export const actions = {
     else
       return { message: 'Please check your email to confirm your signup.' }
   },
-  signin: async ({ request, locals: { supabase } }) => {
+  signin_email: async ({ request, locals: { supabase } }) => {
     const formData = await request.formData()
     const email = formData.get('email') as string
     const password = formData.get('password') as string
@@ -53,6 +53,26 @@ export const actions = {
     /* Login successful, redirect. */
     redirect(303, '/app')
   },
+  signin_otp: async ({ request, locals: { supabase }}) => {
+    const formData = await request.formData()
+    const phone = formData.get('phone') as string
+
+    if (!phone) {
+      return Fail(
+        { message: 'Please enter a phone number.' }
+      )
+    }
+
+    const { error } = await supabase.auth.signInWithOtp({
+      phone,
+    })
+
+    if (error)
+      return Fail({ message: error.message, phone })
+
+    return { message: 'Please check your phone for the code.' , verify: true, phone }
+
+  },
   oauth: async ({ request, url, locals: { supabase }}) => {
     const formData = await request.formData()
     const provider = formData.get('provider') as Provider
@@ -116,5 +136,26 @@ export const actions = {
   signout: async ({ locals: { supabase } }) => {
     await supabase.auth.signOut()
     redirect(303, '/')
+  },
+  verify_otp: async ({ request, locals: { supabase } }) => {
+    const formData = await request.formData()
+    const otp = formData.get('otp') as string
+    const phone = formData.get('phone') as string
+
+    if (!otp) {
+      return Fail(
+        { message: 'Please enter an OTP.', verify: true, phone }
+      )
+    }
+
+    const { error } = await supabase.auth.verifyOtp({
+      phone,
+      type: 'sms',
+      token: otp,
+      options: { redirectTo: 'http://localhost:5173/app' }
+    })
+
+    if (error)
+      return Fail({ message: error.message, verify: true, phone })
   }
 }

src/routes/auth/+page.svelte

@@ -2,7 +2,7 @@
   export let form
 </script>
 
-<form method="POST" action="?/signin">
+<form method="POST" action="?/signin_email">
   <input name="email" placeholder="email" type="email" value={form?.data?.email ?? ""}>
   <input name="password" placeholder="password" type="password">
   <button style="margin-top: 12px;">Login</button>
@@ -15,6 +15,10 @@
   <input name="email" placeholder="email" type="email">
   <button style="margin-top: 12px;">Login with magic link</button>
 </form>
+<form method="POST" action="?/signin_otp">
+  <input name="phone" placeholder="phone number" type="text">
+  <button style="margin-top: 12px;">Login with phone OTP</button>
+</form>
 <form method="POST" action="?/anon">
   <button style="margin-top: 12px;">Login Anonymously</button>
 </form>
@@ -29,3 +33,10 @@
 {#if form?.error}
   <p style="color: red;">{form.error}</p>
 {/if}
+{#if form?.verify}
+  <form method="POST" action="?/verify_otp">
+    <input name="otp" placeholder={`OTP sent to ${form?.phone}`} type="text">
+    <input name="phone" type="hidden" value={form?.phone}>
+    <button style="margin-top: 12px;">Verify</button>
+  </form>
+{/if}