[NEXTFLIX_Day4] 토큰 유효성 검증(NEXT_PUBLIC_의 사용)

zustand와 supabase를 활용해서 로그인 토큰 유효성 검증을 하려고 한다.
로그인 토큰 유효성 검증이 무엇일까?

로그인 토큰 유효성 검증이란?

 

📌사용자가 보유한 인증 토큰이 유효한지 확인하는 과정
즉, 사용자가 로그인 상태를 유지하고 있는지 확인하는 역할이다.

Supabase에서는 auth.getSession() 또는 auth.refreshSession()을 이용해서 토큰을 검증할 수 있다.

 

로그인 토큰 검증 로직 흐름

 

📍로그인 과정

1. 사용자가 이메일과 비밀번호를 입력하여 로그인 요청을 보냄
2. supabase.auth.signInWithPassword()를 통해 인증 (비밀번호를 통해 사용자 인증하는 방식)
3. 인증이 성공하면 엑세스 토큰(Access Token)과 리프레시 토큰(Refresh Token) 이 발급됨
4. Zustand 스토어에 로그인 상태(isSignedIn)와 유저 정보(user) 저장

 

 

📍로그인 토큰 유효성 검증 과정

사용자가 페이지를 새로고침하거나, 앱을 다시 실행할 때

 

1. Supabase auth.getSession()을 호출하여 현재 로그인 세션이 유효한지 확인
2. 세션이 유효하면
   • Zustand 상태(isSignedIn, user)를 갱신하여 로그인 상태 유지.
3. 세션이 만료되었거나 없으면
   • auth.refreshSession()을 호출하여 새로운 토큰을 발급 시도 (적용 안 함)
   • 리프레시 토큰도 만료되었다면 사용자를 로그아웃 처리

 

supabase API

supabase Docs를 보면 다양한 API들이 있다.

그 중 내가 사용한 API를 정리해보겠다.
 
📍signInWithPassword()

//이메일과 비밀번호로 로그인
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'example@email.com',
  password: 'example-password',
})

// 전화번호와 비밀번호로 로그인
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'example@email.com',
  password: 'example-password',
})

 

 

 

 

 

📍getSession()

// 세션 데이터 가져오기
const { data, error } = await supabase.auth.getSession()

 

 

 

Zustand + Supabase

 

zustand는 클라이언트의 상태를 전역적으로 관리한다.

supabase의 로그인 로직과 함께 사용하여 로그인/로그아웃/토큰 유효성을 전역으로 관리한다.

 

로직의 흐름은 다음과 같이 구상하였다.

로그인 함수 : signInWithPassword를 사용하여 로그인하고, 그에 해당하는 유저 정보를 가져와서 user 상태에 set
로그아웃 함수 : signOut를 사용하여 로그아웃
토큰 유효성 검증 함수 : getSession을 사용하여 유효하면 유저 정보를 가져와서 set하고 없다면 로그아웃 상태처럼 set 

 

 

그러나, store에 supabase 로직을 직접 사용했더니 오류가 발생했다.

 

.env 파일에서 환경변수를 다음과 같이 사용하고 있었다.

SUPABASE_URL= ''
SUPABASE_KEY= ''

 

위에도 적었듯 zustand는 '클라이언트'의 상태를 관리한다.
하지만 supabase의 키는 서버 환경변수로 사용되고 있다.

이전 과제에서 알게 된 다음과 같은 내용이 있다.

Next.js는 NEXT_PUBLIC_ 접두사를 붙여야만 클라이언트에서 환경변수를 노출합니다.
이를 통해 서버 환경변수와 클라이언트 환경변수를 명확히 구분할 수 있습니다.

 

클라이언트(zustand)에서 사용할 경우에는 NEXT_PUBLIC_을 꼭 붙여주어야 한다!

 

 NEXT_PUBLIC_을 붙여주면 클라이언트에 노출된다는 건데, API 키를 노출해도 되는 걸까?

라는 생각이 들었다.

 

 

supabase 로직을 서버 액션으로 분리하면 서버에서 서버 키를 사용하면 되지 않을까?
라는 생각으로 NEXT_PUBLIC_을 사용하지 않고 서버 액션으로 분리하여 구현하였다.

 

하지만 마찬가지로 같은 오류가 계속되었다.

 

🤔 왜 서버 액션을 써도 작동되지 않는걸까?

• 만약 정말로 ‘서버 액션에서만’ 이 변수를 사용하고, 클라이언트(React 컴포넌트나 zustand 스토어)에서는 전혀 사용하지 않는다면 NEXT_PUBLIC_ 없이도 서버 측에서만 접근 가능하다.
• 하지만 Zustand Store(클라이언트 사이드)에서 Supabase API를 직접 호출한다면(또는 Supabase client를 import해 사용하는 로직이 클라이언트 코드에도 있다면) 결국 클라이언트 번들에 환경 변수가 필요하게 된다. 이때는 NEXT_PUBLIC_을 붙여야만 참조가 가능하다.

 

🤔 API 키가 클라이언트에 노출해도 되지 않을까?

 

• 노출된다. 정확히 말하면, NEXT_PUBLIC_으로 시작되는 환경 변수는 최종적으로 클라이언트 JS 번들에 값이 삽입되므로, 브라우저 개발자 도구나 소스 맵 등을 통해 얼마든지 확인이 가능하다.
• Supabase의 경우, anon key는 원래 클라이언트 공개용 키로 설계되어 있다. 즉, 서비스 롤 키(Service Role Key)처럼 민감한 권한이 있는 키가 아니기 때문에 노출이 되어도 큰 문제가 없도록 만들어진 키.
  • anon key는 이름 그대로 익명 사용자가 호출할 수 있는 API 범위만을 허용하는 “공개용 키”
  • 민감한 API(예: 관리자 권한이 필요한 API)를 다루려면 Supabase에서 제공하는 Service Key를 서버 전용 로직에 사용해야 하고, 그 키는 절대 클라이언트에 노출되면 안 된다.

 

🤔 서버 액션인데도 클라이언트 노출이 필요한 이유?

 

• 서버 액션 함수를 호출하는 부분이 클라이언트 코드에 있기 때문이다.
• 만약 클라이언트에서 Supabase의 로우 레벨 API를 직접 호출한다면, 결국 클라이언트 쪽에서도 프로젝트 URL과 anon key를 알아야 하므로 NEXT_PUBLIC_이 필요하다.
• 정말 서버에서만 처리하고, 클라이언트에서는 서버 액션을 단순 호출만 한다면(예: 폼 전송), 내부적으로 Supabase Client는 전부 서버에서만 사용되므로 클라이언트 환경 변수가 필요 없다. 그럴 경우 NEXT_PUBLIC_없이도 동작한다.

 

// store > useAuthStore.ts

import { checkSession, getUserByEmail, logOutSupabase } from '@/services/signIn';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface AuthState {
  isSignedIn: boolean;
  user: User | null;
  signIn: (email: string) => void;
  logout: () => void;
}

interface User {
  email: string;
  nickname: string;
  id: string;
}

export const useAuthStore = create(
  persist<AuthState>(
    (set) => ({
      isSignedIn: false,
      user: null,

      // 로그인 함수
      signIn: async (email: string) => {
        const userData = await getUserByEmail(email); //supabase에서 userData 가져오기
        if (!userData) return;
        set({ isSignedIn: true, user: { email: userData.email, nickname: userData.nickname, id: userData.id } }); //로그인 한 유저 정보 담음
      },
      // 로그아웃 함수
      logout: async () => {
        await logOutSupabase();
        localStorage.removeItem('auth_token'); //로그아웃 시 로컬스토리지 토큰 삭제
        set({ isSignedIn: false, user: null });
      },
      // 토근 유효 검증 함수
      checkAuth: async (email: string) => {
        const userData = await checkSession();

        if (userData) {
          set({ isSignedIn: true, user: { email, nickname: userData.nickname, id: userData.id } }); //유효할 때 유저 정보
        } else {
          set({ isSignedIn: false, user: null }); //유효하지 않을 때 로그아웃
        }
      },
    }),
    { name: 'auth-storage' }
  )
);

 

// services > signIn.ts

'use server';

import { EMAIL } from '@/constants/signUp';
import { supabase } from '@/utils/supabaseClient';

export interface SignInProps {
  email: string;
  password: string;
}

// supabase 로그인 서버 액션
export const signInSupabase = async ({ email, password }: SignInProps) => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
  if (error) {
    throw new Error(error.message);
  }
  return data;
};

// 유저 정보 가져오기 (nickname 포함)
export const getUserByEmail = async (email: string) => {
  const { data, error } = await supabase.from('users').select('id, email, nickname').eq(EMAIL, email).single();
  if (error) {
    console.error('유저 정보 조회 실패', error.message);
    return null;
  }
  return data;
};

// supabase 로그아웃 서버 액션
export const logOutSupabase = async () => {
  await supabase.auth.signOut();
};

// supabase 세션 확인 서버 액션
export const checkSession = async () => {
  const { data } = await supabase.auth.getSession();
  if (data?.session) {
    const email = data.session.user.email;
    const { data: userData, error } = await supabase
      .from('users')
      .select('id, nickname, email')
      .eq(EMAIL, email)
      .single();

    if (error) {
      console.log('유저 조회 실패', error.message);
      return null;
    }
    return userData; //data가 있다면 userData
  }
  return null; //세션이 없다면 null
};

// supabase 세션 확인 서버 액션
export const checkUser = async () => {
  const { data } = await supabase.auth.getUser();
  if (data) {
    const email = data.user?.email;
    const { data: userData, error } = await supabase
      .from('users')
      .select('id, nickname, email')
      .eq(EMAIL, email)
      .single();

    if (error) {
      console.log('유저 조회 실패', error.message);
      return null;
    }
    return userData; //data가 있다면 userData
  }
  return null; //세션이 없다면 null
};