Search code examples
reactjshttp-status-code-404auth0

Auth0 returns a 401 on token request. Auth0 logs show login is successful

I'm integrating auth0 from the tutorial into my own application and have encountered a couple of problems with authentication reflected in the auth0 logs.

This occurs on hitting my react login button:

Login.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import '../components/App.css'


const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button class="btn btn-primary" onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

However on the Auth0 Application logs I see that I am successfully authenticated and I also get a Failed Exchange, Successful Login and a Warning During Login.

enter image description here

Fixed Log: Warning During Login

Here's the text of the log for Warning During Login:

You are using Auth0 development keys which are only intended for use in development and testing. This connection (google-oauth2) should be configured with your own Development Keys to enable the consent page to show your logo instead of Auth0's and to enable SSO for this connection. AUTH0 DEVELOPMENT KEYS ARE NOT RECOMMENDED FOR PRODUCTION ENVIRONMENTS. To learn more about Development Keys please refer to https://auth0.com/docs/connections/social/devkeys.

This was fixed by following these instructions on the Auth0 website. Essentially:

  1. Creating a google project and OAuth credentials
  2. Adding the credentials inside my Auth0 connected apps

Broken: Login Successful

The log shows that it was a successful login. However on my application, I click the Login button and the expected auth0 modal does not appear.

{
  "date": "2020-10-14T09:14:06.549Z",
  "type": "s",
  "connection_id": "",
  "client_id": "<MyClientId>",
  "client_name": "<MyClientName>",
  "ip": "<MyIP>",
  "user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
  "details": {
    "prompts": [],
    "completedAt": 1602666846548,
    "elapsedTime": null,
    "session_id": "m0AeJer-FhZ0rb9UFPWgvDkvN7MW36h_"
  },
  "hostname": "<MyHost>",
  "user_id": "<MyUserID>",
  "user_name": "<MyUserName>",
  "auth0_client": {
    "name": "auth0-react",
    "version": "1.1.0"
  },
  "log_id": "90020201014091409270008789595401783120816526823843168290",
  "_id": "90020201014091409270008789595401783120816526823843168290",
  "isMobile": false,
  "description": "Successful login"
}

And looking at the response headers in safari, the token request has 401'd

URL: https://<testdomain>.auth0.com/oauth/token
Status: 401
Source: Network
Address: <testaddress>
Initiator: 
auth0-spa-js.production.esm.js:15

Fixed Log: Failed Exchange

After ensuring that I was connecting to goole properly I saw that the issue persisted. Looking at the log I get the following under the heading of a Failed Exchange.

{
  "date": "2020-10-14T09:14:07.304Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "<MyClientId>",
  "client_name": null,
  "ip": "<TheIP>",
  "user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
  "details": {
    "code": "*************Rw7"
  },
  "hostname": "<MyHostName>",
  "user_id": "",
  "user_name": "",
  "log_id": "90020201014091410270002070951766882711015226887425228818",
  "_id": "90020201014091410270002070951766882711015226887425228818",
  "isMobile": false
}

This question fixed the Failed Exchange issue for me. Change your Auth0 Application properties settings to:

Application Type: Regular Web Application Token Endpoint Authentication Method: None

enter image description here

This however, unearthed a new issue...

Broken Log: Failed Silent Auth

enter image description here

Solution

  • There's a number of fixes I did here so I'll document them in the answer.

    Warning During Login

    This was fixed by ensuring the my credentials provider had been properly set up. In this case google. For instructions on how to add google as a credentials provider see here.

    Failed Exchange

    This was fixed by going to the auth0 dashboard application settings and modifying the setting Application Type to Regular Web Application and the setting Token Endpoint Authentication Method to None.

    Login Successful (but not really)

    This disappeared once I fixed the Failed Exchange above.

    enter image description here

    Failed Silent Auth

    This was never "fixed" and the error still appears on the log. However the comment on this question prompted me to revisit my Allowed Web Origins and Allowed Origins (CORS) on my auth0 to the below:

    https://<mydomain>.eu.auth0.com, http://localhost:3000

    This was the last issue in the chain and I could now use login and logout as expected.