Next-auth: Cypress testing with Auth0

[dane-harnett]

Your question
I am trying to write some tests using Auth0 as the provider can anyone provide some guidance?

What are you trying to do
I am building an app live coding on twitch and I have implemented auth using NextAuth with Auth0 as the provider.
I have checked the docs and they mention the cypress-social-logins library though that doesn't support Auth0.

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• [ ] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [ ] Could not find relevant documentation
• [ ] Found the example project helpful
• [ ] Did not find the example project helpful

[weyert]

Normally it's an anti-pattern to test third-parties in your Cypress tests, the idea behind this is that you trust that the third-party works so you wouldn't have to re-test the auth journey. If you want to test logging into your Auth0 you would use the Auth0 APIs to login and then leverage that, I assume you can do something similar with Next Auth.js?

https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/

[iaincollins]

@dane-harnett We had some Cypress tests but it turns out they weren't useful for integration testing as it has fundamental issues with not being able to make requests to multiple endpoints (this seems to be a design limitation on their part).

We ended up using Puppet for our integration tests - I also discovered this is what cypress-social-logins was doing to get around that limitation in Cypress. It's actually quite a bit easier to just use Cypress and a framework like Mocha for everything in our case.

An interesting limitation we ran into is that many OAuth providers require 2FA prompts or captchas if running tests from known cloud IP address (AWS, Azure, etc) so we have remote GitHub Action Runners for our tests.

Having Integration Tests run is very valuable but with that limitation in mind, you might find it helpful to stub them in some way (e.g. using a credentials provider with hardcoded username/password in test) if that scenario works for you - of course it may not, in which case contract tests might be useful to consider just to check for breaking changes in the Twitch API.

I'm planning on doing a write up on how we run our integration tests work, what sort of limitations they have. We don't have integration test coverage for Twitch or Auth0 yet, but I imagine we will over time.

You can check them out if it's helpful though:
https://github.com/nextauthjs/next-auth/blob/main/test/integration/github.js
https://github.com/nextauthjs/next-auth/blob/main/test/integration/twitter.js

They are very simple, we use a Stealth version of Puppeteer to reduce likely hood of being flagged as an automated bot, but other than that it's just Mocha and Puppeteer. Because we are test a library (and want to check the build process and dependancies) we run the app in a Docker container but next build && next start is just fine for testing a test Next.js app.

We'll probably improve these to record a screenshot / HTML if the test fails (something Cypress does automatically), but to manually debug you can just set headless: false to work out where a test is going wrong.

Cypress makes maintaining tests on UIs much easier but as I discovered it fundamentally wasn't suitable for integration testing it didn't make as much sense for us (unlike most consumer facing apps, we have quite a limited UI surface area, most of the complexity is in integration, database and API behaviour testing).

[weyert]

You could use puppeteer-testing-library-library to ease the querying of elements in your puppeteer scripts: https://testing-library.com/docs/pptr-testing-library/intro

[dane-harnett]

Thanks for all the help everyone, I think I'm leaning towards using a custom credentials provider for use during the tests.

For anyone interested, I was trying to follow the recommended cypress practice of logging in directly with Auth0, so I was able to use the Auth0 APIs to get a token, however I couldn't figure out how I could pass that directly to NextAuth so that it could re-package it as a NextAuth token.

[iaincollins]

Thanks for all the help everyone, I think I'm leaning towards using a custom credentials provider for use during the tests.

Cool! I'm very interested in helping in this specific are (testing, etc) and considering dummy OAuth provider solution that could fill this gap - testing is a major pain point. Interested in any feedback you have.

[dane-harnett]

FYI: My tests are implemented here: https://github.com/dane-harnett/youdoneyet