로그인 기능 구현
Web Client 에서 supabase로 로그인 구현할거임
email, password를 통한 supabase.auth.signInWithPassword({...}) 진행
signIn 컴포넌트에서 코드를 추가한다.
const supabase = createBrowserSupabaseClient();
const signInMutation = useMutation({
mutationFn: async () => {
const { error, data } = await supabase.auth.signInWithPassword({
email,
password,
});
if (data) {
console.log(data);
}
if (error) {
alert(error.message);
}
},
});
<Button
onClick={() => signInMutation.mutate()}
disabled={signInMutation.isPending}
loading={signInMutation.isPending}
className="w-full text-md py-1 "
color="light-blue"
>
로그인하기
</Button>
6-digit OTP 방식 회원가입 기능 구현
https://supabase.com/dashboard/project/eceptjznfdhgchrlzyyt/auth/templates
Authentication | Supabase
Customize the emails that will be sent out to your users.
supabase.com
으로 수정한다.
그리고 기존에 이메일로 가입진행했던 유저들을 삭제해준다.
이제 SignUp 컴포넌트의 내용을 이메일 인증에서 otp인증으로 교체해주면됨
const [otp, setOtp] = useState("");
OTP인증은 verityOtp 에 type과 email,token을 넣어주면됨.
//otp mutation
const verityOtpMutation = useMutation({
mutationFn: async () => {
const { data, error } = await supabase.auth.verifyOtp({
type: "signup",
email,
token: otp,
});
if (data) {
setConfirmationRequired(true);
}
if (error) {
alert(error.message);
}
},
});
그리고 otp를 입력할 수 있는 input도 필요하다.
return (
<div className="flex flex-col gap-4">
<div className="pt-10 pb-6 px-10 w-full flex gap-2 flex-col item-center justify-center max-w-lg border border-gray-400 bg-white">
<img src={`/images/Untitled.png`} className="w-60 mb-6" />
{/* OTP */}
{confirmationRequired ? (
<Input
value={otp}
onChange={(e) => setOtp(e.target.value)}
label="otp"
type="text"
placeholder="6자리 OTP를 입력해주세요"
className="w-full rounded-sm"
/>
) : (
<>
<Input
value={email}
onChange={(e) => setEmail(e.target.value)}
label="email"
type="email"
className="w-full rounded-sm"
/>
<Input
value={password}
onChange={(e) => setPassword(e.target.value)}
label="password"
type="password"
className="w-full rounded-sm"
/>
</>
)}
<Button
onClick={() => {
if (confirmationRequired) {
verityOtpMutation.mutate();
} else {
signupMutation.mutate();
}
}}
loading={
confirmationRequired
? verityOtpMutation.isPending
: signupMutation.isPending
}
disabled={
confirmationRequired
? verityOtpMutation.isPending
: signupMutation.isPending
}
className="w-full text-md py-1 "
color="light-blue"
>
{confirmationRequired ? "인증하기" : "가입하기"}
</Button>
</div>
작동화면
메일함을 확인해 보면 아래와 같이 코드를 보내준다.
인증이 완료되고 넘어간다.
