Merge pull request #8 from clerk/use-clerk-testing-tokens

Use `@clerk/testing` package to generate and use testing tokens

.env.local.sample

@@ -1,2 +1,5 @@
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
-CLERK_SECRET_KEY=your_clerk_secret_key
+CLERK_SECRET_KEY=your_clerk_secret_key
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

README.md

@@ -1,4 +1,4 @@
-This is a simple Clerk+Next.js application showing how you can create and run e2e Cypress tests for your application
+This is a simple Clerk+Next.js application showing how you can run e2e Cypress tests for your application using testing tokens.
 
 ## Accompanying documentation
 https://clerk.dev/docs/testing/cypress
@@ -20,7 +20,7 @@ https://clerk.dev/docs/testing/cypress
 cp cypress.env.example.json cypress.env.json
 ```
 
-3. Set `test_email` and `test_password` to the credentials of the test account.
+3. Set `test_user` and `test_password` to the credentials of the test account.
 4. Open Cypress while keeps the development server running:
 
 ```bash
@@ -30,4 +30,4 @@ npm run cypress:open
 
 e2e testing -> chrome -> start e2e testing in chrome
 
-**If you are running NOT running on `localhost:3000`**, you will need to update the `baseUrl` in `cypress.config.js` to match your development server's URL.
+**If you are running NOT running on `localhost:3000`**, you will need to update the `baseUrl` in `cypress.config.ts` to match your development server's URL.

cypress.config.ts

@@ -0,0 +1,11 @@
+import { clerkSetup } from "@clerk/testing/cypress";
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      return clerkSetup({ config });
+    },
+    baseUrl: "http://localhost:3000",
+  },
+});

cypress.env.sample.json

@@ -1,4 +1,4 @@
 {
-  "test_email": "your_clerk_test_email",
-  "test_password": "your_clerk_test_password"
+  "test_user": "user",
+  "test_password": "password"
 }

cypress/e2e/testing-tokens.cy.ts

@@ -0,0 +1,82 @@
+/* eslint-disable */
+// Disable ESLint to prevent failing linting inside the Next.js repo.
+// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
+// https://github.com/cypress-io/eslint-plugin-cypress
+import { setupClerkTestingToken } from "@clerk/testing/cypress";
+
+// Cypress E2E Test
+describe("Testing Tokens", () => {
+  it("sign in", () => {
+    setupClerkTestingToken();
+
+    cy.visit('/protected');
+
+    cy.contains('h1', 'Sign in');
+    cy.get('.cl-signIn-root').should('exist');
+    cy.get('input[name=identifier]').type(Cypress.env('test_user'));
+
+    cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click();
+    cy.get('input[name=password]').type(Cypress.env('test_password'));
+
+
+    cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click();
+
+
+    cy.url().should('include', '/protected');
+    cy.contains('h1', 'This is a PROTECTED page');
+
+    cy.visit('/');
+    cy.contains('signed-in');
+
+  });
+
+  // Account Portal example
+  // it("sign in with Account Portal redirects", () => {
+  //   setupClerkTestingToken();
+
+  //   cy.origin('https://relieved-chamois-53.accounts.dev', () => {
+  //     cy.visit('http://localhost:3000/protected');
+
+  //     cy.contains('h1', 'Sign in');
+  //     cy.get('.cl-signIn-root').should('exist');
+  //     cy.get('input[name=identifier]').type(Cypress.env('test_user'));
+
+  //     cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click();
+  //     cy.get('input[name=password]').type(Cypress.env('test_password'));
+
+
+  //     cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click();
+  //   });
+
+  //   cy.url().should('include', '/protected');
+  //   cy.contains('h1', 'This is a PROTECTED page');
+
+  // });
+
+  it("sign in with command", () => {
+    setupClerkTestingToken();
+    cy.visit(`/`);
+    cy.signIn();
+    cy.visit('/protected');
+    cy.contains('h1', 'This is a PROTECTED page');
+  });
+
+  it("sign up", () => {
+    setupClerkTestingToken();
+
+    cy.visit('/sign-up');
+    cy.contains('h1', 'Sign Up');
+    cy.get('.cl-signUp-root').should('exist');
+    cy.get('input[name=username]').type('e2euser' + new Date().getTime());
+
+    cy.get('input[name=password]').type(Cypress.env('test_password'));
+
+    cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click();
+
+    cy.visit('/protected');
+    cy.url().should('include', '/protected');
+  });
+});
+
+// Prevent TypeScript from reading file as legacy script
+export {};

cypress/support/commands.ts

@@ -0,0 +1,69 @@
+/// <reference types="cypress" />
+import type { Clerk } from '@clerk/types';
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            signOut(): Chainable<void>
+            signIn(): Chainable<void>
+        }
+    }
+    interface Window {
+        Clerk: Clerk;
+    }
+}
+
+Cypress.Commands.add(`signOut`, () => {
+    cy.log(`Sign out by clearing all cookies.`);
+    cy.clearCookies({ domain: null, });
+  });
+
+Cypress.Commands.add(`signIn`, () => {
+    cy.log(`Signing in.`);
+
+    cy.window()
+        .should((window) => {
+            expect(window).to.not.have.property(`Clerk`, undefined);
+            expect(window.Clerk.loaded).to.eq(true);
+        })
+        .then(async (window) => {
+            const res = await window.Clerk.client.signIn.create({
+                identifier: Cypress.env(`test_user`),
+                password: Cypress.env(`test_password`),
+            });
+
+            await window.Clerk.setActive({
+                session: res.createdSessionId,
+            });
+
+            cy.log(`Finished Signing in.`);
+        });
+});
+
+// Prevent TypeScript from reading file as legacy script
+export {};

cypress/support/e2e.js → cypress/support/e2e.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/e2e.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["es5", "dom"],
+      "types": ["cypress", "node", "@clerk/types"]
+    },
+    "include": ["**/*.ts"]
+  }
+

middleware.ts

@@ -0,0 +1,14 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isProtectedRoute = createRouteMatcher([
+    '/protected(.*)',
+  ]);
+
+export default clerkMiddleware((auth, req) => {
+    if (isProtectedRoute(req)) auth().protect();
+});
+
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};