[next] supabase에서 소셜 로그인 후 조건에 따라 redirect

초이·2024년 8월 6일

next.js supabase

🗓️ 내일배움캠프

목록 보기

54/55

소셜로그인 후 조건부 redirect 하는 법

유저가 로그인 하고 나서 분기점이 필요할 때 이 글을 읽는 것을 추천한다..

나의 프로젝트의 경우 로그인 후 첫 유저 대상으로 여행 취향에 대해 정보를 수집하는 과정이 필요했다.

주의) 들어가기에 앞서 코드에 대한 설명만 나온다. supabase와 kakao developer 세팅에 관한 문서는 대한 정보는 다른 글에 적어놓았다. (하지만 공식문서를 참고하는 것을 추천)

1. supabase 소셜 로그인 구현

버튼을 만든 후 버튼 클릭 시 실행 할 함수를 작성해주면된다.

const handleKakaoLogin = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "kakao",
      options: {
        redirectTo: "http://localhost:3000/api/auth/callback",
      },
    });
    if (error) {
      console.error("소셜로그인 중 에러: ", error);
    }
  };

signInWithOAuth : 이 것이 supabase에서 제공해주는 소셜 로그인 기능이다.
나는 kakao로 구현하기 때문에 provider에 kakao를 적었다.
options : 이 것으로 redirect에 대한 조건을 만들어 줄 수 있다.

options에는

이렇게 4가지 옵션이 있는데 나는 현재 조건에 따른 redirect가 필요하기 때문에 redirectTo를 사용하게 되었다.
supabase 공식 문서
https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail

난 처음에 redirectTo에 그냥 redirect할 path를 적기만 하면 되는줄 알았다.. 그런데 그게 아니라 api handler를 만들어서 이어줘야 되는 것이였다.

2. api handler 작성

경로 : api > auth > callback > route.ts

export async function GET(request: NextRequest) {
  const supabase = createClient();

  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");

  const isTypeExist = request.cookies.get("hasTravelType");

  if (code) {
    try {
      const { data, error } = await supabase.auth.exchangeCodeForSession(code);
      if (error) {
        return NextResponse.redirect(`${origin}/auth/error`);
      }
      const redirectUrl = isTypeExist ? "/" : "/onboard";
      return NextResponse.redirect(`${origin}${redirectUrl}`);
    } catch (e) {
      return NextResponse.redirect(`${origin}/auth/error`);
    }
  }
  return NextResponse.redirect(`${origin}/auth/error`);
}