Next.js 서버 사이드 Auth 설정

Next.js에는 App Router 와 Pages Router 두 가지 버전이 있다. 둘 다 서버 사이드 Auth를 설정할 수 있다. 한 애플리케이션에서 두 가지 전략을 모두 사용할 수도 있다.

다만, 여기서는 App Router 전략만 다룬다.

1. Supabase 패키지 설치

@supabase/supabase-js 패키지와 헬퍼 @supabase/ssr 패키지를 설치한다.

npm install @supabase/supabase-js @supabase/ssr

2. 환경 변수 설정

프로젝트 루트 디렉터리에 .env.local 파일을 생성한다.

NEXT_PUBLIC_SUPABASE_URL 과 NEXT_PUBLIC_SUPABASE_ANON_KEY 를 입력한다:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

프로젝트의 URL과 Anon Key는 Supabase 대시보드의 프로젝트 설정에서 확인할 수 있다.

3. Supabase 클라이언트를 생성할 유틸리티 함수 작성

Next.js 앱에서 Supabase에 접근하려면 2가지 유형의 Supabase 클라이언트가 필요하다:

1. 클라이언트 컴포넌트 클라이언트 - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근하기 위함이다.
2. 서버 컴포넌트 클라이언트 - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근하기 위함이다.

utils/supabase 폴더를 만들고 각 클라이언트 유형별로 파일을 생성한다. 그런 다음 각 클라이언트 유형에 대한 유틸리티 함수를 복사한다.

import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  );
}

import { createServerClient, type CookieOptions } from '@supabase/ssr';
import { cookies } from 'next/headers';

export function createClient() {
  const cookieStore = cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options });
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options });
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  );
}

4. 미들웨어 설정

프로젝트 루트에 middleware.ts 파일을 생성한다.

서버 컴포넌트에서는 쿠키를 작성할 수 없으므로, 만료된 인증 토큰을 새로 고치고 저장하기 위해 미들웨어가 필요하다.

미들웨어는 다음 역할을 한다:

1. 인증 토큰 새로고침 (리프레시 토큰 기능 내장)
   • 미들웨어는 supabase.auth.getUser() 를 호출하여 사용자의 인증 토큰을 새로고칩니다.
   • 토큰이 만료되었거나 유효하지 않은 경우, Supabase는 새로운 토큰을 발급한다.
   • 이를 통해 사용자가 항상 유효한 토큰을 가지고 있음을 보장할 수 있다.
2. 서버 컴포넌트에 새로고친 토큰 전달
   • 미들웨어는 request.cookies.set()을 사용하여 새로고친 인증 토큰을 쿠키에 저장합니다.
   • 이후 서버 컴포넌트에서 이 쿠키를 읽어 사용자 세션 정보에 접근할 수 있습니다.
   • 이렇게 함으로써 서버 컴포넌트에서 중복으로 토큰을 새로고치는 작업을 방지할 수 있습니다.
3. 브라우저에 새로고친 토큰 전달
   • 미들웨어는 response.cookies.set()을 사용하여 새로고친 인증 토큰을 브라우저에 전달합니다.
   • 이를 통해 브라우저에 저장된 이전 토큰을 새로운 유효한 토큰으로 대체할 수 있다.
   • 클라이언트 측에서도 항상 유효한 토큰을 사용하여 인증 문제를 방지할 수 있다.

미들웨어는 모든 요청에 대해 실행되므로, Supabase에 접근하지 않는 라우트에 대해서는 불필요한 작업이 된다. 따라서 matcher를 추가하여 Supabase에 접근하는 라우트에 대해서만 미들웨어가 실행되도록 설정할 수 있다.

import { type NextRequest } from 'next/server';
import { updateSession } from '@/utils/supabase/middleware';

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

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
};

import { createServerClient, type CookieOptions } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function updateSession(request: NextRequest) {
  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value,
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value,
            ...options,
          });
        },
        remove(name: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value: '',
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value: '',
            ...options,
          });
        },
      },
    },
  );

  await supabase.auth.getUser();

  return response;
}

5. 로그인 페이지 생성

앱에 로그인 페이지를 만든다. 서버 액션을 사용하여 Supabase 회원가입 함수를 호출한다.

Supabase가 액션에서 호출되므로 @/utils/supabase/server.ts 에 정의된 클라이언트를 사용한다.

import { login, signup } from './actions';

export default function LoginPage() {
  return (
    <form>
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button formAction={login}>Log in</button>
      <button formAction={signup}>Sign up</button>
    </form>
  );
}

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

import { createClient } from '@/utils/supabase/server';

export async function login(formData: FormData) {
  const supabase = createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  };

  const { error } = await supabase.auth.signInWithPassword(data);

  if (error) {
    redirect('/error');
  }

  revalidatePath('/', 'layout');
  redirect('/');
}

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

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  };

  const { error } = await supabase.auth.signUp(data);

  if (error) {
    redirect('/error');
  }

  revalidatePath('/', 'layout');
  redirect('/');
}

export default function ErrorPage() {
  return <p>Sorry, something went wrong</p>;
}

6. 인증 확인 경로 변경

이메일 확인이 활성화되어 있다면(기본값), 새 사용자는 회원가입 후 확인 메일을 받게 된다.

서버 사이드 인증 플로우를 지원하도록 이메일 템플릿을 변경한다.

대시보드의 Auth 템플릿 페이지로 이동한다. Confirm signup 템플릿에서 { { .ConfirmationURL } }을 { { .SiteURL } }/auth/confirm?token_hash={ { .TokenHash } }&type=signup로 변경한다.

7. 인증 확인을 위한 라우트 핸들러 생성

auth/confirm 에 대한 라우트 핸들러를 생성한다. 사용자가 확인 이메일 링크를 클릭하면 secure code를 인증 토큰으로 교환한다.

라우터 핸들러이므로 @/utils/supabase/server.ts 에서 Supabase 클라이언트를 사용한다.

// app/auth/confirm/route.ts
import { type EmailOtpType } from '@supabase/supabase-js';
import { type NextRequest, NextResponse } from 'next/server';

import { createClient } from '@/utils/supabase/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const token_hash = searchParams.get('token_hash');
  const type = searchParams.get('type') as EmailOtpType | null;
  const next = searchParams.get('next') ?? '/';

  const redirectTo = request.nextUrl.clone();
  redirectTo.pathname = next;
  redirectTo.searchParams.delete('token_hash');
  redirectTo.searchParams.delete('type');

  if (token_hash && type) {
    const supabase = createClient();

    const { error } = await supabase.auth.verifyOtp({
      type,
      token_hash,
    });
    if (!error) {
      redirectTo.searchParams.delete('next');
      return NextResponse.redirect(redirectTo);
    }
  }

  // return the user to an error page with some instructions
  redirectTo.pathname = '/error';
  return NextResponse.redirect(redirectTo);
}

8. 서버 컴포넌트에서 사용자 정보 접근

서버 컴포넌트는 쿠키를 읽을 수 있으므로 인증 상태와 사용자 정보를 가져올 수 있다.

서버 컴포넌트에서 Supabase를 호출하므로 @/utils/supabase/server.ts 에서 생성한 클라이언트를 사용한다.

로그인한 사용자만 접근할 수 있는 private 페이지를 만든다. 이 페이지에는 사용자의 이메일이 표시된다.

// app/private/page.tsx
import { redirect } from 'next/navigation';

import { createClient } from '@/utils/supabase/server';

export default async function PrivatePage() {
  const supabase = createClient();

  const { data, error } = await supabase.auth.getUser();
  if (error || !data?.user) {
    redirect('/login');
  }

  return <p>Hello {data.user.email}</p>;
}