supabase 활용 로그인 인증

supabase활용 로그인 인증

supabase를 활용하여 로그인하는 방법에 대해서 학습하였습니다.

supabase는 기본적으로 JWT을 활용하며, 해당 토큰에 관해선 개발자도구 / application 탭 내의 웹스토리지에서 확인이 가능합니다.

Form과 input을 활용하여 UI를 만들어 준 후, submit을 통하여 함수를 호출하는 방식을 활용하였습니다.

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

  return (
    <Form onSubmit={handleSubmit}>
    .
    .
    .

여기서 e.preventDefault는 form 제출을 위한 버튼 클릭시 새로고침을 막기위해 사용해주었습니다.

handleSubmit 내의 login 함수를 따라 들어가보면,

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

export function useLogin() {
  const navigate = useNavigate();

  const { mutate: login, isPending } = useMutation({
    mutationFn: ({ email, password }) => loginApi({ email, password }),
    onSuccess: () => {
      navigate("/dashboard");
    },
    onError: (err) => {
      console.log("ERROR", err);
      toast.error("Provided email or password are incorrect");
    },
  });

  return { login, isPending };
}

위 코드와 같습니다. useMutation을 활용하여 로그인 성공시, 로그인 실패시 나오는 추가 동작들을 제어할 수 있게됩니다.

그럼 mutation함수인 loginApi는 어떻게 구성되어있을까요?

import supabase from "./supabase";

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

  if (error) throw new Error(error.message);

  return data;
}

요즘은 매개변수의 순서를 신경쓰지 않고 선택적으로 인자를 다루기위해 하나의 객체로 묶어서 함수에 전달하는 방식을 개인적으로 선호하고 있습니다.

해당 API함수는 supabase에서 제공하는 sdk를 그대로 가져와 email과 password를 매개변수로 받게 하였습니다.

이상태로 Form에서 로그인 성공 시, authenticated가 나오며, 실패시 인증 토큰을 받을 수 없게 됩니다.