supabase로 구글로그인(소셜로그인) 구현하기
June 06, 2023
supabase로 구글로그인을 구현하기 위해서는 어떤 세팅을 해야 하고 코드로는 어떻게 구현하는지 적어보았다.
supabase, google cloud console 세팅하기
먼저 supabase의 Authentication - Providers에서 Google을 enable 시키면 Client ID와 Client Secret을 입력하는 창이 나온다.
Google cloud console에서 새 프로젝트를 만든다.
그리고 OAuth 동의 화면에서 User Type 외부를 선택하고 생성한다. 검색창에 OAuth라고 치면 쉽게 찾을 수 있다.
그리고 나서 사용자 인증 정보에서 OAuth 클라이언트 ID를 만든다. 검색창에 credential이라고 치면 쉽게 찾을 수 있다.
유형은 각자의 환경에 맞게 골라주면 된다.
그리고 아까 열어둔 supabase 화면에서 Redirect URL을 복사해서 승인 목록에 추가해준다.
그리고 만들기를 하면 아래 처럼 클라이언트 ID와 비밀번호를 확인할 수 있다.
이걸 supabase 화면에 붙여넣고 저장하면 준비는 끝이다.
클라이언트단
sdk를 설치하고
yarn add @supabase/supabase-js아래처럼 supabase client를 만든다. 나는 next.js에서 만들었다.
// supabase.ts
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || ''
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ''
if (!supabaseUrl) throw new Error('Supabase URL not found.')
if (!supabaseAnonKey) throw new Error('Supabase Anon key not found.')
export const supabase = createClient(supabaseUrl, supabaseAnonKey)함수는 아래와 같이 작성하고, redirectTo options을 통해서 원하는 곳으로 redirect시킬 수 있다.
const handleSignInWithGoogle = async () => {
try {
const { error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: 'http://localhost:3000/auth/callback',
},
}
if (error) throw error;
} catch(error) {
console.error(error);
}
}큰 틀은 이렇고, 아래 onAuthStateChange method로 세션을 가져올 수 있다.
supabase.auth.onAuthStateChange((event, session) => {
if (event == 'SIGNED_OUT') {
store.state.user = null
} else {
store.state.user = session.user
}
})보통 SPA의 경우 App.js 같은데서 store에 값을 넣어주는 거 같고
next.js의 경우 아래 문서를 참고해서 추가적인 로직을 구현하면 된다.
