feat: add react router v7 (#978)

fixed #964

Author: wangsijie

.changeset/dry-hornets-perform.md

@@ -0,0 +1,10 @@
+---
+"@logto/react-router-sample": major
+"@logto/react-router": major
+---
+
+add react-router SDK
+
+Migrate from Remix to React Router, please refer to the [official React Router migration documentation](https://reactrouter.com/upgrading/remix).
+
+And you can check the new sample project to see how to use the SDK.

packages/react-router-sample/.gitignore

@@ -0,0 +1 @@
+.react-router

packages/remix-sample/README.md renamed to packages/react-router-sample/README.md

@@ -1,6 +1,6 @@
-# Remix Sample
+# React Router Sample
 
-This is a sample project for Logto's Remix SDK.
+This is a sample project for Logto's React Router SDK.
 
 ## Configuration
 

packages/remix-sample/app/root.tsx renamed to packages/react-router-sample/app/root.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable consistent-default-export-name/default-export-match-filename */
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 
 const App = () => {
   return (

packages/react-router-sample/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from '@react-router/dev/routes';
+import { flatRoutes } from '@react-router/fs-routes';
+
+export default flatRoutes() satisfies RouteConfig;

packages/remix-sample/app/routes/_index.tsx renamed to packages/react-router-sample/app/routes/_index.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable consistent-default-export-name/default-export-match-filename */
-import { type LogtoContext } from '@logto/remix';
-import { type LoaderFunction } from '@remix-run/node';
-import { json, Link, useLoaderData } from '@remix-run/react';
+import { type LogtoContext } from '@logto/react-router';
+import { Link, type LoaderFunctionArgs } from 'react-router';
 
 import { logto } from '../services/auth.server';
 
 type LoaderResponse = {
   readonly context: LogtoContext;
 };
 
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const context = await logto.getContext({ getAccessToken: false })(request);
 
   // You can uncomment this to protect the route and
@@ -19,11 +18,11 @@ export const loader: LoaderFunction = async ({ request }) => {
   //   return redirect('/api/logto/sign-in');
   // }
 
-  return json<LoaderResponse>({ context });
+  return { context };
 };
 
-const Home = () => {
-  const { context } = useLoaderData<LoaderResponse>();
+const Home = ({ loaderData }: { readonly loaderData: LoaderResponse }) => {
+  const { context } = loaderData;
   const { isAuthenticated, claims } = context;
 
   return (

packages/remix-sample/app/routes/access-token.tsx renamed to packages/react-router-sample/app/routes/access-token.tsx

@@ -1,15 +1,14 @@
 // eslint-disable-next-line consistent-default-export-name/default-export-match-filename
-import type { LogtoContext } from '@logto/remix';
-import { type LoaderFunction, json, redirect } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import type { LogtoContext } from '@logto/react-router';
+import { redirect, type LoaderFunctionArgs } from 'react-router';
 
 import { logto } from '../services/auth.server';
 
 type LoaderResponse = {
   readonly context: LogtoContext;
 };
 
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const context = await logto.getContext({ getAccessToken: true })(request);
 
   if (!context.isAuthenticated) {
@@ -19,13 +18,13 @@ export const loader: LoaderFunction = async ({ request }) => {
   // You can now use the access token here,
   // for demonstration purposes, we'll just pass it back to the client
 
-  return json<LoaderResponse>({ context });
+  return { context };
 };
 
-const AccessToken = () => {
+const AccessToken = ({ loaderData }: { readonly loaderData: LoaderResponse }) => {
   const {
     context: { accessToken },
-  } = useLoaderData<LoaderResponse>();
+  } = loaderData;
 
   return (
     <div>

packages/remix-sample/app/routes/api.logto.$action.ts renamed to packages/react-router-sample/app/routes/api.logto.$action.ts

@@ -1,29 +1,28 @@
 // eslint-disable-next-line consistent-default-export-name/default-export-match-filename
 import type { LogtoContext } from '@logto/remix';
-import { type LoaderFunction, json, redirect } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import { type LoaderFunctionArgs, redirect } from 'react-router';
 
 import { logto } from '../services/auth.server';
 
 type LoaderResponse = {
   readonly context: LogtoContext;
 };
 
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   // This will fetch the user info from Logto every time the route is loaded
   const context = await logto.getContext({ fetchUserInfo: true })(request);
 
   if (!context.isAuthenticated) {
     return redirect('/api/logto/sign-in');
   }
 
-  return json<LoaderResponse>({ context });
+  return { context };
 };
 
-const UserInfo = () => {
+const UserInfo = ({ loaderData }: { readonly loaderData: LoaderResponse }) => {
   const {
     context: { userInfo },
-  } = useLoaderData<LoaderResponse>();
+  } = loaderData;
 
   return (
     <div>

packages/remix-sample/app/routes/user-info.tsx renamed to packages/react-router-sample/app/routes/user-info.tsx

@@ -1,5 +1,5 @@
-import { makeLogtoRemix } from '@logto/remix';
-import { createCookieSessionStorage } from '@remix-run/node';
+import { makeLogtoReactRouter } from '@logto/react-router';
+import { createCookieSessionStorage } from 'react-router';
 
 const sessionStorage = createCookieSessionStorage({
   cookie: {
@@ -14,7 +14,7 @@ if (!process.env.LOGTO_ENDPOINT || !process.env.LOGTO_APP_ID || !process.env.LOG
   throw new Error('Missing Logto environment variables');
 }
 
-export const logto = makeLogtoRemix(
+export const logto = makeLogtoReactRouter(
   {
     endpoint: process.env.LOGTO_ENDPOINT,
     appId: process.env.LOGTO_APP_ID,

packages/remix-sample/app/services/auth.server.ts renamed to packages/react-router-sample/app/services/auth.server.ts

@@ -1,25 +1,26 @@
 {
-  "name": "@logto/remix-sample",
-  "version": "0.0.1",
+  "name": "@logto/react-router-sample",
+  "version": "0.0.0",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "build": "remix vite:build",
-    "dev": "remix vite:dev",
-    "start": "remix-serve build/server/index.js",
-    "typecheck": "tsc"
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
-    "@logto/remix": "workspace:*",
-    "@remix-run/node": "^2.16.5",
-    "@remix-run/react": "^2.16.5",
-    "@remix-run/serve": "^2.16.5",
+    "@logto/react-router": "workspace:*",
+    "@react-router/fs-routes": "^7.6.2",
+    "@react-router/node": "^7.5.3",
+    "@react-router/serve": "^7.5.3",
     "isbot": "^4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "^7.5.3"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.16.5",
+    "@react-router/dev": "^7.5.3",
     "@silverhand/eslint-config": "^6.0.1",
     "@silverhand/eslint-config-react": "^6.0.2",
     "@silverhand/ts-config": "^6.0.0",

packages/remix-sample/package.json renamed to packages/react-router-sample/package.json

@@ -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;

packages/react-router-sample/react-router.config.ts

@@ -0,0 +1,7 @@
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [reactRouter(), tsconfigPaths()],
+});

packages/remix-sample/tsconfig.json renamed to packages/react-router-sample/tsconfig.json

@@ -0,0 +1,144 @@
+# Logto React Router SDK
+
+[![Version](https://img.shields.io/npm/v/@logto/react-router)](https://www.npmjs.com/package/@logto/react-router)
+[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
+[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
+
+The Logto React Router SDK written in TypeScript.
+
+> **Note:** This SDK has been migrated from Remix to React Router. For detailed migration guide, please refer to the [official React Router migration documentation](https://reactrouter.com/upgrading/remix).
+
+## Installation
+
+**Note:** This package requires Node.js version 20 or higher.
+
+### Using npm
+
+```bash
+npm install @logto/react-router
+```
+
+### Using yarn
+
+```bash
+yarn add @logto/react-router
+```
+
+### Using pnpm
+
+```bash
+pnpm add @logto/react-router
+```
+
+## Usage
+
+Before initializing the SDK, we have to create a `SessionStorage` instance which takes care of the session persistence. In our case, we want to use a cookie-based session:
+
+```ts
+// services/auth.server.ts
+import { makeLogtoReactRouter } from '@logto/react-router';
+import { createCookieSessionStorage } from 'react-router';
+
+const sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: 'logto-session',
+    maxAge: 14 * 24 * 60 * 60,
+    secrets: ['secr3tSession'],
+  },
+});
+
+export const logto = makeLogtoReactRouter(
+  {
+    endpoint: process.env.LOGTO_ENDPOINT!,
+    appId: process.env.LOGTO_APP_ID!,
+    appSecret: process.env.LOGTO_APP_SECRET!,
+    baseUrl: process.env.LOGTO_BASE_URL!,
+  },
+  { sessionStorage }
+);
+```
+
+Whereas the environment variables reflect the respective configuration of the application in Logto.
+
+### Setup file-based routing
+
+```ts
+// app/routes.ts
+import { type RouteConfig } from '@react-router/dev/routes';
+import { flatRoutes } from '@react-router/fs-routes';
+
+export default flatRoutes() satisfies RouteConfig;
+```
+
+This will generate the routes for you based on the files in the `app/routes` directory.
+
+### Mounting the authentication route handlers
+
+The SDK ships with a convenient function that mounts the authentication routes: sign-in, sign-in callback and the sign-out route. Create a file `routes/api.logto.$action.ts`
+
+```ts
+// routes/api.logto.$action.ts
+
+import { logto } from '../../services/auth.server';
+
+export const loader = logto.handleAuthRoutes({
+  'sign-in': {
+    path: '/api/logto/sign-in',
+    redirectBackTo: '/api/logto/callback',
+  },
+  'sign-in-callback': {
+    path: '/api/logto/callback',
+    redirectBackTo: '/',
+  },
+  'sign-out': {
+    path: '/api/logto/sign-out',
+    redirectBackTo: '/',
+  },
+  'sign-up': {
+    path: '/api/logto/sign-up',
+    redirectBackTo: '/api/logto/callback',
+  },
+});
+```
+
+As you can see, the mount process is configurable and you can adjust it for your particular route structure. The whole URL path structure can be customized via the passed configuration object.
+
+When mounting the routes as described above, you can navigate your browser to `/api/logto/sign-in` and you should be redirected to your Logto instance where you have to authenticate then.
+
+### Get the authentication context
+
+A typical use case is to fetch the _authentication context_ which contains information about the respective user. With that information, it is possible to decide if the user is authenticated or not. The SDK exposes a function that can be used in a React Router `loader` function:
+
+```ts
+// app/routes/_index.tsx
+import { type LogtoContext } from '@logto/react-router';
+import { Link, type LoaderFunctionArgs } from 'react-router';
+
+import { logto } from '../../services/auth.server';
+
+type LoaderResponse = {
+  readonly context: LogtoContext;
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const context = await logto.getContext({ getAccessToken: false })(request);
+
+  if (!context.isAuthenticated) {
+    return redirect('/api/logto/sign-in');
+  }
+
+  return { context };
+};
+
+const Home = ({ loaderData }: { readonly loaderData: LoaderResponse }) => {
+  const { context } = loaderData;
+  const { isAuthenticated, claims } = context;
+
+  return <div>Protected Route.</div>;
+};
+```
+
+## Resources
+
+[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

packages/react-router-sample/vite.config.ts

@@ -0,0 +1 @@
+export { default } from '../../jest.config.js';