chore: replace CRA with Vite in react-router example

.github/workflows/integration.yml

@@ -27,12 +27,11 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      SKIP_PREFLIGHT_CHECK: true
       CYPRESS_USER_EMAIL: ${{secrets.CYPRESS_USER_EMAIL}}
       CYPRESS_USER_PASSWORD: ${{secrets.CYPRESS_USER_PASSWORD}}
-      REACT_APP_DOMAIN: ${{secrets.TEST_DOMAIN}}
-      REACT_APP_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
-      REACT_APP_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
+      VITE_DOMAIN: ${{secrets.TEST_DOMAIN}}
+      VITE_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
+      VITE_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
       GATSBY_DOMAIN: ${{secrets.TEST_DOMAIN}}
       GATSBY_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
       GATSBY_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
@@ -69,20 +68,20 @@ jobs:
       - name: Install examples
         run: npm run install:examples
 
-      - name: Install local SDK into CRA example
-        run: npm install --prefix=examples/cra-react-router $(ls auth0-auth0-react-*.tgz)
+      - name: Install local SDK into Vite example
+        run: npm install --prefix=examples/vite-react-router $(ls auth0-auth0-react-*.tgz)
 
-      - name: Build CRA example (production)
-        run: npm run build --prefix=examples/cra-react-router
+      - name: Build Vite example (production)
+        run: npm run build --prefix=examples/vite-react-router
 
       - name: Build Next.js example (production)
         run: npm run build --prefix=examples/nextjs-app
 
       - name: Build Gatsby example (production)
         run: npm run build --prefix=examples/gatsby-app
 
-      - name: Run integration test (CRA)
-        run: npm run test:cra
+      - name: Run integration test (Vite)
+        run: npm run test:vite
 
       - name: Run integration test (NextJS)
         run: npm run test:nextjs

EXAMPLES.md

@@ -4,7 +4,7 @@
 - [Protect a Route](#protect-a-route)
 - [Call an API](#call-an-api)
 - [Use Auth0 outside of React](#use-auth0-outside-of-react)
-- [Protecting a route in a `react-router-dom v6` app](#protecting-a-route-in-a-react-router-dom-v6-app)
+- [Protecting a route in a `react-router-dom v7` app](#protecting-a-route-in-a-react-router-dom-v7-app)
 - [Protecting a route in a Gatsby app](#protecting-a-route-in-a-gatsby-app)
 - [Protecting a route in a Next.js app (in SPA mode)](#protecting-a-route-in-a-nextjs-app-in-spa-mode)
 - [Using with the Next.js App Router (Server Components)](#using-with-the-nextjs-app-router-server-components)
@@ -275,7 +275,7 @@ export default DelegatedAction;
 [Token Exchange Documentation](https://auth0.com/docs/authenticate/login/token-exchange)
 [RFC 8693 Spec](https://tools.ietf.org/html/rfc8693)
 
-## Protecting a route in a `react-router-dom v6` app
+## Protecting a route in a `react-router-dom v7` app
 
 We need to access the `useNavigate` hook so we can use `navigate` in `onRedirectCallback` to return us to our `returnUrl`.
 
@@ -341,7 +341,7 @@ export default function App() {
 }
 ```
 
-See [react-router example app](./examples/cra-react-router)
+See [react-router example app](./examples/vite-react-router)
 
 ## Protecting a route in a Gatsby app
 

examples/README.md

@@ -8,7 +8,7 @@
 
 ### Follow the steps to run each of the example applications:
 
-- [Create React App](./cra-react-router/README.md)
+- [Vite + React Router](./vite-react-router/README.md)
 - [Gatsby](./gatsby-app/README.md)
 - [NextJS](./nextjs-app/README.md)
 - [Users API](./users-api/README.md)

examples/vite-react-router/.env.sample

@@ -0,0 +1,4 @@
+VITE_DOMAIN=your-tenant.auth0.com
+VITE_CLIENT_ID=yourclientid
+VITE_AUDIENCE=https://api.example.com/users
+VITE_API_PORT=3001

examples/cra-react-router/README.md → examples/vite-react-router/README.md

@@ -4,13 +4,12 @@ This is an example of using `@auth0/auth0-react` with `react-router`.
 
 Follow the steps in [examples/README.md](../README.md) to setup an Auth0 application and API.
 
-Add the file `./examples/cra-react-router/.env` with the `domain` and `clientId` of the application and `audience` (your API identifier)
+Add the file `./examples/vite-react-router/.env` with the `domain` and `clientId` of the application and `audience` (your API identifier)
 
 ```dotenv
-REACT_APP_DOMAIN=your_domain
-REACT_APP_CLIENT_ID=your_client_id
-REACT_APP_AUDIENCE=your_audience
-SKIP_PREFLIGHT_CHECK=true # To workaround issues with nesting create-react-app in another package
+VITE_DOMAIN=your_domain
+VITE_CLIENT_ID=your_client_id
+VITE_AUDIENCE=your_audience
 ```
 
 Run `npm start` to start the application at http://localhost:3000

examples/cra-react-router/public/index.html → examples/vite-react-router/index.html

@@ -2,13 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Auth0 React SDK example with React Router"
     />
-
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
@@ -20,5 +19,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

examples/vite-react-router/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "vite-react-router",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@auth0/auth0-react": "2.2.4",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^7.18.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.1.1",
+    "typescript": "^5.0.0",
+    "vite": "^8.2.2"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build"
+  }
+}

examples/cra-react-router/src/Users.tsx → examples/vite-react-router/src/Users.tsx

@@ -3,15 +3,15 @@ import React from 'react';
 import { Loading } from './Loading';
 import { Error } from './Error';
 
-const PORT = process.env.REACT_APP_API_PORT || 3001;
+const PORT = import.meta.env.VITE_API_PORT || 3001;
 
 export function Users() {
   const {
     loading,
     error,
     data: users = [],
   } = useApi(`http://localhost:${PORT}/users`, {
-    audience: process.env.REACT_APP_AUDIENCE,
+    audience: import.meta.env.VITE_AUDIENCE,
     scope: 'profile email read:users',
   });
 

examples/cra-react-router/src/index.tsx → examples/vite-react-router/src/index.tsx

@@ -34,10 +34,10 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Auth0ProviderWithRedirectCallback
-        domain={process.env.REACT_APP_DOMAIN}
-        clientId={process.env.REACT_APP_CLIENT_ID}
+        domain={import.meta.env.VITE_DOMAIN}
+        clientId={import.meta.env.VITE_CLIENT_ID}
         authorizationParams={{
-          audience: process.env.REACT_APP_AUDIENCE,
+          audience: import.meta.env.VITE_AUDIENCE,
           scope: 'profile email read:users',
           redirect_uri: window.location.origin,
         }}

examples/vite-react-router/src/react-app-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DOMAIN: string;
+  readonly VITE_CLIENT_ID: string;
+  readonly VITE_AUDIENCE: string;
+  readonly VITE_API_PORT: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

examples/cra-react-router/tsconfig.json → examples/vite-react-router/tsconfig.json

@@ -1,20 +1,20 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
-    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "vite.config.ts"]
 }

examples/vite-react-router/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '127.0.0.1',
+    port: 3000,
+    strictPort: true,
+  },
+});

package.json

@@ -28,18 +28,18 @@
     "test:dist:only": "jest use-client-directive",
     "prepack": "npm run build",
     "docs": "typedoc --options typedoc.js src",
-    "install:examples": "npm i --prefix=examples/cra-react-router --no-package-lock --legacy-peer-deps && npm i --prefix=examples/gatsby-app --no-package-lock --legacy-peer-deps && npm i --prefix=examples/nextjs-app --no-package-lock --legacy-peer-deps && npm ci --prefix=examples/users-api",
-    "start:cra": "npm start --prefix=examples/cra-react-router",
+    "install:examples": "npm i --prefix=examples/vite-react-router --no-package-lock --legacy-peer-deps && npm i --prefix=examples/gatsby-app --no-package-lock --legacy-peer-deps && npm i --prefix=examples/nextjs-app --no-package-lock --legacy-peer-deps && npm ci --prefix=examples/users-api",
+    "start:vite": "npm start --prefix=examples/vite-react-router",
     "start:gatsby": "npm start --prefix=examples/gatsby-app",
     "start:nextjs": "npm run dev --prefix=examples/nextjs-app",
     "start:api": "npm start --prefix=examples/users-api",
-    "test:cra": "start-server-and-test start:api 3001 start:cra http-get://127.0.0.1:3000 cypress:run",
-    "test:cra:watch": "start-server-and-test start:api 3001 start:cra 3000 cypress:open",
+    "test:vite": "start-server-and-test start:api 3001 start:vite http-get://127.0.0.1:3000 cypress:run",
+    "test:vite:watch": "start-server-and-test start:api 3001 start:vite 3000 cypress:open",
     "test:gatsby": "start-server-and-test start:api 3001 start:gatsby http-get://localhost:3000 cypress:run",
     "test:gatsby:watch": "start-server-and-test start:api 3001 start:gatsby 3000 cypress:open",
     "test:nextjs": "start-server-and-test start:api 3001 start:nextjs 3000 cypress:run",
     "test:nextjs:watch": "start-server-and-test start:api 3001 start:nextjs 3000 cypress:open",
-    "test:integration": "npm run test:cra && npm run test:gatsby && npm run test:nextjs",
+    "test:integration": "npm run test:vite && npm run test:gatsby && npm run test:nextjs",
     "cypress:run": "cypress run --spec 'cypress/e2e/smoke.cy.ts'",
     "cypress:open": "cypress open"
   },