Supabase + OAuth
안녕하세요, 저는 이번 발표에서 Supabase를 활용한 인증 기능 중 OAuth 부분에 대해서 발표하고자 합니다.
Supabase에 대해서 설명하기 앞서, Firebase와의 차이점을 비교하고 선택한 이유에 대해서 설명드리겠습니다.
Firebase는 오픈 소스가 아니며, 복잡한 쿼리가 불가능하며, 유저가 많아졌을 때 비용이 많이 드는 등의 단점이 존재합니다.
Supabase는 오픈소스 프로젝트로 자체 서버를 구축할 수 있으며, PostgreSQL 기반으로 관계형 DB 장점을 살릴 수 있습니다.
또한 Firebase 대비 저렴하기 때문에, 이번 프로젝트에서 Firebase를 사용하게 되었습니다.
Supabase의 핵심 기능으로는 Database, Authentication, Storage, Realtime이 있습니다.
Database는 실시간 기능, 데이터베이스 백업, 확장 기능 등을 갖춘 모든 프로젝트에 대한 전체 PostgreSQL 기반 데이터베이스를 제공합니다.
Authentication, 즉 인증 기능은 다양한 identity Providers와 API를 통해 프로젝트에 이메일 및 비밀번호, 비밀번호 없는 로그인, OAuth를 통한 로그인을 관리할 수 있습니다.
Storage는 보안 액세스 정책을 통해 Postgres 데이터베이스와 완벽하게 통합되어 대용량 파일을 저장, 구성, 변환 및 제공합니다.
Realtime은 데이터베이스 변경 사항을 수신하고, 클라이언트 간에 사용자 상태를 저장하고 동기화하고, 채널에 구독된 클라이언트에 데이터를 브로드캐스트 하는 등의 작업을 수행합니다.
저는 이러한 핵심 기능 중, Authentication(인증)에 대해서 설명하고자 합니다.
인증 기능의 경우, Supabase Auth를 사용하면 앱에서 인증 및 권한 부여를 쉽게 구현할 수 있습니다.
그 중, Google과 Github를 통한 소셜 로그인 방법에 대해서 정리했습니다.
먼저 Gihub 로그인 방법에 대해 설명해보겠습니다.
우선 깃허브의 Setting > Developer Setting에 있는 OAuth 앱 만들기 구성을 클릭해 생성해줍니다.
이때, Authentication callback URL 부분에 Supabase에서 제공하는 callback URL을 삽입해줍니다.
해당 callback URL은 Supabase의 대시보드에서 확인할 수 있습니다.
이후, Supabase의 대시보드에 Gihub Client ID(OAuth용)와 비밀번호를 입력해 저장 버튼을 누르면 연결됩니다.
Google 로그인 방법에 대해서 설명드리겠습니다.
우선 Google Cloud 콘솔에서 동의 화면 페이지 (opens in a new tab)로 이동합니다.
그리고 승인된 도메인에서 Supabase 프로젝트의 도메인을 추가합니다.
이때, Supabase 도메인 형식은 <PROJECT_ID>.supabase.co로, supabase 프로젝트 생성 시 확인 가능합니다.
민감하지 않은 범위를 구성하는데, 저의 경우에는 email, profile, openid를 설정하였습니다.
그 후, API 자격 증명 페이지로 이동해 OAuth Client ID를 생성합니다.
승인된 리디렉션 URI에 Supabase에서 제공하는 callback URL을 삽입해줍니다.
마찬가지로 해당 callback URL은 Supabase의 대시보드에서 확인할 수 있습니다.
이후, Supabase의 대시보드에 Google Client ID(OAuth용)와 비밀번호를 입력해 저장 버튼을 누르면 연결됩니다.
이제 프로젝트에 Supabase를 설치 한 후 연결해보겠습니다.
먼저 npm i --save @supabase/supabase-js를 입력해 supabase를 설치합니다.
이후 .env 파일에 url과 anon_key를 넣어줍니다.
package.json에 generate-types 커맨드를 추가하면 우선 파일 설정은 끝났습니다.
이제 애플리케이션과 Supabase를 연결하는 설정 파일인 supabase.ts를 구현하고
소셜 로그인 함수를 구현해줍니다.
슬라이드에 보여지고 있는 코드들은 Supabase의 공식 문서에서 제공된 코드인데, 여기서 provider를 어떤 것으로 주었는지만 다르고 나머지 코드는 같은 것을 볼 수 있습니다.
때문에 저는 provider를 입력받는 signIn 함수를 생성 후 연결하고자 했습니다.
제가 작성한 소셜 로그인 함수입니다.
handleSocailSignIn 함수의 인자는 provider를 입력받는데, 이를 활용해 handleGoogleSignIn과 handleGithubSignIn 함수를 만들어 export했습니다.
이후, 해당 함수를 연결해주었는데
실제로 화면을 보면 google 로그인을 누르면, 자동으로 google에서 제공하는 계정 선택 페이지로 이동하는 것을 볼 수 있습니다.
또한 이러한 소셜 로그인 작업이 완료되면, Supabase의 Users 대시보드에 해당 유저의 정보가 저장된 것을 볼 수 있습니다.