Vanilla CRA with react-router-dom

.circleci/config.yml

@@ -7,16 +7,25 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          keys:
-            - dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}
+          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "examples/cra-react-router/package-lock.json" }}-{{ checksum "examples/users-api/package-lock.json" }}
       - run: npm ci
+      - run: npm run ci:examples
       - save_cache:
-          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}
+          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "examples/cra-react-router/package-lock.json" }}-{{ checksum "examples/users-api/package-lock.json" }}
           paths:
             - ~/.npm
             - ~/.cache
       - run: npm run build
       - run: npm test
+      - run:
+          command: npm run test:integration
+          environment:
+            SKIP_PREFLIGHT_CHECK: 'true'
+            REACT_APP_DOMAIN: brucke.auth0.com
+            REACT_APP_CLIENT_ID: wLSIP47wM39wKdDmOj6Zb5eSEw3JVhVp
+            REACT_APP_AUDIENCE: http://localhost/
+            DOMAIN: brucke.auth0.com
+            AUDIENCE: http://localhost/
       - store_test_results:
           path: test-results
       - store_artifacts:

.eslintrc.js

@@ -20,4 +20,5 @@ module.exports = {
   rules: {
     '@typescript-eslint/camelcase': 'off',
   },
+  ignorePatterns: ['examples/**'],
 };

.gitignore

@@ -105,3 +105,6 @@ dist
 
 .idea
 test-results
+
+cypress/screenshots
+cypress/videos

EXAMPLES.md

@@ -164,6 +164,7 @@ export default withAuthenticationRequired(Profile);
 ```js
 // use-api.js
 import { useEffect, useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
 
 export const useApi = (url, options = {}) => {
   const { getAccessTokenSilently } = useAuth0();

README.md

@@ -176,7 +176,7 @@ const Posts = () => {
 export default Posts;
 ```
 
-See more examples in [EXAMPLES.md](./EXAMPLES.md)
+See more examples in [EXAMPLES.md](./EXAMPLES.md) or run the example app by following the instructions in [examples/README.md](./examples/README.md)
 
 ## Contributing
 

cypress.json

@@ -0,0 +1,13 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "chromeWebSecurity": false,
+  "viewportWidth": 1000,
+  "viewportHeight": 1000,
+  "fixturesFolder": false,
+  "pluginsFile": false,
+  "supportFile": false,
+  "env": {
+    "USER_EMAIL": "[email protected]",
+    "USER_PASSWORD": "1234"
+  }
+}

cypress/integration/smoke.test.ts

@@ -0,0 +1,39 @@
+const loginToAuth0 = (): void => {
+  cy.get('.auth0-lock-input-username .auth0-lock-input')
+    .clear()
+    .type('[email protected]');
+  cy.get('.auth0-lock-input-password .auth0-lock-input').clear().type('1234');
+  cy.get('.auth0-lock-submit').click();
+};
+
+describe('Smoke tests', () => {
+  it('do basic login and show user', () => {
+    cy.visit('/');
+    cy.get('#login').should('exist');
+    cy.get('#login').click();
+
+    loginToAuth0();
+
+    cy.get('#hello').contains(`Hello, ${Cypress.env('USER_EMAIL')}!`);
+    cy.get('#logout').click();
+    cy.get('#login').should('exist');
+  });
+
+  it('should protect a route and return to path after login', () => {
+    cy.visit('/users');
+
+    loginToAuth0();
+
+    cy.url().should('include', '/users');
+    cy.get('#logout').click();
+  });
+
+  it('should access an api', () => {
+    cy.visit('/users');
+
+    loginToAuth0();
+
+    cy.get('table').contains('[email protected]');
+    cy.get('#logout').click();
+  });
+});

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

examples/README.md

@@ -0,0 +1,28 @@
+# @auth0/auth0-react Examples
+
+To run the examples:
+
+- Follow the steps to configure an Auth0 Single-Page Application (SPA) in https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0
+- Follow the steps to create an API in https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#create-an-api
+- Add a permission to your API of `read:users` following the steps in https://auth0.com/docs/dashboard/guides/apis/add-permissions-apis
+- Add a `.env` file to `./examples/cra-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
+```
+
+- Add a `.env` file to `./examples/users-api/.env` With the `domain` and `audience` (your API identifier)
+
+```dotenv
+DOMAIN=your_domain
+AUDIENCE=your_audience
+```
+
+- Start the api and the web application by running the 2 start commands (from the project root)
+
+```bash
+$ npm run start:api && npm run start:cra
+```

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

@@ -0,0 +1,5 @@
+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

examples/cra-react-router/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/cra-react-router/README.md

@@ -0,0 +1,29 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).