[Next.js] 회원가입 후 로그인 페이지 접속 안 되는 이슈

이슈 사항

회원 가입 후에 로그인 페이지로 이동하도록 했는데 로그인 페이지 이동 버튼을 클릭해도 페이지 접속이 되지 않는 문제가 발생했다. 로그인 한 사람은 회원가입과 로그인 페이지 접속을 막아뒀는데 이 부분에서 뭔가 잘못된 것 같았다.

 

이슈 발생 코드

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { updateSession } from "./utils/supabase/middleware";
import { createClient } from "./utils/supabase/server";

export async function middleware(request: NextRequest) {
  await updateSession(request);

  const serverClient = createClient();

  const {
    data: { user }
  } = await serverClient.auth.getUser();

  const isLogin = !!user;

  if (isLogin && (request.nextUrl.pathname.startsWith("/login") || request.nextUrl.pathname.startsWith("/signUp"))) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  if (!isLogin && request.nextUrl.pathname.startsWith("/myPage")) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  return NextResponse.next();
}

/** 어떤 페이지에서 이 미들웨어를 실행할거니 */
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"]
};

 

await serverClient.auth.getUser() 를 통해 사용자 정보를 조회하고 로그인 되어있으면, 로그인 페이지 접속 시 홈으로 이동하도록 했다.

 

원인

수파베이스에서는 회원가입을 하면 자동으로 세션이 바로 저장되도록 되어있다고한다.

 

회원가입 후 바로 세션 날리기

export async function signup(formData: User) {
  const supabase = createClient();

  const { data, error } = await supabase.auth.signUp({
    email: formData.email,
    password: formData.password,
    options: {
      data: {
        user_name: formData.name,
        nickname: formData.nickname
      }
    }
  });

  if (error) {
    return { error: error.message };
  }
  // 회원가입 후 세션을 종료하여 자동 세션 저장 방지
  await supabase.auth.signOut();

  return { data };
}

signOut() 메서드를 요청하여 세션을 없애주도록 하였다.