-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve docs on how to use auth-ui with otp #244
Comments
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={[]}
/>
)
} |
Looking at the code for VerifyOtp.tsx component 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 ? |
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
}/>
);
}
The text was updated successfully, but these errors were encountered: