search

blitz-js / legacy-framework

MIT License
3 stars 2 forks source link

"Failed to load" for custom auth handler #399

Closed chrisj-back2work closed 2 years ago

chrisj-back2work commented 2 years ago

What is the problem?

I've implemented Auth0 as an external auth provider as described in https://blitzjs.com/docs/passportjs. The auth process itself works well.

After clicking the link to /api/auth/auth0 and before that page loads, a transient error message appears in the browser: Error: Fail to load script: /_next/static/chunks/pages/api/auth/%5B...auth%5D.js

Note that's the urlencoded version of the file name [...auth].js.

In dev mode (NODE_ENV != "production"), this is a transient error message.

In prod mode (NODE_ENV == "production"), this is a hard error / crashes the server.

Paste all your error logs here:

Error: Fail to load script: /_next/static/chunks/pages/api/auth/%5B...auth%5D.js

What are detailed steps to reproduce this?

  1. yarn add passport-auth0

  2. Create an Auth0 tenant, and store those credentials in .env.local as shown in https://gist.github.com/chrisj-back2work/86a318e0f34ed2ef3594d297fa5e7259

  3. Add the module app/api/auth/[...auth].ts. For file contents, see https://gist.github.com/chrisj-back2work/952e2dcd29751b0010ab62f374e549c8

  4. Update the default Blitz home page app/pages/index.tsx UserInfo object to link to /api/auth/auth0 instead of Routes.LoginPage(). For file contents, see https://gist.github.com/chrisj-back2work/48872d5ecb46e1e30bb638d235d21e89

  5. Run blitz dev, visit the home page, and click the Login button.

image

 

NOTE: if it would help your troubleshooting, I can provide the credentials for a non-production Auth0 tenant. The problem isn't with the auth process itself -- it seems like a JS bundling problem. Please message me if you want those credentials.

Confirmed there is no related page under ./next/static/chunks/pages. It's not clear to me why there would need to be a page for an API?

beerose commented 2 years ago

Hey @chrisj-back2work, I'm sorry for the late response. Thank you for the detailed steps to reproduce!

Good thing — I was able to reproduce it locally, but not sure yet what's the cause. We'll get back to you as soon as we have some more info.

beerose commented 2 years ago

Ok, got it! So the Link component is from Next and it tries to navigate to a Next page without reloading the app, so if you replace Link with just a it works fine (a will direct the user to an URL as a new page):

<a href="/api/auth/auth0">Login</a>

I'm closing the issue then. Please reopen if that didn't help.