clerk/clerk-react-router-patterns

clerk-react-router-patterns은(는) 무엇을 하나요?

React Router v7과 Clerk를 함께 사용하는 패턴 — rootAuthLoader, loaders 내 getAuth, clerkMiddleware, 보호된 라우트, SSR 사용자 데이터, 조직 전환. 다음 주제에서 트리거됩니다: react-router 인증, rootAuthLoader, getAuth loader, react-router 보호된 라우트, loader 인증, SSR 인증 react-router.

주요 개념

• rootAuthLoader: 애플리케이션의 루트에서 인증 상태를 로드하는 함수입니다.
• getAuth: loader 함수 내에서 현재 사용자의 인증 정보를 가져옵니다.
• clerkMiddleware: 요청 파이프라인에서 인증을 처리하는 미들웨어입니다.
• 보호된 라우트: 인증되지 않은 사용자가 접근하지 못하도록 보호하는 라우트입니다.
• SSR 사용자 데이터: 서버 사이드 렌더링 중에 사용자 데이터를 안전하게 전달합니다.
• 조직 전환: 사용자가 여러 조직 간 전환할 수 있도록 지원합니다.

사용 예제

rootAuthLoader 사용

import { rootAuthLoader } from "@clerk/react-router";
import { RootAuthLoader } from "@clerk/react-router/rootAuthLoader";

// app/root.tsx
export const loader = rootAuthLoader(({ request, params }) => {
  // 여기서 인증된 사용자 데이터에 접근할 수 있습니다.
  const { userId, sessionId, getToken } = request.auth;
  
  return { userData: { userId } };
});

getAuth in Loaders

import { getAuth } from "@clerk/react-router";

// app/routes/protected.tsx
export async function loader({ request }: { request: Request }) {
  const { userId } = getAuth(request);
  
  if (!userId) {
    throw new Response("Unauthorized", { status: 401 });
  }
  
  return { userId };
}

clerkMiddleware 설정

// app/middleware.ts
import { clerkMiddleware } from "@clerk/react-router";

export const middleware = clerkMiddleware();

// 선택적으로 보호할 라우트 패턴 지정
export const config = {
  matcher: ["/((?!_next|static|favicon.ico).*)"]
};

보호된 라우트 구현

import { getAuth } from "@clerk/react-router";
import { json, redirect } from "react-router";

// app/routes/dashboard.tsx
export async function loader({ request }: { request: Request }) {
  const { userId } = getAuth(request);
  
  if (!userId) {
    return redirect("/sign-in");
  }
  
  const user = await getUser(userId);
  return json({ user });
}

SSR 사용자 데이터 전달

// app/root.tsx
export async function loader() {
  const auth = await rootAuthLoader();
  return { auth };
}

export default function Root({ loaderData }: { loaderData: { auth: AuthState } }) {
  const { auth } = loaderData;
  
  return (
    <html>
      <head>... </head>
      <body>
        <ClerkProvider auth={auth}>
          <Outlet />
        </ClerkProvider>
      </body>
    </html>
  );
}

조직 전환 (Organization Switching)

import { useOrganization, useOrganizationList } from "@clerk/react-router";

function OrganizationSwitcher() {
  const { organization } = useOrganization();
  const { setActive, isLoaded } = useOrganizationList({
    userMemberships: { infinite: true }
  });
  
  if (!isLoaded) return null;
  
  return (
    <select
      value={organization?.id}
      onChange={(e) => {
        const org = e.target.value;
        setActive({ organization: org });
      }}
    >
      {organizationList?.map((orgMember) => (
        <option key={orgMember.organization.id} value={orgMember.organization.id}>
          {orgMember.organization.name}
        </option>
      ))}
    </select>
  );
}

참고 자료

• Clerk React Router SDK 문서
• React Router v7 공식 문서

트리거 조건

이 패턴들은 다음 키워드가 감지될 때 제공됩니다:

• react-router auth
• rootAuthLoader
• getAuth loader
• react-router protected route
• loader authentication
• SSR auth react-router