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

Question

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.
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:
Creating a google project and OAuth credentials
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
This however, unearthed a new issue...
Broken Log: Failed Silent Auth

Answer 1

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.
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.