@jasonlandbridge/cypress-auth0-simulator
Advanced tools
Auth0 integration plugin for Cypress
A Cypress plugin specifically created for SDK's that integrate
with Auth0! @simulacrum/auth0-cypress will simulate an auth0 server, running on localhost, so you
don't have to create fake Auth0 accounts while developing or running tests that require authentication!
Features:
npm install @simulacrum/auth0-cypress --dev
This plugin supports the following javascript sdks that interface with auth0:
To set the correct SDK, you need to set the AUTH0_SDK environment variable inside your cypress.config.ts or through
any of the usual cypress environmental varaibles options.
in the cypress.config.ts file
// integrations/cypress/cypress.config.ts
export default defineConfig({
env: {
// This is the SDK used to communicate with Auth0, can be either 'auth0-js', 'auth0-vue', 'auth0-react' or 'nextjs-auth0'
AUTH0_SDK: 'auth0-js',
}
});
or with the use of an .env file (
examples: auth0-vue, auth0-react, nextjs-auth0
or create-react-app)
# /integrations/cypress/.env.auth0-react
AUTH0_SDK="auth0-js"
// cypress/support/commands/index.ts
import '@simulacrum/auth0-cypress';
We need to register an encrypt cypress task.
// cypress.config.ts
import { encrypt } from '@simulacrum/auth0-cypress/encrypt';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('task', { encrypt });
},
},
});
// cypress.config.ts
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
const { encrypt } = require('@simulacrum/auth0-cypress/encrypt');
on('task', { encrypt });
},
},
});
An example of all the possible environment variables can be found in the cypress.config.ts file.
NOTE: Make very sure that the values that you pass into Cypress are the EXACT same as the values you use in your application. If you use different values, the login will be successful but the app will not be logged in or it will redirect you to the login page.
// integrations/cypress/cypress.config.ts
export default defineConfig({
env: {
// This is the SDK used to communicate with Auth0, can be either 'auth0_react' or 'nextjs_auth0'
AUTH0_SDK: 'auth0_react',
// This is the port of the @simulacrum/auth0-simulator GraphQL server
AUTH0_SIMULATOR_PORT: 4000,
// This is the port of the simulated Auth0 server to which the Auth0 SDK will connect
AUTH0_RUNNING_PORT: 4400,
// The intended consumer of the token
AUTH0_AUDIENCE: 'https://thefrontside.auth0.com/api/v1/',
// The Client ID of the Auth0 application
AUTH0_CLIENT_ID: "00000000000000000000000000000000",
// The type of authentication flow used by the Auth0 SDK
AUTH0_CONNECTION: "Username-Password-Authentication",
// The default scope for the Auth0 user
AUTH0_SCOPE: "openid profile email offline_access",
// This is the secret used to sign the JWT tokens
AUTH0_CLIENT_SECRET: '6d0598f28f62a9aee14929ef46c7c8befdc015',
// This is the secret used to encrypt the session cookie
AUTH0_COOKIE_SECRET: "",
// This is the name of the session cookie used by the Cypress tests
AUTH0_SESSION_COOKIE_NAME: "appSession",
}
});
These same variables can also be set through the use of env files: (
examples: auth0-react, nextjs-auth0 create-react-app)
# /integrations/cypress/.env.auth0-react
AUTH0_SDK="auth0_react"
AUTH0_RUNNING_PORT=4400
AUTH0_AUDIENCE="https://your-audience/"
AUTH0_CONNECTION="Username-Password-Authentication"
AUTH0_SCOPE="openid profile email offline_access"
AUTH0_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'
AUTH0_COOKIE_SECRET='6d0598f28f62a9aee14929ef46c7c8befdc0150d870ec462fa45629511fd2a46'
Under the hood, @simulacrum/auth0-cypress uses another package called @simulacrum/auth0-simulator which will first start a GraphQL interface/web server (by default on localhost:4000). This will then require a mutation command to start the actual Auth0 simulation server which you will then use in the Cypress tests. This is what @simulacrum/auth0-cypress will do for you, as well add various Cypress commands.
Cypress recommends using start-server-and-test to ensure the test process exits and any servers are shut down.
Make sure to follow the following convention for creating your own start command with Auth0-Cypress
npx start-server-and-test <first command> <first resource> <second command> <second resource> <test command>
As example:
# This will start the server and test commands in parallel
npx start-server-and-test \
# This will start the application server that will be tested against in Cypress
'npm run start:server' http://localhost:3000 \
# This will start the Auth0 simulator GraphQL server
'npm run start:auth0' http://localhost:4000 \ ##
# This will start the Cypress tests
cypress open
See the scripts section in package.json for various examples on the use of integrating
withstart-server-and-test command.
The Auth0 SDK's require a https connection to work. This can easily be setup by using mkcert to create a self-signed certificate for your localhost.
A running example with setting up mkcert instruction can be found here at @simulacrum/ui
The following commands are now available in your test suite:
An example of these commands in use can be found in the login.spec.ts file.
createSimulation creates the fake auth0 server with your configuration
describe('tests requiring auth', () => {
it('should access restricted resource', () => {
cy.createSimulation(); // Will use the default configuration set in cypress.config.ts
// OR
cy.createSimulation({ options }); // Will use the options passed in to start the simulated Auth0 server
});
})
given creates a fake user that can be used to log into the fake auth0 server.
describe('tests requiring auth', () => {
it('should access restricted resource', () => {
cy
.createSimulation({ options })
.given() // with no arguments a random user is created
.login();
});
})
describe('tests requiring auth', () => {
it('should access restricted resource', () => {
cy
.createSimulation()
.given({ email: 'bob@gmail.com' }) // fixed fields
.login();
});
})
Depending on the SDK that has been configured, a token will be requested through the use of getTokenSilently(). Which will set the token in the local storage of the browser.
Call login and logout in your test. For example:
describe('log in', () => {
it('should get token without signing in', () => {
cy
.createSimulation({ options })
.visit("/")
.contains("Log out").should('not.exist')
.given()
.login()
.visit("/")
.contains("Log out")
.logout();
});
});
cy.logout will destroy the simulation and do any clean up between tests like removing cookies.
cy.logout();
Make VERY sure that the Auth0 env variable values you're using, are the EXACT same as the variables you're passing into Cypress.
https://github.com/bahmutov/start-server-and-test#use-http-get-requests
It is possible to hook up express middleware to log each endpoint that is called and any associated querystring or POST
data by simply adding the debug: true option when calling createSimulation:
describe('debug auth0 server', () => {
it("should log in and log out", () => {
cy.createSimulation({ debug: true })
});
});
FAQs
Auth0 integration plugin for Cypress
The npm package @jasonlandbridge/cypress-auth0-simulator receives a total of 0 weekly downloads. As such, @jasonlandbridge/cypress-auth0-simulator popularity was classified as not popular.
We found that @jasonlandbridge/cypress-auth0-simulator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.