Supabase - (8) 로그인 구현하기(Authentication)

이번 포스트에서는 Supabase를 이용한 이메일 방식 로그인 구현 방법을 소개하겠습니다.

 

 

1. Supabase에서 사용자 추가하기

Supabase 콘솔에서 Sign in/up 탭에서 Auth Providers에서 이메일을 선택한뒤 테스트를 위해 Confirm email 설정을 끕니다

 

그 후에 Supabase 콘솔에서 Authentication 탭으로 이동한 뒤, Add user → Create new user를 클릭하여 새로운 유저를 생성합니다.

이메일과 비밀번호는 임의로 입력해도 됩니다.
(※ 테스트용 이메일과 패스워드를 준비해두세요.)

사용자 추가

 

 

2. Supabase API 문서 참고하기

이제 API docs 탭에서 User Management를 선택하면 사용자 관련 기능들을 확인할 수 있습니다.
Supabase에서는 사용자 인증을 위해 supabase.auth 객체를 사용합니다.

우리는 이번 포스트에서 로그인 기능을 구현할 예정이므로, Sign in with password 항목의 예제 코드를 활용할 겁니다.

참고로 Supabase의 인증은 기본적으로 JWT(JSON Web Token) 방식을 사용합니다.

 

3. 로그인 함수 작성

API 문서에서 제공하는 예제 코드를 바탕으로 로그인 함수를 직접 작성해보겠습니다.

 

import supabase from "./supabase";

export async function login({ email, password }) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    throw new Error(error.message);
  }
  console.log(data);
  return data;
}

 

signInWithPassword 함수는 객체 형태로 이메일과 패스워드를 받습니다.
성공 시에는 session과 user 정보가 담긴 data 객체를 반환합니다.

 

 

4. 로그인 훅 생성 (React Query 사용)

위에서 작성한 login 함수를 React Query의 useMutation을 이용해 커스텀 훅으로 만들어봅니다.

import { useMutation } from "@tanstack/react-query";
import { login as loginApi } from "../../services/apiAuth";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";

export function useLogin() {
  const navigate = useNavigate();
  const { mutate: login, isLoading } = useMutation({
    mutationFn: ({ email, password }) =>
      loginApi({
        email,
        password,
      }),
    onSuccess: () => {
      toast.success("login success");
      navigate("/dashboard");
    },
    onError: (err) => {
      toast.error(err.message);
    },
  });

  return {
    login,
    isLoading,
  };
}

 

로그인에 성공하면 토스트 메시지를 보여주고, 대시보드(/dashboard) 페이지로 리다이렉트합니다.
에러가 발생하면 에러 메시지를 토스트로 띄워줍니다.

 

 

5. 로그인 컴포넌트에서 사용하기

이제 위에서 만든 커스텀 훅을 로그인 폼에서 사용할 수 있습니다.

  const { login, isLoading } = useLogin();
  function handleSubmit(e) {
    e.preventDefault();
    if (!email || !password) return;

    login({ email, password });
  }

 

 

 

로그인에 성공하면 콘솔에 출력되는 data 안에는 session과 user 정보가 포함되어 있습니다.

• session: 액세스 토큰, 리프레시 토큰 등 인증 관련 정보
• user: 사용자 고유 ID, 이메일 등 사용자 정보

이 정보는 로그인 성공 시 자동으로 로컬 스토리지에 저장됩니다.

 

마무리

이번 포스트에서는 Supabase의 인증 기능을 활용해 이메일/비밀번호 기반 로그인을 구현해보았습니다.
Supabase는 이메일 외에도 구글, 깃허브, 카카오 등 다양한 OAuth 로그인도 간편하게 지원합니다.