Test authentication flows

Learn how to test authentication flows (sign-up, sign-in, sign-out) with Cypress for applications using Kinde authentication. Learn more about testing authentication flows with Kinde.

What you need

Link to this section

• Completed the Cypress setup
• A test user and a running Kinde application.

Test sign-in flow

Link to this section

1. Create a new test file:

   touch cypress/e2e/sign-in.cy.js

2. Add the following to the sign-in.cy.js file:

   cypress/e2e/sign-in.cy.js

   describe('Sign in Flows', () => {
     it('user can sign in with email and password', () => {
       cy.visit(Cypress.env('TEST_APP_URL'));
       cy.get('[data-testid="sign-in-button"]').click();
   
       // Wait for Kinde login page
       cy.url().should('include', 'kinde.com');
   
       cy.origin(Cypress.env('KINDE_ISSUER_URL'), () => {
         // Enter credentials
         cy.get('input[name="p_email"]').type(Cypress.env('TEST_USER_EMAIL'));
         cy.get('button[type="submit"]').click();
   
         cy.get('input[name="p_password"]').type(Cypress.env('TEST_USER_PASSWORD'));
         cy.get('button[type="submit"]').click({ multiple: true });
       });
   
       // Wait for redirect back to app
       const appUrl = new URL(Cypress.env('TEST_APP_URL'));
       cy.url().should('include', appUrl.hostname);
       cy.get('[data-testid="user-profile"]').should('be.visible');
     });
   });

Test sign-out flow

Link to this section

1. Create a new test file:

   touch cypress/e2e/sign-out.cy.js

2. Add the following to the sign-out.cy.js file:

   cypress/e2e/sign-out.cy.js

   describe('Sign-out flows', () => {
     it('user can sign in and then sign out', () => {
       // First authenticate
       cy.visit(Cypress.env('TEST_APP_URL'));
       cy.get('[data-testid="sign-in-button"]').click();
       cy.origin(Cypress.env('KINDE_ISSUER_URL'), () => {
         cy.get('input[name="p_email"]').type(Cypress.env('TEST_USER_EMAIL'));
         cy.get('button[type="submit"]').click();
         cy.get('input[name="p_password"]').type(Cypress.env('TEST_USER_PASSWORD'));
         cy.get('button[type="submit"]').click({ multiple: true });
       });
       const appUrl = new URL(Cypress.env('TEST_APP_URL'));
       cy.url().should('include', appUrl.hostname);
   
       // Now sign out
       cy.get('[data-testid="sign-out-button"]').click();
   
       // Should show signed-out state
       cy.get('[data-testid="sign-in-button"]').should('be.visible');
     });
   });

Run the tests

Link to this section

1. Use the following command:

   npx cypress open

2. Select the test spec to run.

   You should now see the Cypress tests passing in the browser.

Testing sign-up flows

Link to this section

Kinde requires OTP email verification when signing up for a new user. See the Testing passwordless flows guide for the detailed sign-up flow examples.