Netlify login page spinning

[Qurus]

Hello can you help please with netlify deploy. On local working without problem but once I upload to netlify login page is not redirecting. Do I have to do extra step to make it work on netlify? Thanks.

[epilande]

@Qurus

1. Make sure auth0 Application URIs are configured correctly:

2. Make sure netlify Environment variables are configured correctly:

[Qurus]

Thanks for your quick reply @epilande . All the settings are seems correct. I did exactly how your screen with my domain credentials.

[jacobcarrington]

I had a similar issue on my app. After some digging I narrowed down the issue to Safari ( Catalina+ ) stripping the hash from the redirect. The hash is used to trigger handleAuthentication and without it the auth stalls even though you're actually logged in.

Easy fix: Add a trailing slash to your callback URL.

More details here: https://github.com/IdentityModel/oidc-client-js/issues/238#issuecomment-271105795

[DoctorDerek]

@jacobcarrington Would you suggest the default for gatsby-theme-auth0 should be /auth/callback/ for the callback URL instead? Currently, it's /auth/callback without the trailing slash.

[DoctorDerek]

@Qurus Did you get it working? I'm having the same issues with Netlify. I think it has to do with the /auth/callback/ path not having a trailing slash.

[Qurus]

@DoctorDerek No luck with me. I did try with trailing slash too.

[jacobcarrington]

@jacobcarrington Would you suggest the default for gatsby-theme-auth0 should be /auth/callback/ for the callback URL instead? Currently, it's /auth/callback without the trailing slash.

I would, but even then, Safari's third party cookie policy is soo strict I think I eventually use a custom domain for Auth0. Which is not supported. If you're interested, I'll share the overrides that made this possible.

Personally I think this plugin in it's current should probably be dropped in support for a solution that uses auth0-react or spa instead of auth0-js.

[DoctorDerek]

Hey @jacobcarrington That would be great, as I'm working on a tutorial based on this plugin.

I'd also love to hear if you have a suggestion for a auth0-react or -spa plugin for Gatsby instead.

--

@Qurus Yeah me neither, I haven't been able to get it to work on Netlify.

[jacobcarrington]

config.ts

import { config as masterConfig } from "gatsby-theme-auth0/src/auth/config"

export const config = Object.assign(masterConfig, {
  tenant: process.env.GATSBY_AUTH0_TENANT,
  token_issuer: process.env.GATSBY_AUTH0_CUSTOM_DOMAIN
})

service.ts ~ line: 26

  private auth0 = process.env.AUTH0_DOMAIN
    ? new auth0.WebAuth({
        ...config,
        auto_login: false,
        domain: config.token_issuer,
        overrides: {
          __tenant: config.tenant,
          __token_issuer: `https://${config.token_issuer}/`
        }
      })
    : undefined

[DoctorDerek]

@jacobcarrington Awesome, thank you so much!! I'll try it out tomorrow. That does seem a little weird, but I'm not super familiar with it.

[jacobcarrington]

@jacobcarrington Awesome, thank you so much!! I'll try it out tomorrow. That does seem a little weird, but I'm not super familiar with it.

Just shadow the plugin in your project. The main thing is that you need to pass in overrides into the Auth0 config. Auth0 will reject the token on a custom domain if the token_issuer is not set correctly.

[DoctorDerek]

Great, thank you 👍