[BaaS] Supabase로 소셜 로그인 기능 구현

📌 Supabase

일단 Supabase 를 본격적으로 공부하기 전, 이게 어떤 것이고 어떤 점이 좋은지 알아보자.

✅ㅤ장점

• 오픈 소스 : Supabase 는 오픈 소스 프로젝트로, 코드가 공개되어 있어 커스텀마이징이 가능하다.
• PostgreSQL 기반 : PostgreSQL 을 사용하여 데이터베이스ㅡㄹ 관리하므로, 관계형 데이터베이스의 강력한 기능을 활용할 수 있다.
• 실시간 데이터 : 실시간 데이터베이스 업데이트를 지원하여, 실시간 애플리케이션 개발에 유리하다.
• 자동 API 생성 : 데이터베이스 테이블을 기반으로 자동으로 RESTFul API 를 생성해 주어, API 서버 구축이 간편하다.

📎ㅤPostgreSQL 이란?

• 오픈소스 관계형 데이터베이스 관리 시스템으로, 복잡한 쿼리와 트랜잭션을 처리하는 데 강력한 기능을 제공한다.
• 관계형 데이터베이스 : 데이터를 테이블 형식으로 저장하고, SQL을 사용해 데이터를 관리한다.
• ACID 준수 : 데이터 무결성 및 일관성을 보장하는 트랜잭션을 지원한다.
• 확장성 : 대규모 데이터 처리에 유리하며, 다양한 데이터 타입과 함수 확장이 가능하다.
• 오픈소스 : 무료로 사용 가능하며, 커스텀마이징이 가능하다.
• 고급 기능 : JSON, XML, GIS 데이터 처리 등 다양한 고급 기능을 제공한다.

✅ㅤ단점

• 기능 제한 : Firebase 에서 제공하는 일부 고급 기능 (ex. Cloud Functions , Firebase ML 등)은 Supabase 에서는 제공되지 않거나, 구현이 부족할 수 있다.
• 확장성 : 대규모 애플리케이션에서는 Supabase 의 확장성이 Firebase보다 떨어질 수 있다.

---

사이드 프로젝트에서 Supabase 를 이용해서 소셜 로그인 기능을 구현하고자. 팀원분들과 각자 공부해오기로 했다. 그래서 소셜 로그인 기능 을 중심으로 정리해보고자 한다.

📌ㅤSupabase에서의...

1. 프로젝트 설정

• 프로젝트 대시보드 : 프로젝트를 생성하면 대시보드로 이동한다.
• API 키 확인 : 대시보드에서 Project Settings > API 로 가면 anon API 키와 service_role API 키를 확인할 수 있다. ( 이 키를 나중에 사용 )

2. 인증 설정 ( 소셜 로그인 활성화 )

• Authentication 설정 : 대시보드에서 "Authentication" 메뉴를 클릭하고, "Providers" 탭으로 이동한다.

• 소셜 로그인 제공자 추가 : "Enable Sign in with ----" 섹션에서 사용할 소셜 로그인을 활성화한다. 예를 들어, Google 로그인을 사용하려면 "Enable Sign in with Google"를 활성화 한다.

  • Google 로그인 설정 : "Client IDs"와 "Client Secret (for OAuth)"가 있는데 이는 아이디와 비밀번호와 같다. Google API 콘솔에서 발급받은 클라이언트 ID와 클라이언트 비밀번호를 입력해야 한다.

  • 🚫 "Skip nonce checks" : 이는 ID 토큰에서 nonce 값을 확인하지 않도록 설정하는 옵션 이다. 즉, 인증 요청과 응답을 매칭하기 위한 고유 식별자로 보통 보안을 강화하기 위해 사용 되며, 이 옵션을 활성화시키면 보안 수준이 낮아질 수 있어서 권장되지는 않는다. ( 보통은 iOS 앱과 같이 nonce 를 설정할 수 없는 환경에서 사용한다.)

  • Callback URL (for OAuth) : 로그인 인증 후 사용자에게 다시 리디렉션되는 URL로, 만약 Google이면 Google OAuth 인증이 완료되면 사용자가 Supabase로 돌아올 수 있도록 지정된 URL이다. ➡️ 이 URL은 Google API 콘솔에 등록해야 한다. ( 사용자가 Google 로그인 후, 인증 결과를 Supabase가 처리할 수 있도록 연결하는 역할 을 한다. )

    📎ㅤ사용자 로그인 예시 과정

    1. 사용자가 로그인 버튼을 클릭 → Google 로그인 화면으로 이동
    2. Google 로그인 성공 → Callback URL로 리디렉션
    3. Supabase가 이 URL에서 결과를 받아 사용자를 인증 처리 🌟
    4. 사용자는 애플리케이션의 화면으로 이동

  • Google 개발자 콘솔에 가서 "새 프로젝트 생성" 후, OAuth 2.0 클라이언트 ID를 생성하고, 이를 Supabase 설정에 입력헤야 한다.

    📎ㅤGoogle API 콘솔에서 생성하는 단계

    1. Google Cloud Console 에 접속
    2. Google 계정으로 로그인 → 로그인 후, 프로젝트를 생성하거나 기존 프로젝트를 선택 할 수 있다.
    3. 상단의 "프로젝트 선택" 을 클릭 → 새 프로젝트 만들기 선택 → 프로젝트 이름 입력, (필요시 조직 선택) 만들기 클릭 → 생성한 프로젝트 선택
    4. 왼쪽 메뉴에서 APls 및 서비스 > OAuth 동의 클릭 → 외부를 선택하고 만들기 클릭 → 앱 이름 , 사용자 이메일 , 앱 로고(선택) 를 입력 → 앱 도메인 입력 → 개인정보처리방침 및 서비스 약관 URL 입력 → 개발자 연락처 정보 → 저장 및 계속
    5. API 및 서비스 > 라이브러리 선택 → 검색창에 Google Identity Services API 를 검색 → 활성화
    6. API 및 서비스 > 사용자 인증 정보 선택 → + 사용자 인증 정보 만들기 클릭 후 OAuth 클라이언트 ID를 선택 → 애플리케이션 유형 선택 → 클라이언트 ID 이름을 입력 → Supabase에서 제공한 Callback URL 를 입력 → 만들기

📌ㅤ프로젝트 파일에서의...

1. Supabase 클라이언트 설정

• Supabase JavaScript 라이브러리 설치 : 먼저 Supabase 클라이언트 를 설치해야 한다.

npm install @supabase/supabase-js

• Supabase 클라이언트 초기화 : 프로젝트의 적절한 파일에 Supabase 클라이언트를 초기화 한다.

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('SUPABASE_URL', 'SUPABASE_ANON_KEY');

• SUPABASE_URL 과 SUPABASE_ANON_KEY는 대시보드에서 확인한 API URL과 anon 키를 입력한다.

2. 소셜 로그인 기능 구현

• 로그인 함수 : signInWithOAuth 메서드로 소셜 로그인을 처리한다.

const signInWithGoogle = async () => {
  const { user, session, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  });

  if (error) {
    console.error('로그인 오류:', error.message);
  } else {
    console.log('로그인 성공:', user);
  }
};

3. 로그인 상태 확인 🌟

• 로그인 상태 추적 : 로그인한 사용자의 정보를 추적하려면 supabase.auth.onAuthStateChange 를 사용하여 로그인 상태가 변경될 때마다 처리할 수 있다.
• onAuthStateChange 는 로그인, 로그아웃, 세션 갱신 등의 이벤트를 감지한다. ( useEffect 와 함께 사용하기에 적합하다. )

import { useEffect, useState } from 'react';

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user ?? null);
      }
    );

    return () => {
      authListener?.unsubscribe();
    };
  }, []);

4. 로그아웃 기능

const signOut = async () => {
  await supabase.auth.signOut();
  setUser(null);
};

const LogoutButton = () => {
  return <button onClick={signOut}>로그아웃</button>;
};

• signOut 메서드로 현재 세션을 종료할 수 있다.
• 로그아웃 후 상태를 초기화하려면 setUser(null)처럼 상태를 업데이트해야 한다.