Auth0-spa-js: Handling access denied exception in createAuth0Client

[ed-sparkes]

Description

It is unclear how to handle exceptions in createAuth0Client.

I am using the React Quick Start which is working well in the happy path scenario. However it is not clear how to handle the following scenario.

• User logs in (as such gets auth0 cookies etc)
• Someone removes users access in auth0
• User refreshes the page
• createAuth0Client throws exception access_denied
• my app catches that exception but im not sure what to do with it.

Ideally i would log the user out but i dont have a handle on the client as the creation failed.

Any advice on how to handle this situation in the docs would be greatly appreciated.

 useEffect((): void => {
    const initAuth0 = async (): Promise<void> => {

      try {
      const auth0FromHook = await createAuth0Client({
        ...rest,
      })
      setAuth0(auth0FromHook)

      if (
        window.location.search.includes('code=') &&
        window.location.search.includes('state=')
      ) {
        const { appState } = await auth0FromHook.handleRedirectCallback()
        onRedirectCallback(appState)
      }

      const isAuthenticatedNow = await auth0FromHook.isAuthenticated()

      setIsAuthenticated(isAuthenticatedNow)

      if (isAuthenticatedNow) {
        const aoUser = await auth0FromHook.getUser()


        setUser(aoUser)



      }

      setLoading(false)
    }catch(e){
      console.log(e)
      // WHAT CAN I DO HERE
    }

    }
    initAuth0()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

[ed-graham]

I'd be interested to hear the answer to this as well.

[tmeumann-ais]

We'd like to get this resolved too. We're hitting the same issue but with a "consent-required" error when we've added permissions for an already-logged-in user.

This is potentially a show-stopper because it leaves us with no way to log the user out or otherwise acquire consent (because we can't create the client to do so).

[tmeumann-ais]

It turns out you can instantiate a client directly, so we're now doing this to log the user out when the createAuth0Client() call fails:

const auth0Client = new Auth0Client(...rest);
await auth0Client.logout();

Seems to work for us.

[stevehobbsdev]

Thanks @tmeumann-ais, this would be my recommendation right now.

Instantiate Auth0Client directly instead of using createAuth0Client, call getTokenSilently and perform error handling as you see fit.

[ed-sparkes]

Hi,

Thanks this is helpful and gets me there pretty much. However ideally i would like to pass the error and description back to the return url so that my app can provide some feedback.

However i get an error if do this ...

if (e.error == "access_denied"){
      logout({ returnTo: `${window.location.origin}?error=${e.error}&error_description=${e.error_description}`,  })
    }

it doesnt seem to like the ampersand (&) in the query params

The error i get is ...

The returnTo URL is malformed: http://localhost:3000?error=access_denied&error_description=Not authorized - No centre assigned. Can't redirect after logout.

if i dont include the error description e.g.

if (e.error == "access_denied"){
      logout({ returnTo: `${window.location.origin}?error=${e.error}`,  })
    }

it works fine

i have tried encodeUriComponent() around the querystring but that also results in malformed error

any thoughts to help me wrap this up perfectly

[adamjmcgrath]

It probably doesn't like the apostrophe in your error_description, try

if (e.error == "access_denied"){
      logout({ returnTo: `${window.location.origin}?error=${e.error}&error_description=${encodeUriComponent(e.error_description)}`,  })
}

[stevehobbsdev]

@ed-sparkes Closing this for now as it looks like you're nearly there with a solution, but feel free to continue the conversation if need be.