Update dependencies, fix routing, and add Netlify config

.circleci/config.yml

@@ -60,7 +60,7 @@ jobs:
       - run:
           name: Run integration tests
           command: |
-            docker create --network host --name tester codeception/codeceptjs codeceptjs run-multiple --all --steps --verbose
+            docker create --network host --name tester codeceptjs/codeceptjs codeceptjs run-multiple --all --steps --verbose
             docker cp $(pwd)/lock_login_spa_test.js tester:/tests/lock_login_test.js
             docker cp $(pwd)/codecept.conf.js tester:/tests/codecept.conf.js
             docker start -i tester

.github/ISSUE_TEMPLATE/Bug Report.yml

@@ -0,0 +1,65 @@
+name: 🐞 Report a bug
+description: Have you found a bug or issue? Create a bug report for this sample
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Please do not report security vulnerabilities here**. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues.
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      options:
+        - label: I have looked into the [Readme](https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01#readme) and have not found a suitable solution or answer.
+          required: true
+        - label: I have searched the [issues](https://github.com/auth0-samples/auth0-react-samples/issues) and have not found a suitable solution or answer.
+          required: true
+        - label: I have searched the [Auth0 Community](https://community.auth0.com) forums and have not found a suitable solution or answer.
+          required: true
+        - label: I agree to the terms within the [Auth0 Code of Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md).
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Provide a clear and concise description of the issue, including what you expected to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent.
+      placeholder: |
+        1. Step 1...
+        2. Step 2...
+        3. ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any other relevant information you think would be useful.
+    validations:
+      required: false
+
+  - type: dropdown
+    id: environment-browser
+    attributes:
+      label: Which browsers have you tested in?
+      multiple: true
+      options:
+        - Chrome
+        - Edge
+        - Safari
+        - Firefox
+        - Opera
+        - Other
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/Feature Request.yml

@@ -0,0 +1,50 @@
+name: 🧩 Feature request
+description: Suggest an idea or a feature for this sample
+labels: ["feature request"]
+
+body:
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      options:
+        - label: I have looked into the [Readme](https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01#readme) and have not found a suitable solution or answer.
+          required: true
+        - label: I have searched the [issues](https://github.com/auth0-samples/auth0-react-samples/issues) and have not found a suitable solution or answer.
+          required: true
+        - label: I have searched the [Auth0 Community](https://community.auth0.com) forums and have not found a suitable solution or answer.
+          required: true
+        - label: I agree to the terms within the [Auth0 Code of Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md).
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the problem you'd like to have solved
+      description: A clear and concise description of what the problem is.
+    validations:
+      required: true
+
+  - type: textarea
+    id: ideal-solution
+    attributes:
+      label: Describe the ideal solution
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives-and-workarounds
+    attributes:
+      label: Alternatives and current workarounds
+      description: A clear and concise description of any alternatives you've considered or any workarounds that are currently in place.
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🤔 Help & Questions
+    url: https://community.auth0.com
+    about: Ask general support or usage questions in the Auth0 Community forums.

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" 
+    directory: "/Sample-01" 
+    schedule:
+      interval: "daily"
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major", "version-update:semver-patch"]

.github/workflows/semgrep.yml

@@ -0,0 +1,25 @@
+name: Semgrep
+
+on:
+  pull_request: {}
+
+  push:
+    branches: ["master", "main"]
+
+  schedule:
+    - cron: '30 0 1,15 * *'
+
+jobs:
+  semgrep:
+    name: Scan
+    runs-on: ubuntu-latest
+    container:
+      image: returntocorp/semgrep
+    # Skip any PR created by dependabot to avoid permission issues
+    if: (github.actor != 'dependabot[bot]')
+    steps:
+      - uses: actions/checkout@v3
+
+      - run: semgrep ci
+        env:
+          SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}

README.md

@@ -2,6 +2,21 @@
 
 [![CircleCI](https://circleci.com/gh/auth0-samples/auth0-react-samples.svg?style=svg)](https://circleci.com/gh/auth0-samples/auth0-react-samples)
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 This is the sample code for the [Auth0 React Quickstart](https://auth0.com/docs/quickstart/spa/react) using [auth0-react](https://github.com/auth0/auth0-react).
 
 Please check out [the sample application](./Sample-01) for an example of how to integrate the Auth0 React SDK into your React applications.
@@ -30,6 +45,13 @@ If you have found a bug or if you have a feature request, please report them at
 
 [Auth0](https://auth0.com)
 
+## Deploy to Netlify
+You can deploy this example as a site on your own to explore and experiment with, by clicking this button.
+After deploy, install Auth0 by Okta extension in Netlify and follow the steps to create an App.
+
+<a href="https://app.netlify.com/start/deploy?repository=https://github.com/auth0-samples/auth0-react-samples"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" height=30px></a>
+
+
 ## License
 
 This project is licensed under the MIT license. See the [LICENSE](./LICENSE) file for more info.

Sample-01/README.md

@@ -12,10 +12,10 @@ This sample demonstrates the following use cases:
 
 ## Project setup
 
-Use `npm` to install the project dependencies:
+Use `yarn` to install the project dependencies:
 
 ```bash
-npm install
+yarn install
 ```
 
 ## Configuration
@@ -51,15 +51,15 @@ To do this, first copy `src/auth_config.json.example` into a new file in the sam
 This compiles and serves the React app and starts the backend API server on port 3001.
 
 ```bash
-npm run dev
+yarn run dev
 ```
 
 ## Deployment
 
 ### Compiles and minifies for production
 
 ```bash
-npm run build
+yarn run build
 ```
 
 ### Docker build
@@ -69,7 +69,7 @@ To build and run the Docker image, run `exec.sh`, or `exec.ps1` on Windows.
 ### Run your tests
 
 ```bash
-npm run test
+yarn run test
 ```
 
 ## Frequently Asked Questions

Sample-01/api-server.js

@@ -2,8 +2,7 @@ const express = require("express");
 const cors = require("cors");
 const morgan = require("morgan");
 const helmet = require("helmet");
-const jwt = require("express-jwt");
-const jwksRsa = require("jwks-rsa");
+const { auth } = require("express-oauth2-jwt-bearer");
 const authConfig = require("./src/auth_config.json");
 
 const app = express();
@@ -15,7 +14,7 @@ const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`;
 if (
   !authConfig.domain ||
   !authConfig.audience ||
-  authConfig.audience === "YOUR_API_IDENTIFIER"
+  authConfig.audience === "{API_IDENTIFIER}"
 ) {
   console.log(
     "Exiting: Please make sure that auth_config.json is in place and populated with valid domain and audience values"
@@ -28,16 +27,9 @@ app.use(morgan("dev"));
 app.use(helmet());
 app.use(cors({ origin: appOrigin }));
 
-const checkJwt = jwt({
-  secret: jwksRsa.expressJwtSecret({
-    cache: true,
-    rateLimit: true,
-    jwksRequestsPerMinute: 5,
-    jwksUri: `https://${authConfig.domain}/.well-known/jwks.json`,
-  }),
-
+const checkJwt = auth({
   audience: authConfig.audience,
-  issuer: `https://${authConfig.domain}/`,
+  issuerBaseURL: `https://${authConfig.domain}/`,
   algorithms: ["RS256"],
 });
 

Sample-01/package.json

@@ -16,33 +16,32 @@
     "prod": "npm-run-all --parallel server api-server"
   },
   "dependencies": {
-    "@auth0/auth0-react": "^1.9.0",
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-syntax-flow": "^7.16.7",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "autoprefixer": "^10.4.4",
-    "cors": "^2.8.5",
-    "express": "^4.16.4",
-    "express-jwt": "^6.1.2",
-    "helmet": "^4.4.1",
-    "highlight.js": "^10.0.3",
-    "jwks-rsa": "^1.12.2",
-    "morgan": "^1.9.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.12",
-    "react": "^17.0",
-    "react-dom": "^17.0",
-    "react-router-dom": "^5.0",
+    "@auth0/auth0-react": "^2.2.0",
+    "@babel/core": "^7.23",
+    "@babel/plugin-syntax-flow": "^7.23",
+    "@babel/plugin-transform-react-jsx": "^7.23",
+    "@fortawesome/fontawesome-svg-core": "^1.2",
+    "@fortawesome/free-solid-svg-icons": "^5.8",
+    "@fortawesome/react-fontawesome": "^0.2",
+    "autoprefixer": "^10.4",
+    "cors": "^2.8",
+    "express": "^4.18",
+    "express-oauth2-jwt-bearer": "^1.6.0",
+    "helmet": "^4.4",
+    "highlight.js": "^10.0",
+    "morgan": "^1.9",
+    "npm-run-all": "^4.1",
+    "postcss": "^8.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^5.3",
     "react-scripts": "^5.0",
-    "reactstrap": "^8.0",
-    "typescript": "^4.6.3"
+    "reactstrap": "^9.2",
+    "typescript": "^4.9"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.0",
-    "@testing-library/react": "^12.0",
+    "@testing-library/jest-dom": "^5.17",
+    "@testing-library/react": "^14.1",
     "jest-environment-jsdom": "^27.0",
     "jest-fetch-mock": "^3.0",
     "nodemon": "^2.0"

Sample-01/public/index.html

@@ -34,7 +34,7 @@
       href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css"
     />
 
-    <title>Calling an API</title>
+    <title>React SDK Sample</title>
   </head>
   <body class="h-100">
     <noscript>You need to enable JavaScript to run this app.</noscript>

Sample-01/server.js

@@ -17,4 +17,6 @@ app.use(
 
 app.use(express.static(join(__dirname, "build")));
 
+app.get('*', (req, res) => res.sendFile(join(__dirname, 'build', 'index.html')));
+
 app.listen(port, () => console.log(`Server listening on port ${port}`));

Sample-01/src/App.test.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from "@testing-library/react";
 import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  render(<App />);
 });

Sample-01/src/__tests__/config.test.js

@@ -27,7 +27,7 @@ describe("The config module", () => {
   });
 
   it("should omit the audience if left at a default value", () => {
-    mockConfig({ audience: "YOUR_API_IDENTIFIER" });
+    mockConfig({ audience: "{yourApiIdentifier}" });
 
     const { getConfig } = require("../config");
 

Sample-01/src/components/NavBar.js

@@ -32,12 +32,14 @@ const NavBar = () => {
 
   const logoutWithRedirect = () =>
     logout({
-      returnTo: window.location.origin,
+        logoutParams: {
+          returnTo: window.location.origin,
+        }
     });
 
   return (
     <div className="nav-container">
-      <Navbar color="light" light expand="md">
+      <Navbar color="light" light expand="md" container={false}>
         <Container>
           <NavbarBrand className="logo" />
           <NavbarToggler onClick={toggle} />