2024-01-09 본 캠프 68일차 / 87일차 TIL (로그인 로직 구현 with supabase)

2024-01-09 본 캠프 68일차 / 87일차 TIL

주요 진행사항

- 로그인 로직 구현 완료

 

예정 진행사항

- realtime chat 구성 (room별 전체 채팅)

 

로그인 로직 구현 

1. 테이블 구성

supabase의 auth를 사용할 때 oAuth와 일반로그인 간 저장되는 데이터가 다르기 때문에 별도의 auth 테이블을 구성한다.

id, created_at, email, display_name의 속성들로 구성하였다. 

 

2.  trigger 함수

auth 정보가 생성될 때 마다 테이블의 row도 추가되야하기 때문에 trigger를 구성한다.

이전 게시글에서 만든 trigger함수를 참고하면 되겠다.

2024-01-05 본 캠프 66일차 / 85일차 TIL (auth trigger 함수 구현 및 yarn run dev 시 문제 발생)

 

 

3.  일반 이메일 및 oAuth 로그인을 통합하여 하나의 함수로 작성

const err = (e: never) => {};
export const signInHandler = async ({
  email,
  password,
  platform,
}: SignInHandlerArgs) => {
  switch (platform) {
    case "email":
      const { data: emailLoginData, error: emailLoginError } =
        await supabase.auth.signInWithPassword({
          email: email!,
          password: password!,
        });

      if (emailLoginError) throw emailLoginError;
      return emailLoginData;
    case "google":
    case "kakao":
    case "github":
      const { data: oAuthLoginData, error: oAuthLoginError } =
        await supabase.auth.signInWithOAuth({
          provider: platform,
          options: {
            queryParams: {
              access_type: "offline",
              prompt: "consent",
            },
          },
        });
      if (oAuthLoginError) throw oAuthLoginError;
      return oAuthLoginData;
    default:
      err(platform);
      throw new Error("LoginError: 올바른 케이스가 아닙니다.");
  }
};

 

arguments 값으로 email, password와 platform(로그인 하는 형식)이 주어졌을 시 platform을 통해 switch문을 돌려 원하는 로직을 구현하였다.
이때 oAuth는 provider 의 값만 다르기 때문에 case에 break 없이 다음과 같이 간단하게 구성할 수 있다. 

 

4. 로그아웃

export const logoutHandler = async () => {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
};