팀 프로젝트

Supabase AUTH

auth 기능 구현하기

아직 Supabase가 생소하고 뭔지 감도 안잡히는 기능도 많지만 급한대로 기본적인 auth 기능을 구현해 보았다.

현재 소셜로그인으로 kakao까지 등록은 해둔 상태이지만 아쉽게도 로그인이 이루어진 이후 곧바로 세션이 종료되어 버리는 문제를 겪고 있어서 소셜 로그인에 대해서는 이 문제가 성공적으로 해결이 되면 그때 서술하기로 한다.

예시 코드

먼저 Supabase 문서를 토대로 AUTH의 기능이 제대로 작동하는지 확인을 해보자

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

// Create a single supabase client for interacting with your database
const supabase = createClient(
  '<supabase_url>',
  '<anon key>',
);

const TempAuthForm = () => {
  const [id, setId] = useState('');
  const [nick, setNick] = useState('');
  const [pw, setPw] = useState('');
  const [user, setUser] = useState('');
  const [userNick, setUserNick] = useState('');

  //회원가입
  const signUpHndlr = async () => {
    console.log('이것도 연결됨');
    const { data, error } = await supabase.auth.signUp({
      email: id,
      password: pw,
      options: {
        data: {
          nickname: nick,
        },
      },
    });
  };

  //로그인
  const signInHndlr = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signInWithPassword({
      email: id,
      password: pw,
    });
    console.log('데이터', data, '에러', error);
  };

  //소셜로그인
  const signInWithKakao = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'kakao',
    });
    console.log('카카오로그인정보', data);
  };

  //로그아웃
  const signOutHndlr = async () => {
    const { error } = await supabase.auth.signOut();
    console.log('에러', error);
  };

  //조회
  const getCurrentSession = async () => {
    const { data, error } = await supabase.auth.getSession();
    console.log('데이터', data, '에러', error);
    if (!data.session) {
      setUser('로그인 상태가 아님');
    }
    if (data.session) {
      setUser(data.session?.user.email as string);
      setUserNick(data.session?.user.user_metadata?.nickname as string);
    }
  };

Supabase AUTH 의 기본적인 기능들을 테스트 하기 위한 임시 컴포넌트를 작성해 보았다. jsx 리턴부는 전혀 중요하지 않기에 생략했다.

먼저 supabase js 라이브러리를 설치하는 것이 선행되어야 한다.
yarn add @supabase/supabase-js 또는
npm install @supabase/supabase-js

라이브러리 설치 후에는 createClient를 import 하고 본인 프로젝트의 url 과 key를 넣어서 활성화 해준다.

이후에는 위에 제시한 예시코드대로 하나씩 확인해 보면 된다.

실제 프로젝트에 적용할 때는 supabase_url과 anon_key 따로 .env.local 파일에서 관리하는 것이 맞다.
또한 AUTH 관련 코드들도 사용하는 컴포넌트 내에 직접 작성하기보다 따로 api 폴더 내에 파일을 만들어서 외부 파일로 관리하는 것이 적절하다.

getCurrentSession 함수로 현재 로그인 세션에 대한 정보를 조회할 수 있었는데, Firebase 에서는 새로고침 했을때 이것이 초기화 되었던 것과 달리 Supabase에서는 새로고침 해도 유지되는 것을 확인할 수 있었다. 이렇게 로그인 세션을 불러와서 관련 정보를 읽어 올 수 있다면 프로젝트 전반에서 유용하게 사용할 수 있을 것이다.

Firebase 보다 우수하다고 느낀 점이 하나 더 있었는데, 회원가입할때 user_metadata를 따로 작성하고 저장할 수 있는 기능이었다. Firebase에서 E-mail&Password 방식을 사용할때 추가적인 정보를 기입할수 없어서 불편했던 기억이 있는데 Supabase에서는 간단히 options 에 객체를 전달하는 것으로 정보를 추가 할 수 있었다. 위 예시에서는 nickname을 추가해 보았지만 사용자의 성별이나 나이, 지역 등 활용 가능성은 무궁무진하다.

테스트 결과

테스트 결과 회원가입, 로그인, 로그아웃, 세션 조회 모두 정상적으로 작동하는 것으로 확인되었다. 회원가입한 계정들은 위 스크린샷에서 보이는 것처럼 Supabase 대시보드에서도 확인이 가능했다.

카카오 소셜 로그인도 회원가입 자체는 성공한 모습인데 현재로서는 세션이 비정상적이게 즉시 종료되는 문제를 겪고 있어서 이건 좀더 공부해 봐야 할 것 같다.

실제 상업용 프로젝트라면 auth 설정에서 Confirm email 옵션은 켜두는 것이 좋다. 지금은 테스트 및 학습 목적으로 만들어 본 것이어서 꺼둔 상태이다.
이 옵션이 꺼져있으면 별도의 인증없이 아무 이메일이나 기입하고 그걸로 가입이 가능하지만 해당 옵션을 켜는 것만으로도 이런식으로 마구잡이로 가입하는 것은 방지할 수 있다. Confirm email 옵션이 켜져 있으면 회원가입 요청한 이메일 계정으로 계정 인증 메일이 발송 된다고 한다.