mdrokz
commented
9 months ago 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={[]}
/>
)
}
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 (
); }