Auth0 Home Blog Docs

Lock widget redirect goes wrong when using audience

audience
auth0-lock
react-native
redirect

#1

Hi,
I have a react native app, with a lock widget config that looks like this

var lock = new Auth0Lock({
    clientId: config.clientid, domain: config.domain,
});

lock.show({
    authParams: {
        scope: "openid email",
        audience: config.audience,
    }
}, (err: any, profile: any, token: any) => {
    //do stuff
});

Using this setup, the authentication works just fine. I can see in the logs on my auht0 dashboad that it works, however in the Lock UI i get an error message “There was an error processing the sign in”.

If i remove the authParams in lock.show, the error message is gone. The problem with this is that I only recieve the opaque access token, not a real jwt token wich is what I´m looking for.

If I (as in this example) use the useBrowser: true option, I can see that the login provider redirects the request back to auth0 successfully. The callback looks something like this:

a0[clientid]://[my auth0 domain].eu.auht0.com/callback#[a uri encoded access token]
[my auth0 domain]/authorize?scope=openid email&auth0client=[looks lika a jwt token]&clientid=[clientid]&response_type=token&audience=[my audience]&redirecturi=[the callback uri coming here next]&connection=[the auth provider]

And after that, the request is redirected back again the the provided callback uri:
a0[clientid]://[my auth0 domain].eu.auht0.com/callback#[a uri encoded jwt token]

That uri returns a 404 error and the lock widget failes to parse the response I´m guessing.

The jwt token in the last callback is a valid one. I can manually parse it and use it to access my web api.

Anyone has any idé how i can continue troubleshooting?


#2

The react-native-locklibrary makes use of some legacy endpoints and according to the GitHub repository README is only currently receiving bug fixes.

Given you’re making use of API Authorization feature (aka audience parameter) which is something that is not available in the legacy endpoints, the recommendation is to make use of the react-native-auth0 library instead.


#3