diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml index 65474e3d..e8924af5 100644 --- a/.github/workflows/integration.yml +++ b/.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,11 +68,11 @@ 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 @@ -81,8 +80,8 @@ jobs: - 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 diff --git a/EXAMPLES.md b/EXAMPLES.md index 9c0fa276..462ba23b 100644 --- a/EXAMPLES.md +++ b/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 diff --git a/examples/README.md b/examples/README.md index 135c7f0f..c2c9a537 100644 --- a/examples/README.md +++ b/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) diff --git a/examples/cra-react-router/.env.sample b/examples/cra-react-router/.env.sample deleted file mode 100644 index 9814b8a3..00000000 --- a/examples/cra-react-router/.env.sample +++ /dev/null @@ -1,5 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true -REACT_APP_DOMAIN=your-tenant.auth0.com -REACT_APP_CLIENT_ID=yourclientid -REACT_APP_AUDIENCE=https://api.example.com/users -REACT_APP_API_PORT=3001 diff --git a/examples/cra-react-router/package.json b/examples/cra-react-router/package.json deleted file mode 100644 index a320dc8d..00000000 --- a/examples/cra-react-router/package.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "name": "cra-react-router", - "version": "0.1.0", - "private": true, - "dependencies": { - "@auth0/auth0-react": "2.2.4", - "@types/node": "^17.0.29", - "@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", - "react-scripts": "^5.0.1", - "typescript": "^4.6.3" - }, - "devDependencies": { - "ajv": "8.16.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/examples/cra-react-router/src/react-app-env.d.ts b/examples/cra-react-router/src/react-app-env.d.ts deleted file mode 100644 index 7fa3cea9..00000000 --- a/examples/cra-react-router/src/react-app-env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare namespace NodeJS { - interface ProcessEnv { - REACT_APP_DOMAIN: string; - REACT_APP_CLIENT_ID: string; - REACT_APP_AUDIENCE: string; - REACT_APP_API_PORT: number; - } -} diff --git a/examples/vite-react-router/.env.sample b/examples/vite-react-router/.env.sample new file mode 100644 index 00000000..cdb18d00 --- /dev/null +++ b/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 diff --git a/examples/cra-react-router/.gitignore b/examples/vite-react-router/.gitignore similarity index 100% rename from examples/cra-react-router/.gitignore rename to examples/vite-react-router/.gitignore diff --git a/examples/cra-react-router/README.md b/examples/vite-react-router/README.md similarity index 52% rename from examples/cra-react-router/README.md rename to examples/vite-react-router/README.md index 587bb410..7d09b92b 100644 --- a/examples/cra-react-router/README.md +++ b/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 diff --git a/examples/cra-react-router/public/index.html b/examples/vite-react-router/index.html similarity index 78% rename from examples/cra-react-router/public/index.html rename to examples/vite-react-router/index.html index 0e7ba8bb..0efa8b48 100644 --- a/examples/cra-react-router/public/index.html +++ b/examples/vite-react-router/index.html @@ -2,13 +2,12 @@ - + -
+ diff --git a/examples/vite-react-router/package.json b/examples/vite-react-router/package.json new file mode 100644 index 00000000..8c442fdb --- /dev/null +++ b/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" + } +} diff --git a/examples/cra-react-router/public/favicon.ico b/examples/vite-react-router/public/favicon.ico similarity index 100% rename from examples/cra-react-router/public/favicon.ico rename to examples/vite-react-router/public/favicon.ico diff --git a/examples/cra-react-router/src/App.css b/examples/vite-react-router/src/App.css similarity index 100% rename from examples/cra-react-router/src/App.css rename to examples/vite-react-router/src/App.css diff --git a/examples/cra-react-router/src/App.tsx b/examples/vite-react-router/src/App.tsx similarity index 100% rename from examples/cra-react-router/src/App.tsx rename to examples/vite-react-router/src/App.tsx diff --git a/examples/cra-react-router/src/Error.tsx b/examples/vite-react-router/src/Error.tsx similarity index 100% rename from examples/cra-react-router/src/Error.tsx rename to examples/vite-react-router/src/Error.tsx diff --git a/examples/cra-react-router/src/Loading.tsx b/examples/vite-react-router/src/Loading.tsx similarity index 100% rename from examples/cra-react-router/src/Loading.tsx rename to examples/vite-react-router/src/Loading.tsx diff --git a/examples/cra-react-router/src/Nav.tsx b/examples/vite-react-router/src/Nav.tsx similarity index 100% rename from examples/cra-react-router/src/Nav.tsx rename to examples/vite-react-router/src/Nav.tsx diff --git a/examples/cra-react-router/src/Users.tsx b/examples/vite-react-router/src/Users.tsx similarity index 89% rename from examples/cra-react-router/src/Users.tsx rename to examples/vite-react-router/src/Users.tsx index 636cbb67..944f7723 100644 --- a/examples/cra-react-router/src/Users.tsx +++ b/examples/vite-react-router/src/Users.tsx @@ -3,7 +3,7 @@ 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 { @@ -11,7 +11,7 @@ export function Users() { 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', }); diff --git a/examples/cra-react-router/src/index.tsx b/examples/vite-react-router/src/index.tsx similarity index 89% rename from examples/cra-react-router/src/index.tsx rename to examples/vite-react-router/src/index.tsx index 0cbe8e9d..c30d0189 100644 --- a/examples/cra-react-router/src/index.tsx +++ b/examples/vite-react-router/src/index.tsx @@ -34,10 +34,10 @@ root.render( + +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; +} diff --git a/examples/cra-react-router/src/use-api.ts b/examples/vite-react-router/src/use-api.ts similarity index 100% rename from examples/cra-react-router/src/use-api.ts rename to examples/vite-react-router/src/use-api.ts diff --git a/examples/cra-react-router/tsconfig.json b/examples/vite-react-router/tsconfig.json similarity index 64% rename from examples/cra-react-router/tsconfig.json rename to examples/vite-react-router/tsconfig.json index 01b41a30..275c2ec1 100644 --- a/examples/cra-react-router/tsconfig.json +++ b/examples/vite-react-router/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "ESNext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -8,13 +8,13 @@ "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"] } diff --git a/examples/vite-react-router/vite.config.ts b/examples/vite-react-router/vite.config.ts new file mode 100644 index 00000000..9637fc4e --- /dev/null +++ b/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, + }, +}); diff --git a/package.json b/package.json index f9704899..7691eb4a 100644 --- a/package.json +++ b/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" },