인증 상태에 따른 페이지 접근 제한 (Next.js, supabase)

다음은 초기에 내가 바랐던 기능이다.

 

- 로그인 상태가 아닐 경우 접근 제한: /signin 이외의 모든 route

- 로그인 상태일 경우 접근 제한: /signin (로그인 성공 직후 이 페이지에서 벗어나도록.)

 

실제 페이지에 접근 후 리다이렉트되게 되면 불필요한 화면 이동이 있을 뿐만 아니라 화면 깜박임도 생겨서, 사용자 경험에 좋지 않을 것이라고 생각했다. 그런데 클라이언트에서 페이지를 구분하고 원하는 페이지로 리다이렉트할 경우 자격이 없는 사용자가 페이지를 방문했을 때 일시적으로 화면이 표시된 후 페이지가 리다이렉트되면서 깜박거린다.

 

Next.js 문서를 뒤져보니, middleware.ts 파일에서 요청하면 API 라우트 또는 페이지 요청 전에 실행되기 때문에 보호해야 할 경로에 대한 초기 접근 제어가 가능하다고 한다. 나는 세션을 가져와서 middleware에서 체크를 진행했는데, 이 부분에서 세션을 사용해도 괜찮은지 이후 보안 관련해서 더 찾아보고 수정할 것 같다.

// 로그인해야 접근할 수 있는 루트[]
const protectedRoutes = ['/today', '/calendar']

export async function middleware(request: NextRequest) {
  const response = await updateSession(request)
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: { 
    	/* 쿠키 get/set/remove 설정 */
      },
    },
  )

  // session 값 여부에 따라 리다이렉션
  const { data: { session }, error} = await supabase.auth.getSession() 

  if (request.nextUrl.pathname === '/signin' && session) {
    url.pathname = '/'
    return NextResponse.redirect(url)
  }

  if (protectedRoutes.includes(request.nextUrl.pathname)) {
    if (!session) {
      url.pathname = '/signin'
      return NextResponse.redirect(url)
    }
  }
  if(error) {
    console.error(error)
  }
  return response
}

 

그런데 위 코드를 적용한 이후 몇가지 문제를 발견했다. 

1. 로그인 없이 페이지에 접근만 해도 세션 여부를 체크하기 때문에 콘솔에 세션 없다고 뜬다.
2. 일반 로그인 성공시 '/' 로 이동했을 때 세션만 먼저 체크하고 /로 이동해서, 유저의 데이터가 들어와 있지 않고 새로고침해야 들어온다. (task create하려고 하면 user.id가 null이라고 태스크 추가가 안된다.)
3. OAuth 로그인 성공시  '/signin'을 벗어나지 않고 '/signin'에 다시 돌아온다. 그런데 유저 데이터는 들어와 있다.

--- 

 

🥕 해결 방법! 

 

일단 1번, 

 

기존에는 유저의 데이터를 fetch하는 함수(fetchUser)만 있었는데 세션을 확인하고 있으면 fetchUser를 실행하도록 하는 checkisLogin이라는 함수를 만들었다. (zustand 사용)

// @/store/useUserStore.ts

export const useUserStore = create<UserState>((set) => ({
   {/* user: null,*/}
  isLogin: false,
  {/* fetchUser, 같음 */}
  checkisLogin: async() => {
    const supabase = createClient()
    const {
      data: { session },
      error,
    } = await supabase.auth.getSession()
    if (error) {
      console.error('Check isLogin ERROR:', error)
    }
    if (session) {
      set({ isLogin: true })
      await useUserStore.getState().fetchUser()
    } else {
      set({ isLogin: false })
    }
  },
}))

 

 

2번 일반 로그인 오류에선 기존에는 response를 받으면 await fetchUser() 해왔는데, 

 

로그인 액션 함수의 반환 값에 에러가 없으면 checkisLogin()을 실행하도록 변경해서 진행했다.

if (response && response.error) {
        alert('일치하는 계정이 없습니다. 다시 작성해주세요. ')
      } else {
        await checkisLogin() // 요거
      }

 

3번 OAuth 오류

  이건 여러가지를 잘못하고 있었다.

일단 첫번째로 OAuth의 액션을 담당하는 파일의 경로와 파일명을 다른 것으로 사용했던 점.

 

그리고 두번째는  클라이언트쪽 코드에서 버튼 함수에 리다이렉트 경로를 다음과 같이 작성해야 했는데 빼먹어서였다.

const handleGoogleLogin = async () => {
    const supabase = createClient()
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: 'http://localhost:3000/auth/callback', // 이 부분을 안 쓰고 있었고, 기존에 사용하던 액션 함수는 경로가 잘못되어서 적용이 안되고 있었다
        queryParams: {
          access_type: 'offline',
          prompt: 'consent',
        },
      },
    })

 

Next.js + supabase로 작업하던 건데 파일의 경로-파일명(/api/auth/...)까지 지켜야한다는 생각을 못했다.

 

2번 3번 오류는 진짜 스터디 기간 내내 어디서부터 잘못된건지 모르겠어서 머리를 싸맸는데, 스터디 끝나고 나서라도 찾아내서 다행이라고 생각한다. Next 사용하면서 경로 지정이라던지, 서버와 클라이언트를 구분하면서 작성하는 과정을 통해 둘을 분리해서 생각하는 방식이라던지 많이 공부했다. 근데 15가 나왔네....