Improve docs on how to use auth-ui with otp

[aaa3334]

Have been spending a lot of time trying to figure out how to use the otp here - magic link seems to work ok in the ui (except there are issues with the email prefetching the link, making it invalid before it is even used which is making it impossible to use...). Apart from that the otp seems promising, but the problem is the flow - if we start with the base form, there is no where to click 'sign up with otp' and if you click the 'magic ilnk' and edit the email to include the otp, there is no way to redirect to the correct page (ie the otp page). And when we are redirected to the otp page, the user in addition has to input their email and the code which I have received doesnt seem to work (with the view="verify_otp").

Supabase auth is already very confusing and poorly doccumented - so hopefully the otp docs can be updated to show how to actually do it and how it is meant to be used? I have been trying for quite some time now getting nowhere trying to figure it out...

The code for example:

"use client";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import supabase from "@/lib/supabase";
import { Database } from "@/lib/database.types";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export default function AuthPage() {
const supabase = createClientComponentClient();
return (

<Auth
supabaseClient={supabase}
onlyThirdPartyProviders={false}
socialLayout={"horizontal"}
magicLink={true}
otpType="email"
theme="default"
appearance={{ theme: ThemeSupa }}
redirectTo={${location.origin}/auth/callback}
/>

  </div>
</div>

);
}

[mdrokz]

Have been spending a lot of time trying to figure out how to use the otp here - magic link seems to work ok in the ui (except there are issues with the email prefetching the link, making it invalid before it is even used which is making it impossible to use...). Apart from that the otp seems promising, but the problem is the flow - if we start with the base form, there is no where to click 'sign up with otp' and if you click the 'magic ilnk' and edit the email to include the otp, there is no way to redirect to the correct page (ie the otp page). And when we are redirected to the otp page, the user in addition has to input their email and the code which I have received doesnt seem to work (with the view="verify_otp").

Supabase auth is already very confusing and poorly doccumented - so hopefully the otp docs can be updated to show how to actually do it and how it is meant to be used? I have been trying for quite some time now getting nowhere trying to figure it out...

The code for example:

"use client"; import { Auth } from "@supabase/auth-ui-react"; import { ThemeSupa } from "@supabase/auth-ui-shared"; import supabase from "@/lib/supabase"; import { Database } from "@/lib/database.types"; import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export default function AuthPage() { const supabase = createClientComponentClient(); return (

<Auth
supabaseClient={supabase}
onlyThirdPartyProviders={false}
socialLayout={"horizontal"}
magicLink={true}
otpType="email"
theme="default"
appearance={{ theme: ThemeSupa }}
redirectTo={${location.origin}/auth/callback}
/>

  </div>
</div>

); }

Im facing the same problem this is how im doing it currently

sendOtp.tsx

'use client'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { Box, Button, Card, Text, TextFieldInput } from '@radix-ui/themes'
import { useState } from 'react'

export default function SendOtp() {
  const supabase = createClientComponentClient()

  const [email, setEmail] = useState('');

  const sendOTP = async () => {
    // check email with regex 
    if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) === false) {
      alert('Please enter a valid email address')
      return
    }
    const { data, error } = await supabase.auth.signInWithOtp({
      email,
      options: {
        // set this to false if you do not want the user to be automatically signed up
        shouldCreateUser: false,
      },
    })

    if (error) {
      alert(error.message)
    } else {
      alert('OTP sent successfully')
    }

    console.log(data);
  }

  return (
    <Box>
      <Text>Email address</Text>
      <TextFieldInput onChange={(e) => setEmail(e.currentTarget.value)} type="email" placeholder="Your Email address" />
      <Button onClick={sendOTP}>Send OTP</Button>
    </Box>
  )
}

for otp verification im using it like this but nothing happens when otp is verified and i dont see anything in the docs on how to proceed after verification

login.tsx

'use client'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'

export default function Login() {
  const supabase = createClientComponentClient()

  return (
    <Auth
      supabaseClient={supabase}
      view='verify_otp'
      appearance={{ theme: ThemeSupa }}
      theme='dark'
      otpType='email'
      showLinks={true} providers={[]}

    />
  )
}

[mdrokz]

Have been spending a lot of time trying to figure out how to use the otp here - magic link seems to work ok in the ui (except there are issues with the email prefetching the link, making it invalid before it is even used which is making it impossible to use...). Apart from that the otp seems promising, but the problem is the flow - if we start with the base form, there is no where to click 'sign up with otp' and if you click the 'magic ilnk' and edit the email to include the otp, there is no way to redirect to the correct page (ie the otp page). And when we are redirected to the otp page, the user in addition has to input their email and the code which I have received doesnt seem to work (with the view="verify_otp").

Supabase auth is already very confusing and poorly doccumented - so hopefully the otp docs can be updated to show how to actually do it and how it is meant to be used? I have been trying for quite some time now getting nowhere trying to figure it out...

The code for example:

"use client"; import { Auth } from "@supabase/auth-ui-react"; import { ThemeSupa } from "@supabase/auth-ui-shared"; import supabase from "@/lib/supabase"; import { Database } from "@/lib/database.types"; import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export default function AuthPage() { const supabase = createClientComponentClient(); return (

<Auth
supabaseClient={supabase}
onlyThirdPartyProviders={false}
socialLayout={"horizontal"}
magicLink={true}
otpType="email"
theme="default"
appearance={{ theme: ThemeSupa }}
redirectTo={${location.origin}/auth/callback}
/>

  </div>
</div>

); }

Looking at the code for VerifyOtp.tsx component

https://github.com/supabase/auth-ui/blob/decec24b6412ede019d73b38f915fb31a3719ec2/packages/react/src/components/Auth/interfaces/VerifyOtp.tsx#L41-L61

nothing happens after the OTP has verified @aaa3334 did you ever figure out how to use it ? i'm also stuck.

am i doing it wrong or misunderstood the code ? any ideas @thorwebdev @silentworks ?