create-react-app

Auth0 Simulator and @auth0/auth0-react

This sample demonstrates how to use the auth0-simulator and the Auth0 React SDK to authenticate into a React application created using create-react-app.

This sample also has cypress tests that use the @simulacrum/auth0-cypress addon that has helpers for using the auth0-simulator.

Project setup

Use npm to install the project dependencies:

npm install

Development Configuration

The auth0 configuration to connect to the auth0-simulator is defined in the auth0Simulator property of the pacakge.json file.

{ 
  "domain": "localhost:4400",
  "clientID": "YOUR_AUTH0_CLIENT_ID",
  "audience": "https://thefrontside.auth0.com/api/v1/",
  "scope": "openid profile email offline_access"
}

Running in development mode

npm run start:dev

A successful start up will output the following to the console:

This will run the [./simulation-server.mjs] file that will start the auth0-simulator and create a fake user with the following credentials that can be used to log in.

email: "admin@org.com",
password: "Passw0rd"

Auth0 rules

The auth0-simulator will run any auth0 rules that exist in the ./mocks/rules directory.

One sample rules file, avatar.js exists that adds an avatar when the user logs in:

Cypress end to end (e2e) testing

Run the tests

1. In the browser:

npm run test:browser

2. Headless

npm run test:headless

Silent and universal login tests

The sample cypress end to end tests can be found in the ./cypress/integration directory.

There are two spec files in that directory that show how to:

1. login silently and run e2e tests

describe('login', () => {
  describe('login and call an external api', () => {
    it('should get token without signing in and access restricted route',  () => {
      cy.createSimulation(appConfig)
        .given()
        .login()
        .visit('/external-api')
        .get('[data-testid=ping]').click()
        .get('[data-testid=api-message]').should('contain', 'Your access token was successfully validated')
        .url().should('include', '/external-api')
        .logout();
    });
  })
});

2. login via the universal login pages,

describe('login', () => {
  describe('Universal Login', () => {
    it('should login', () => {
      let email = 'bob@gmail.com';
      let password = 'Passw0rd!';
      
      cy.createSimulation(appConfig)
        .given({ email, password })
        .visit('/')
        .contains('Log in').first().click()
        .url().should('include', '/login')
        .get('#username')
        .type(email)
        .should('have.value', email)
        .get('#password')
        .type(password)
        .should('have.value', password)
        .get('#submit').click()
        .get('[data-testid=api-link]').should('contain', 'External API')
        .logout();
    });
  });
});