Background
I'm trying to write some Cypress tests for my Angular application. The app is built in a monorepo with Nx, where Cypress was installed and set up for us automatically. We are using Identity Server 4 and OAuth2 to secure the Angular app. We're using the angular-auth-oidc-client package from NPM to handle the login/authentication. The app uses the Implicit Flow, so when you log in to the app you get sent to the auth server, enter your credentials, and are then redirected back to the Angular app. The callback URL after logging in and being redirected back to the Angular app is, at least in part,
/auth/calback#id_token=<token>
I'm not entirely sure the rest of the callback URL, but I believe (from what I could find) that it includes token_type (Bearer), expires_in (3600 in my case), and state (I don't know what should be placed there).
Question
My question is how do I get the Angular app to be authenticated so that I can run the Cypress tests? I know that I can't do the implicit flow for real, so my plan was to get a token before each test with an HTTP request and manually enter that into the /auth/callback route of the Angular app, and that hopefully from there the Angular app would take over. Here's that setup:
cy.request(options).then((result: any) => {
const { body: tokenInfo } = result;
// I've used access_token and id_token, both with the same result
cy.visit(
`/auth/callback#id_token=${tokenInfo['access_token']}&token_type=${tokenInfo['token_type']}&expires_in=${tokenInfo['expires_in']}&state=some-fake-state`,
);
});
I know for sure that the request is successful and returns the access_token, token_type, and expires_in values. But that's the last part of my spec file that seems to work.
After that, there are a couple other XHR requests made, for example to the auth server's well known endpoint. But after a handful of milliseconds those XHR calls are cancelled and the test goes forward from the beforeEach where the login is done. Here's a GIF of the test running:
(I added a 5 second wait in the test just to see if it helped in any way. It doesn't.)
In the one test I have, I'm just trying to check if the person can see stuff on the page that requires them to be logged in. However, it fails each time.
I'm sure there's a way to do this, but I have hit a wall. If anyone has any ideas on how to do this, I'd be really grateful. I thought that this tutorial on Auth0 would get me there, but it wasn't quite enough to work. I've looked at several other resources, but none of them have all the information I need.