[GPT Q&A] supabase를 사용하면 next15 백엔드를 구축하지 않아도 될까?

질문

클라이언트에서는 supabase 로그인 api호출하면 수파베이스 측에서 직접 세션 정보를 로컬 스토리지에 넣어주잖아. 근데 next.15 앱라우터로 API 라우트 사용하여 백엔드 측에서 supabase 로그인 api를 호출하면 클라이언트에 세션 정보가 자동 삽입 되지 않고 리프레쉬 토큰도 적용되지 않아. 이 떄, 나의 궁금증은 아래와 같아 1. supabase는 기본적으로 백엔드 구축을 하지 않도록 설계되어 있는가?(ex) supabase를 활용하면 next.js 15의 api 앱라우터를 사용하지 않아도 되는가?) 2. supabase와 next15 api 앱라우터를 혼합해 사용하면 세션 정보 저장이나 토큰 리프레쉬는 직접 코드로 작성해야하는가

 

답변

1. Supabase는 기본적으로 백엔드 구축을 하지 않도록 설계되어 있는가?

Supabase는 백엔드 서비스를 대신하는 플랫폼입니다. 기본적으로 Auth, DB, Storage 등 다양한 백엔드 기능을 제공하며, 클라이언트 측에서 직접 Supabase API를 호출하여 인증, 데이터베이스 쿼리 등을 처리할 수 있습니다.

즉, Supabase는 백엔드를 따로 구축하지 않고 바로 사용할 수 있는 백엔드-as-a-Service(BaaS) 입니다. 클라이언트에서 Supabase API를 직접 호출해 로그인, 데이터 관리 등을 할 수 있기 때문에, Next.js 15 API 앱라우터와 같은 백엔드 라우트를 사용할 필요는 없을 수도 있습니다. 그러나 프로젝트의 요구사항이나 보안 문제 등으로 서버 측 로직이 필요한 경우에는 백엔드 API(Next.js API 라우트)를 사용해야 합니다.

따라서, Supabase는 백엔드 구축을 하지 않아도 되는 서비스를 제공하지만, 필요에 따라 Next.js API 라우트나 다른 서버 측 코드와 혼합해서 사용할 수 있습니다.

2. Supabase와 Next.js 15 API 앱라우터를 혼합해 사용하면 세션 정보 저장이나 토큰 리프레쉬는 직접 코드로 작성해야 하는가?

네, 맞습니다. Next.js 15 API 앱라우터를 사용하여 백엔드에서 Supabase 로그인 API를 호출하면, 클라이언트에 자동으로 세션 정보가 저장되지 않습니다. Supabase의 세션 정보(액세스 토큰, 리프레시 토큰 등)는 클라이언트 측에서 자동으로 관리되지만, 서버 측에서 인증을 처리하는 경우에는 세션 관리나 토큰 리프레쉬를 직접 구현해야 합니다.

이 경우, 해야 할 일:

1. 액세스 토큰과 리프레시 토큰을 백엔드에서 직접 관리:
   • 로그인 후, access_token과 refresh_token을 응답으로 전달받고, 이를 세션 스토리지나 쿠키에 저장하여 클라이언트에서 세션을 관리합니다.
   • 서버에서는 클라이언트의 요청을 받을 때마다 세션 정보를 확인하여, 만약 access_token이 만료되었으면, refresh_token을 사용하여 새로운 access_token을 발급받습니다.
2. 토큰 리프레시 처리:
   • 서버에서 리프레시 토큰을 사용하여 access_token을 갱신할 수 있는 로직을 추가해야 합니다.
   • 이를 위해 리프레시 토큰을 저장하고, 토큰 갱신 요청 시 Supabase의 auth.api.refreshAccessToken() 메서드를 호출하여 새로운 access_token을 발급받습니다.
3. 클라이언트에서 세션 정보 저장:
   • 서버에서 로그인 및 인증이 완료된 후, 클라이언트에 세션 정보를 반환하거나 쿠키에 저장하여 자동 로그인 및 인증을 유지할 수 있도록 합니다. 이때, 클라이언트가 서버와의 연결을 유지하면서 세션을 저장하고 리프레시 토큰을 사용해 주기적으로 갱신하는 방식입니다.

예시 코드:

API 라우트에서 로그인 처리:

import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs';

export default async function handler(req, res) {
  const supabase = createServerSupabaseClient({ req, res });

  const { email, password } = req.body;

  // 로그인 시도
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    return res.status(400).json({ error: error.message });
  }

  // 로그인 성공 시, 토큰 및 세션 저장
  res.status(200).json({ accessToken: data.access_token, refreshToken: data.refresh_token });
}

클라이언트에서 토큰 저장 및 세션 유지:

import { useState } from 'react';

const loginUser = async (email, password) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password }),
    headers: { 'Content-Type': 'application/json' },
  });
  const data = await res.json();

  if (data.accessToken) {
    // 로컬 스토리지에 토큰 저장
    localStorage.setItem('accessToken', data.accessToken);
    localStorage.setItem('refreshToken', data.refreshToken);
  } else {
    console.error('로그인 실패');
  }
};

결론:

1. Supabase는 백엔드를 대체하는 서비스로, Next.js API 라우트 없이도 클라이언트에서 직접 Supabase API를 호출하여 인증 및 데이터를 처리할 수 있습니다.
2. 백엔드와 클라이언트 간 세션 관리는 Next.js API 라우트에서 처리할 경우 직접 코드로 작성해야 하며, 세션 관리, 토큰 갱신 및 보안을 위해 추가적인 구현이 필요합니다.