Auth0 Lock 401 error unauthorized when using email login

Help
1

i have implemented the implicit grant to authenticate against my auth0 API. Social logins work fine but when logging in with an email and password I get a 401 unauthorized.

Here is my code. I have made sure that the account is verified:

const lock = new Auth0Lock(
    process.env.REACT_APP_GRATUITY_API_CLIENT_ID,
    process.env.REACT_APP_AUTH0_DOMAIN,
    {
        oidcConformant: true,
        auth: {
            params: {
                scope: 'openid profile user_id'
            },
            redirect:true,
            redirectUrl: `${window.location.origin}${LOGIN_ROUTE}`,
            responseType: 'id_token token',
            audience: process.env.REACT_APP_GRATUITY_API_AUDIENCE
        },
        additionalSignUpFields: {
            name: "PublicProfile",                              // required
            placeholder: "true",            // required
            prefill: "true"
        }]
    }
);
2

Have a look at the Logs in the Auth0 dashboard to see if it provides more information. Also make sure that you don’t have any Rules that are throwing Unauthorized errors.

3

Nothing in the logs with regards to the failure. I can successfully login using the Test connection in the database section.

“cannot POST https://kurtsmith.auth0.com/oauth/token (401)”

4

There’s a few situations at play here worth pointing out. The first and possibly the most important is that the oidcConformant toggle in Lock is not fully documented and as a consequence not formally supported yet so your mileage may vary until a final version is available and documented.

If you want to make use of the implicit grant (which can provide certain optimizations for a SPA applications) and also make use of API Authorization (aka audience parameter) the recommended approach would be to use the Auth0.js v8 library, in particular, the authorize method which will redirect to the hosted login page (where you can still use Lock while also supporting API authorization).

In relation to why did you get the 401 error at /oauth/token is that you’re most likely using a client application identifier that maps to an application that has a token endpoint authentication method that requires client authentication (aka client secret) when making calls to the /oauth/token endpoint. Since a client-side component like Javascript in a browser cannot safely store a client secret it cannot also use it and as such you get a 401 because the endpoint expected it. In theory you could configure the client application to not require client authentication for that endpoint which would address the error, but you would still be in undocumented territory trying to use Lock directly from your application and passing an audience parameter so the previous recommendation is still applicable; you should consider Auth0.js and the hosted login page.

5

Thanks, so i went with the hosted login as I figured it would be easier to maintain. I just mapped my callback page and extract the access token and id and put it in local storage.