feat: Add react-router SDK (clerk#4621)

Co-authored-by: Robert Soriano <sorianorobertc@gmail.com>

Author: LekoArts

.changeset/clean-pigs-hope.md

@@ -0,0 +1,9 @@
+---
+'@clerk/react-router': patch
+---
+
+Initial beta release of `@clerk/react-router`.
+
+[React Router v7](https://remix.run/blog/react-router-v7) was released and Clerk's existing `@clerk/remix` SDK isn't compatible anymore. Thus the need for a brand new SDK came up. `@clerk/react-router` allows you to use React Router v7 + Clerk both in framework/library mode.
+
+Read the [React Router quickstart](https://clerk.com/docs/quickstarts/react-router) and [reference documenation](https://clerk.com/docs/references/react-router/overview) to learn more.

.github/workflows/validate-renovate-config.yml

@@ -28,4 +28,4 @@ jobs:
       - name: Validate Renovate Config
         env:
           RENOVATE_VERSION: 37.440.7 # Last version compatible with Node 18
-        run: pnpm dlx renovate@${{ env.RENOVATE_VERSION }} renovate-config-validator
+        run: npx --yes --package renovate@${{ env.RENOVATE_VERSION }} renovate-config-validator

integration/.keys.json.sample

@@ -14,5 +14,37 @@
   "core-2-all-enabled": {
     "pk": "",
     "sk": ""
+  },
+  "sessions-prod-1": {
+    "pk": "",
+    "sk": ""
+  },
+  "sessions-dev-1": {
+    "pk": "",
+    "sk": ""
+  },
+  "sessions-prod-2": {
+    "pk": "",
+    "sk": ""
+  },
+  "sessions-dev-2": {
+    "pk": "",
+    "sk": ""
+  },
+  "with-restricted-mode": {
+    "pk": "",
+    "sk": ""
+  },
+  "with-reverification": {
+    "pk": "",
+    "sk": ""
+  },
+  "with-legal-consent": {
+    "pk": "",
+    "sk": ""
+  },
+  "with-waitlist-mode": {
+    "pk": "",
+    "sk": ""
   }
 }

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { nuxt } from './nuxt';
 import { react } from './react';
+import { reactRouter } from './react-router';
 import { remix } from './remix';
 import { tanstack } from './tanstack';
 
@@ -22,6 +23,7 @@ export const appConfigs = {
   astro,
   tanstack,
   nuxt,
+  reactRouter,
   secrets: {
     instanceKeys,
   },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { nuxt } from './nuxt';
 import { react } from './react';
+import { reactRouter } from './react-router';
 import { remix } from './remix';
 import { tanstack } from './tanstack';
 import { vue } from './vue';
@@ -42,6 +43,7 @@ export const createLongRunningApps = () => {
     { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
     { id: 'vue.vite', config: vue.vite, env: envs.withCustomRoles },
     { id: 'nuxt.node', config: nuxt.node, env: envs.withCustomRoles },
+    { id: 'react-router.node', config: reactRouter.reactRouterNode, env: envs.withEmailCodes },
   ] as const;
 
   const apps = configs.map(longRunningApplication);

integration/presets/react-router.ts

@@ -0,0 +1,17 @@
+import { constants } from '../constants';
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const reactRouterNode = applicationConfig()
+  .setName('react-router-node')
+  .useTemplate(templates['react-router-node'])
+  .setEnvFormatter('public', key => `VITE_${key}`)
+  .addScript('setup', 'pnpm install')
+  .addScript('dev', 'pnpm dev')
+  .addScript('build', 'pnpm build')
+  .addScript('serve', 'pnpm start')
+  .addDependency('@clerk/react-router', constants.E2E_CLERK_VERSION || '*');
+
+export const reactRouter = {
+  reactRouterNode,
+} as const;

integration/templates/index.ts

@@ -18,6 +18,7 @@ export const templates = {
   'tanstack-router': resolve(__dirname, './tanstack-router'),
   'vue-vite': resolve(__dirname, './vue-vite'),
   'nuxt-node': resolve(__dirname, './nuxt-node'),
+  'react-router-node': resolve(__dirname, './react-router-node'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/react-router-node/.gitignore

@@ -0,0 +1,8 @@
+.env
+!.env.example
+.DS_Store
+.react-router
+build
+node_modules
+*.tsbuildinfo
+.seccorc

integration/templates/react-router-node/README.md

@@ -0,0 +1,3 @@
+# react-router
+
+Example playground for React Router (Framework mode) and Clerk.

integration/templates/react-router-node/app/root.tsx

@@ -0,0 +1,66 @@
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
+import { rootAuthLoader } from '@clerk/react-router/ssr.server';
+import { ClerkProvider } from '@clerk/react-router';
+
+import type { Route } from './+types/root';
+
+export async function loader(args: Route.LoaderArgs) {
+  return rootAuthLoader(args);
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en'>
+      <head>
+        <meta charSet='utf-8' />
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1'
+        />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App({ loaderData }: Route.ComponentProps) {
+  return (
+    <ClerkProvider loaderData={loaderData}>
+      <main>
+        <Outlet />
+      </main>
+    </ClerkProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error';
+    details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main>
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre>
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

integration/templates/react-router-node/app/routes.ts

@@ -0,0 +1,8 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/home.tsx'),
+  route('sign-in/*', 'routes/sign-in.tsx'),
+  route('sign-up/*', 'routes/sign-up.tsx'),
+  route('protected', 'routes/protected.tsx'),
+] satisfies RouteConfig;

integration/templates/react-router-node/app/routes/home.tsx

@@ -0,0 +1,16 @@
+import { SignedIn, SignedOut, UserButton } from '@clerk/react-router';
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+  return (
+    <div>
+      <UserButton />
+      <SignedIn>SignedIn</SignedIn>
+      <SignedOut>SignedOut</SignedOut>
+    </div>
+  );
+}

integration/templates/react-router-node/app/routes/protected.tsx

@@ -0,0 +1,21 @@
+import { redirect } from 'react-router';
+import { getAuth } from '@clerk/react-router/ssr.server';
+import type { Route } from './+types/profile';
+
+export async function loader(args: Route.LoaderArgs) {
+  const { userId } = await getAuth(args);
+
+  if (!userId) {
+    return redirect('/sign-in?redirect_url=' + args.request.url);
+  }
+
+  return {};
+}
+
+export default function Profile(args: Route.ComponentProps) {
+  return (
+    <div>
+      <h1>Protected</h1>
+    </div>
+  );
+}

integration/templates/react-router-node/app/routes/sign-in.tsx

@@ -0,0 +1,14 @@
+import { SignIn } from '@clerk/react-router';
+
+export default function SignInPage() {
+  return (
+    <div>
+      <h1>Sign In route</h1>
+      <SignIn
+        routing={'path'}
+        path={'/sign-in'}
+        signUpUrl={'/sign-up'}
+      />
+    </div>
+  );
+}

integration/templates/react-router-node/app/routes/sign-up.tsx

@@ -0,0 +1,14 @@
+import { SignUp } from '@clerk/react-router';
+
+export default function SignUpPage() {
+  return (
+    <div>
+      <h1>Sign Up route</h1>
+      <SignUp
+        routing={'path'}
+        path={'/sign-up'}
+        signInUrl={'/sign-in'}
+      />
+    </div>
+  );
+}

integration/templates/react-router-node/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "clerk-react-router-quickstart",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev --port $PORT",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc --build --noEmit"
+  },
+  "dependencies": {
+    "@clerk/react-router": "latest",
+    "@react-router/node": "^7.0.2",
+    "@react-router/serve": "^7.0.2",
+    "isbot": "^5.1.17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.0.2"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.0.2",
+    "@types/node": "^20",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.2"
+  }
+}

integration/templates/react-router-node/public/favicon.ico

@@ -0,0 +1,7 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config;

integration/templates/react-router-node/react-router.config.ts

@@ -0,0 +1,23 @@
+{
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

integration/templates/react-router-node/tsconfig.json

@@ -0,0 +1,15 @@
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+  ],
+  server: {
+    port: Number(process.env.PORT),
+  },
+});