@auth0/auth0-angular with Cypress

I have am app that uses an AuthGuard to protect a route, and calls out to Aiuth0 custom login page for authentication if the user hasn’t logged in.

That part seems to be working, but I want to automate test in cypress and the online guides I have found are either for react, or are outdated.

I defined the typical custom cy.login function that uses the password grant type for this non-prod env:

Cypress.Commands.add('login', () => {
  Cypress.log({
    name: 'loginViaAuth0',
  });

  const options = {
    method: 'POST',
    url: Cypress.env('auth_url') + '/oauth/token',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    log: true,
    form: true,
    body: {
      grant_type: 'password',
      scope: 'openid email',
      client_id: Cypress.env('auth_client_id'),
      client_secret: Cypress.env('auth_client_secret'),
      username: Cypress.env('auth_username'),
      password: Cypress.env('auth_password'),
      audience: Cypress.env('auth_audience'),
    },
  };

  cy.request(options)
  .then((resp) => resp.body)
  .then((body:any) => {
    const {access_token, expires_in, id_token} = body;
    });
});

All is well to that point, but of course the auth0-angular library is going to be looking for the tokens in a cookie somewhere, and that last then() needs to be fleshed out.

This is where the online examples I have found were outdated or inadequate. One of them has a visit to “callback”, but I don’t understand why since I have the token and don’t have a callback route - it results in the login page instead of storage of the tokens.

Basically I don’t know how, at this point, to get the tokens stored where auth0-angular is going to look for them to prove I am “logged in” already.

Anyone have an example actually working?

1 Like