React/Supabase
[supabase] supabase로 구글 소셜 로그인 구현하기
heew0n
2023. 12. 29. 22:42
supabase는 이메일 뿐만 아니라 여러 소셜 로그인이 가능하다
구글 로그인을 위한 공식문서가 있다
사용법은 아주 간단!
https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth
Part Five: Google OAuth | Supabase Docs
_10 const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' })
supabase.com
구글 로그인 로직 또한 공식 문서를 참조하면 된다
https://supabase.com/docs/guides/auth/social-login/auth-google
Login with Google | Supabase Docs
Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly. Behind the scenes, Supabase Auth use
supabase.com
// 구글 로그인
const signInGoogle = async (e: React.FormEvent) => {
e.preventDefault();
try {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent'
}
}
});
console.log(data);
if (error) {
console.error(error);
} else {
Swal.fire({
position: 'center',
icon: 'success',
title: '로그인에 성공하였습니다!',
showConfirmButton: false,
timer: 1500
});
navigate('/homepage');
}
} catch (error) {
console.error(error);
}
};