Auth0 cypress provider (#172)

* Use package.json exports to export encrypt to stop cypress global variable errors

* split login based on authorization flow

* lazy load auth in login handlers

* lazy load auth get-user-info

* move destroySimulation from logout into createSimulation

* authorization flow command maker

* move logout into flow specific command

* typing

* CYPRESS_AUTH0_FLOW to tests

* refactor tests

* create a destroySimulation command

* remove destroy simulation from logout

* increase command timeout in cypress.json

* change flow to providers

* update README

* add changeset

* names for makeLogin

* remove log task

* fix logout import

* change AUTH0_PROVIDER to AUTH0_SDK

* delete unused auth

* fix cypress tests

Author: dagda1

.changes/auth0-providers.md

@@ -0,0 +1,4 @@
+---
+"@simulacrum/auth0-cypress": minor
+---
+have specific cypress commands for specific auth0 javascript sdks.

.changes/use-exports-for-encrypt.md

@@ -11,13 +11,13 @@ const Header = (): React.ReactElement => {
         <ul>
           <li>
             <Link href="/">
-              <a>Home</a>
+              <a data-testid="home">Home</a>
             </Link>
           </li>
           {user ? (
             <>
               <li>
-                <button
+                <button data-testid="logout"
                   onClick={() => logout({ returnTo: window.location.origin })}
                 >
                   Logout
@@ -27,7 +27,7 @@ const Header = (): React.ReactElement => {
           ) : (
             <>
               <li>
-                <button onClick={loginWithRedirect}>Login</button>
+                <button onClick={loginWithRedirect} data-testid="login">Login</button>
               </li>
             </>
           )}

examples/nextjs/auth0-react/components/header.tsx

@@ -11,7 +11,7 @@ const Header = (): React.ReactElement => {
         <ul>
           <li>
             <Link href="/">
-              <a>Home</a>
+              <a data-testid="home">Home</a>
             </Link>
           </li>
           {user ? (

examples/nextjs/nextjs-auth0/components/header.tsx

@@ -33,7 +33,7 @@ export default function Home(): JSX.Element {
           </p>
           <p>
             Once you have logged in you should be able to click in{" "}
-            <i>Protected Page</i> and <i>Logout</i>
+            <i>Protected Page</i> and <i>Log out</i>
           </p>
         </>
       )}

examples/nextjs/nextjs-auth0/pages/index.tsx

@@ -1,5 +1,7 @@
 # @simulacrum/auth0-cypress
 
+[Cypress](https://www.cypress.io/) [Auth0](https://auth0.com) addon that simulates an auth0 server running on `localhost` so you don't have to create fake accounts while developing or running tests that require authentication.
+
 ## Contents
 
 - [Installation](#installation)
@@ -19,15 +21,38 @@
 npm install @simulacrum/auth0-cypress --dev
 ```
 
-### Step 2: Import the commands
+### Step 2: Choose which sdk or javascript sdk (default @auth0/auth0-react)
+
+This plugin supports the following javascript sdks that interface with auth0:
+
+- [@auth0/auth0-react (default)](https://github.com/auth0/auth0-react)
+- [nextjs-auth0] - https://github.com/auth0/nextjs-auth0
+
+If you want to use `nextjs-auth0` then you need to set the `AUTH0_SDK` environment variables by any of the [usual cypress environmental varaibles options](https://docs.cypress.io/guides/guides/environment-variables).
+
+e.g. in `cypress.env.json`
+
+```json
+{
+  "AUTH0_SDK": "nextjs-auth0",
+}
+```
+
+or as a cypress env var:
+
+```shell
+export CYPRESS_AUTH0_SDK=nextjs-auth0
+```
+
+### Step 3: Import the commands
 
 ```js
 // cypress/support/index.js
 
 import '@simulacrum/auth0-cypress';
 ```
 
-### Step 3: Register the encrypt task
+### Step 4: Register the encrypt task
 
 We need to register an encrypt [cypress task](https://docs.cypress.io/api/commands/task).
 
@@ -55,7 +80,7 @@ module.exports = (on, config) => {
 }
 ```
 
-### Step 4: Configure Auth0
+### Step 5: Configure Auth0
 
 An example [cypress environment file](./cypress.env.json) is in the root of this repo. You can change the configuration to your auth0 values.
 
@@ -168,21 +193,7 @@ describe('log in', () => {
 cy.logout();
 ```
 
-You might want to log out after every test.
-
-```js
-afterEach(async () => {
-  cy.logout();
-});
-```
-
-You may also log out _before_ each test to allow one to inspect the state after a test run.
-
-```js
-beforeEach(async () => {
-  cy.logout();
-});
-```
+`cy.logout` will destroy the simulation and do any clean up between tests like removing an cookies.
 
 ## debugging
 

integrations/cypress/README.md

@@ -2,6 +2,7 @@
   "baseUrl": "http://localhost:3000",
   "video": false,
   "screenshotOnRunFailure": false,
+  "defaultCommandTimeout": 10000,
   "fixturesFolder": "cypress/fixtures",
   "integrationFolder": "cypress/integration",
   "pluginsFile": "cypress/plugins/index.ts",

integrations/cypress/cypress.json

@@ -3,15 +3,19 @@ import auth0Config from "../../cypress.env.json";
 
 describe("auth", () => {
   describe("log in, create person per test", () => {
+    beforeEach(() => {
+      cy.logout();
+    });
+
     it("should log in and log out", () => {
       cy
-        .createSimulation(auth0Config)
         .visit("/")
-        .contains("Logout").should('not.exist')
+        .createSimulation(auth0Config)
+        .get('[data-testid=logout]').should('not.exist')
         .given()
         .login()
         .visit("/")
-        .contains("Logout")
+        .get('[data-testid=logout]').should('exist')
         .logout();
     });
   });
@@ -25,10 +29,11 @@ describe("auth", () => {
     it("should login and logout", () => {
       cy
         .visit("/")
-        .contains("Logout").should('not.exist')
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
         .login()
         .visit("/")
-        .contains("Logout")
+        .get('[data-testid=logout]').should('exist')
         .logout();
     });
   });
@@ -45,41 +50,44 @@ describe("auth", () => {
     it("should login once", () => {
       cy
         .visit("/")
-        .contains("Logout").should('not.exist')
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
         .given({ email: 'first@gmail.com' })
         .login()
         .visit("/")
-        .contains("Logout");
+        .get('[data-testid=logout]').should('exist');
     });
 
     it("should login two times without error", () => {
       cy
         .visit("/")
-        .contains("Logout").should('not.exist')
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
         .given({ email: 'second@gmail.com' })
         .login()
         .visit("/")
-        .contains("Logout");
+        .get('[data-testid=logout]').should('exist');
     });
 
     it("should login three times without error", () => {
       cy
-      .visit("/")
-      .contains("Logout").should('not.exist')
-      .given({ email: 'third@gmail.com' })
-      .login()
-      .visit("/")
-      .contains("Logout");
+        .visit("/")
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
+        .given({ email: 'third@gmail.com' })
+        .login()
+        .visit("/")
+        .get('[data-testid=logout]').should('exist');
     });
 
     it("should login four times without error", () => {
       cy.visit("/")
-      .contains("Login")
-      .contains("Logout").should('not.exist')
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
         .given({ email: 'fourth@gmail.com', password: 'passw0rd' })
         .login()
         .visit("/")
-        .contains("Logout");
+        .get('[data-testid=logout]').should('exist');
     });
   });
 
@@ -93,20 +101,22 @@ describe("auth", () => {
     it("should login once", () => {
         cy
           .visit("/")
-          .contains("Logout").should('not.exist')
+          .get('[data-testid=home]').should('exist')
+          .get('[data-testid=logout]').should('not.exist')
           .login()
           .visit("/")
-          .contains("Logout");
+          .get('[data-testid=logout]').should('exist');
     });
 
     it("should login twice without error", () => {
       cy
         .visit("/")
-        .contains("Logout").should('not.exist')
+        .get('[data-testid=home]').should('exist')
+        .get('[data-testid=logout]').should('not.exist')
         .given({ email: 'second@gmail.com' })
         .login()
         .visit("/")
-        .contains("Logout");
+        .get('[data-testid=logout]').should('exist');
     });
   });
 });

integrations/cypress/cypress/integration/login.spec.ts

@@ -0,0 +1,38 @@
+import type { Auth0SDKs, CommandMaker } from '../types';
+import { makeCypressLogger } from '../utils/cypress-logger';
+import { getConfig } from '../utils/config';
+import { makeLogin as makeNextLogin } from './nextjs_auth0/login';
+import { makeLogin as makeReactLogin } from './auth0_react/login';
+import { makeLogout as makeNextLogout } from './nextjs_auth0/logout';
+import { makeLogout as makeReactLogout } from './auth0_react/logout';
+
+const log = makeCypressLogger('simulacrum-provider-commands');
+
+type Maker = ({ atom, getClientFromSpec }: CommandMaker) => () => void;
+
+type Commands = Record<Auth0SDKs, { login: Maker, logout: Maker }>;
+
+const providerCommands: Commands = {
+  nextjs_auth0: {
+    login: makeNextLogin,
+    logout: makeNextLogout
+  },
+  auth0_react: {
+    login: makeReactLogin,
+    logout: makeReactLogout
+  },
+} as const;
+
+export const makeSDKCommands = ({ atom, getClientFromSpec }: CommandMaker) => {
+  let config = getConfig();
+
+  let provider = config.sdk;
+
+  log(`Using ${provider} provider`);
+
+  let commands = providerCommands[provider];
+
+  for (let [name, command] of Object.entries(commands)) {
+    Cypress.Commands.add(name, command({ atom, getClientFromSpec }));
+  }
+};

integrations/cypress/cypress/support/commands/add-sdk-commands.ts

@@ -0,0 +1,22 @@
+import { Auth0Client, Auth0ClientOptions } from '@auth0/auth0-spa-js';
+
+const Auth0ConfigDefaults: Pick<Auth0ClientOptions, 'connection' | 'scope'> = {
+  connection: 'Username-Password-Authentication',
+  scope: 'openid profile email',
+};
+
+const Auth0ConfigFixed: Pick<Auth0ClientOptions, 'cacheLocation' | 'useRefreshTokens'> = {
+  cacheLocation: 'localstorage',
+  useRefreshTokens: true
+};
+
+const Auth0Config: Auth0ClientOptions = {
+  ...Auth0ConfigDefaults,
+  audience: Cypress.env('audience'),
+  client_id: Cypress.env('clientID'),
+  domain: Cypress.env('domain'),
+  scope: Cypress.env('scope'),
+  ...Auth0ConfigFixed
+};
+
+export const auth = new Auth0Client(Auth0Config);

integrations/cypress/cypress/support/commands/auth0_react/auth.ts

@@ -0,0 +1,26 @@
+import { CommandMaker } from '../../types';
+import { assert } from 'assert-ts';
+import { makeCypressLogger } from '../../utils/cypress-logger';
+
+const log = makeCypressLogger('simulacrum-login-pkce');
+
+export const makeLogin = ({ atom }: Pick<CommandMaker, 'atom'>) => () => {
+  return new Cypress.Promise((resolve, reject) => {
+    import('./auth').then(m => m.auth).then((auth0Client) => {
+      let person = atom.slice(Cypress.spec.name, 'person').get();
+
+      assert(!!person && typeof person.email !== 'undefined', `no scenario in login`);
+
+      auth0Client.getTokenSilently({ ignoreCache: true, currentUser: person.email, test: Cypress.currentTest.title })
+      .then((token) => {
+        log(`successfully logged in with token ${JSON.stringify(token)}`);
+
+        resolve(token);
+      }).catch((e) => {
+        console.error(e);
+
+        reject(e);
+      });
+    });
+  });
+};

integrations/cypress/cypress/support/commands/auth0_react/login.ts

@@ -0,0 +1,11 @@
+import { makeCypressLogger } from '../../utils/cypress-logger';
+
+const log = makeCypressLogger('simulacrum-logout-pkce');
+
+export const makeLogout = () => () => {
+  log('logging out');
+
+  return cy
+    .clearCookies()
+    .reload();
+};