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,