Domain Option is Required Error

[myhendry]

I am trying to deploy Gatsby with Auth0 onto Netlify. However, I get a “Domain Option is required” error as soon as i hit on the home page

I have inputted the environment variables in Netlify as such…

AUTH0_CALLBACK : https://listings.netlify.com/callback

and have also changed Auth0 Applications Settings to…

Allowed Callback URLs
https://listings.netlify.com/callback, http://localhost:8000/callback

Allowed Web Origins
https://listings.netlify.com, http://localhost:8000

Allowed Logout URLs
https://listings.netlify.com, http://localhost:8000

Anyone has experience deploying Gatsby + Auth0 to Netlify and has successfully resolved this issue. Appreciate any help, thanks

[dan.woda]

Hi @myhendry,

It looks like this error is in regards to the Authentication(options) function of auth0.js.

Specifically, the options param is missing ‘domain’.

Could you post your code where the Authentication client is being initialized with any sensitive data removed?

Thanks,
Dan

[myhendry]

Thanks Dan for your help. I will send over the codes next couple of days. was tied up last week

[dan.woda]

No problem! Let’s see what we can do.

Thanks,
Dan

[EnterFloat]

Hello!
Did you find a solution? I have the exact same problem and would like to know how to solve it.

[dan.woda]

Still waiting to hear back from @myhendry with his code.

@EnterFloat Are you having a similar problem? Can you describe your setup and post any code related?

Thanks,
Dan

[EnterFloat]

I am also trying to deploy Gatsby with Auth0 onto Netlify. I have inputted the following environment variables in Netlify:
AUTH0_CALLBACK : https://domain-name.com/auth0_callback
AUTH0_CLIENTID : <sample_clientid_here>
AUTH0_DOMAIN : tenant-name.eu.auth0.com

Allowed Callback URLs
http://localhost:8000/auth0_callback, https://domain-name.com/auth0_callback

Allowed Web Origins
http://localhost:8000, https://domain-name.com

Allowed Logout URLs
http://localhost:8000, https://domain-name.com

On localhost when doing gatsby develop everything works as expexted and I can sign in succesfully using Auth0.
My .env.development file contains the following variables:

AUTH0_DOMAIN=tenant-name.eu.auth0.com
AUTH0_CLIENTID=<sample_clientid_here>
AUTH0_CALLBACK=http://localhost:8000/auth0_callback

The weird thing is that I get this error message in the console when I visit domain-name.com after deploying to Netlify:

Uncaught Error: domain option is required (auth0.min.esm.js:1077)

I am wondering if it has something to do with auth0-js not being installed correctly when deploying to Netlify.
I have this dependency in package.json:
"auth0-js": "^9.11.3"

I don’t know if this is enough related code, so let me know if you need more.
Thanks!

[myhendry]

Hi guys, I read the issue faced by Enterfloat. It seems similar to mine. Development was ok but when deployed, I hit the Domain Option is required error

[myhendry]

hi.

below are my codes. let me know if anything else needed, thanks

my auth0 package version is…

"auth0-js": "^9.11.1",

my netlify env variables are…

AUTH0_CALLBACK . https://listings.netlify.com/callback
AUTH0_CLIENTID .
AUTH0_DOMAIN . uuu.auth0.com
CONTENTFUL_ACCESS_TOKEN . fdadsfadsfdsafdummy
CONTENTFUL_SPACE_ID . fadsfdsafadsdummy2

my env.dev variables

CONTENTFUL_SPACE_ID=fdadsfadsfdsafdummy4
CONTENTFUL_ACCESS_TOKEN=fdadsfadsfdsafdummy3
AUTH0_DOMAIN=uuu.auth0.com
AUTH0_CLIENTID=fdadsfadsfdsafdummy5
AUTH0_CALLBACK=http://localhost:8000/callback

following is my auth.js file…

    import auth0 from "auth0-js"
import { navigate } from "gatsby"

const isBrowser = typeof window !== "undefined"

const auth = isBrowser
  ? new auth0.WebAuth({
      domain: process.env.AUTH0_DOMAIN,
      clientID: process.env.AUTH0_CLIENTID,
      redirectUri: process.env.AUTH0_CALLBACK,
      responseType: "token id_token",
      scope: "openid profile email",
    })
  : {}

const tokens = {
  accessToken: false,
  idToken: false,
  expiresAt: false,
}

let user = {}

export const isAuthenticated = () => {
  if (!isBrowser) {
    return
  }

  return localStorage.getItem("isLoggedIn") === "true"
}

export const login = () => {
  if (!isBrowser) {
    return
  }

  auth.authorize()
}

const setSession = (cb = () => {}) => (err, authResult) => {
  if (err) {
    navigate("/")
    cb()
    return
  }

  if (authResult && authResult.accessToken && authResult.idToken) {
    let expiresAt = authResult.expiresIn * 1000 + new Date().getTime()
    tokens.accessToken = authResult.accessToken
    tokens.idToken = authResult.idToken
    tokens.expiresAt = expiresAt
    user = authResult.idTokenPayload
    localStorage.setItem("isLoggedIn", true)
    navigate("/account")
    cb()
  }
}

export const silentAuth = callback => {
  if (!isAuthenticated()) return callback()
  auth.checkSession({}, setSession(callback))
}

export const handleAuthentication = () => {
  if (!isBrowser) {
    return
  }

  auth.parseHash(setSession())
}

export const getProfile = () => {
  return user
}

export const logout = () => {
  localStorage.setItem("isLoggedIn", false)
  auth.logout()
}

[dan.woda]

It seems like this problem is specifically related to netlify. I don’t have much experience with it unfortunately, and can’t find any instances of this problem internally or otherwise. Is there any way to log and make sure that the env variables are making it in successfully?

[EnterFloat]

Maybe I can print a variable to the console. I will try that tomorrow. But it is weird - I have successfully loaded variables from Netlify previously.

[dan.woda]

@EnterFloat,

That would be my strategy. I can’t find any other instances of this error occurring, so it is unlikely that it is a bug related to a recent change in auth0.js, or something of that nature. Let me know how the log goes.

[EnterFloat]

@myhendry and @dan.woda I found a solution!
Simply I had to add the prefix “GATSBY_” to all my environment variables in Netlify to make them available in browser JavaScript.

Environment Variables | Gatsby

Thanks for the help!

[dan.woda]

Glad you figured it out! Great job.

[myhendry]

@EnterFloat Thanks! It worked on my side too

[dan.woda]

@myhendry, that is great news. Thanks!