인증

이 섹션에서는 레이아웃과 가드를 사용하여 경로를 보호하는 방법에 대해 알아봅니다.

Supaplate는 Supabase의 인증 기능을 지원합니다.

이메일/비밀번호 인증, 소셜 로그인, 매직링크 인증, OTP 인증을 지원합니다.

Setup

Supabase의 인증 가이드를 따라 사용하려는 인증 제공업체를 활성화하세요.

Supabase는 로그인 및 회원가입 페이지에 카카오와 깃허브 두 가지 소셜 인증 버튼이 생성되어 있지만 바로 사용할 수 있는 것은 아니므로, 별도로 설정해야 합니다.

Layouts

Supaplate에는 빠르게 경로를 보호하는 방법을 제공하기 위해 바로 사용할 수 있는 두 개의 레이아웃 파일이 포함되어 있습니다: './app/core/layouts/private.layout.tsx'와 './app/core/layouts/public.layout.tsx'입니다.

위 두 가지 레이아웃은 추가 UI 없이, 유저의 인증 상태를 확인하는 로더만 있습니다.

private.layout.tsx

Supabase 클라이언트로부터 유저 정보를 가져오고, 정보가 null인 경우 즉, 유저가 로그인하지 않은 경우 로그인 페이지로 리디렉션합니다.

이러한 방식은 로그인한 유저만 접근할 수 있도록 경로를 보호하는 데 적합합니다.

public.layout.tsx

Supabase 클라이언트로부터 유저 정보를 가져오고, 정보가 null이 아닌 경우, 즉 유저가 로그인한 경우 /dashboard 경로로 리디렉션합니다.

이러한 방식은 로그인 및 회원가입 페이지와 같이 로그아웃한 유저만 접근 가능한 경로에 적합합니다.

레이아웃 사용 방법

레이아웃을 사용하려면 routes.ts 파일에서 경로를 레이아웃에 래핑해야 합니다.

// example routes.ts
import {
  type RouteConfig,
  index,
  layout,
  prefix,
  route,
} from '@react-router/dev/routes'

export default [
  index('home.tsx'),
  layout('core/layouts/private.layout.tsx', [
    route('/dashboard', 'dashboard.tsx'),
  ]),
  layout('core/layouts/public.layout.tsx', [
    route('/login', 'login.tsx'),
    route('/register', 'register.tsx'),
  ]),
] satisfies RouteConfig

경로의 구조상 다른 경로에 동일한 레이아웃을 다시 사용해야 하는 경우가 있는데, 이 경우 React 라우터가 오류를 발생시키지 않도록 id를 추가해야 합니다.

// example routes.ts
import {
  type RouteConfig,
  index,
  layout,
  prefix,
  route,
} from '@react-router/dev/routes'

export default [
  index('home.tsx'),
  layout('core/layouts/private.layout.tsx', [
    route('/dashboard', 'dashboard.tsx'),
  ]),
  layout('core/layouts/public.layout.tsx', [
    route('/login', 'login.tsx'),
    route('/register', 'register.tsx'),
  ]),
  ...prefix('blog', [
    layout('core/layouts/private.layout.tsx', { id: 'blog-private' }, [
      route('/members', 'members.tsx'),
    ]),
    layout('core/layouts/public.layout.tsx', { id: 'blog-public' }, [
      route('/public', 'public.tsx'),
    ]),
  ]),
] satisfies RouteConfig

API Route 인증

레이아웃을 사용하여 API 경로를 보호할 수도 있지만, API 경로를 공개로 설정하고 './app/core/guards.server.ts'의 가드를 사용하여 경로를 보호할 것을 권장합니다.

// ./app/core/guards.server.ts
import { data, unstable_RouterContextProvider } from 'react-router'

import { userContext } from './contexts.server'

export function requireAuthentication(context: unstable_RouterContextProvider) {
  const user = context.get(userContext)
  if (!user) {
    throw data(null, { status: 401 })
  }
}

export function requireMethod(method: string) {
  return (request: Request) => {
    if (request.method !== method) {
      throw data(null, { status: 405 })
    }
  }
}

requireAuthentication 과 requireMethod. 라는 두 가지 가드가 있습니다.

유저가 인증되지 않은 경우 requireAuthentication 가드는 401 에러를 발생시킵니다.

requireMethod 가드는 요청이 들어오면, 해당 메서드가 미리 지정된 특정 메서드인지 확인합니다. 아닐시에 405 에러를 발생시킵니다.

다음과 같은 방식으로 API 경로를 보호할 수 있습니다:

// example ./app/features/users/api/get-user.ts
import { requireAuthentication, requireMethod } from '~/core/guards.server'

export async function loader({ context }: Route.LoaderArgs) {
  const [client] = makeServerClient(request)
  await requireAuthentication(client)
  // your loader code here
}

export async function action({ context }: Route.ActionArgs) {
  requireMethod('POST')(request)
  const [client] = makeServerClient(request)
  await requireAuthentication(client)
  // your action code here
}

소셜 로그인 트리거

설정 섹션으로 돌아가서, npm db:migrate를 처음 실행할 때 handle_sign_up 함수와 auth.users 테이블에 트리거를 만드세요.

CREATE OR REPLACE FUNCTION handle_sign_up()
RETURNS TRIGGER
LANGUAGE PLPGSQL
SECURITY DEFINER
SET SEARCH_PATH = ''
AS $$
BEGIN
    IF new.raw_app_meta_data IS NOT NULL AND new.raw_app_meta_data ? 'provider' THEN
        IF new.raw_app_meta_data ->> 'provider' = 'email' OR new.raw_app_meta_data ->> 'provider' = 'phone' THEN
            IF new.raw_user_meta_data ? 'name' THEN
                INSERT INTO public.profiles (profile_id, name, marketing_consent)
                VALUES (new.id, new.raw_user_meta_data ->> 'name', (new.raw_user_meta_data ->> 'marketing_consent')::boolean);
            ELSE
                INSERT INTO public.profiles (profile_id, name, marketing_consent)
                VALUES (new.id, 'Anonymous', TRUE);
            END IF;
        ELSE
            INSERT INTO public.profiles (profile_id, name, avatar_url, marketing_consent)
            VALUES (new.id, new.raw_user_meta_data ->> 'full_name', new.raw_user_meta_data ->> 'avatar_url', TRUE);
        END IF;
    END IF;
    RETURN NEW;
END;
$$;

CREATE TRIGGER handle_sign_up
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION handle_sign_up();

이 트리거와 함수는 유저가 가입할 때 profiles 테이블에 프로필을 만드는 데 사용됩니다.

트리거는 auth.users 테이블에 행이 삽입된 후 실행되도록 설정 합니다

유저가 유저 아이디와 비밀번호로 계정을 만들 때 마케팅 이메일 수신에 동의할 수 있습니다(profiles 테이블의 marketing_consent 열).

소셜 인증 제공업체에 가입할 때 marketing_consent 열은 기본적으로 'TRUE'로 설정되며, 'handle_sign_up' 함수에서 이를 변경할 수 있습니다.

또한 유저는 /account/edit 페이지에서 marketing_consent 열을 업데이트할 수 있습니다.