Randomly started getting this error yesterday when I hit our site after not accessing for some amount of time (a couple hours- but way less than our token is set for 1 day). This is a huge issue for us and urgent since we are going to prod this week. Basically the screen renders blank and I have to do a page refresh and then it brings back a successful request. We are using the auth0.js library with the PAID version and custom domains:
1. code: 401
2. description: null
3. name: "Error"
4. original: Error: Unauthorized at Request.<anonymous> (http://localhost:3000/static/js/0.chunk.js:11124:47) at Request.Emitter.emit (http://localhost:3000/static/js/0.chunk.js:10767:90) at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/static/js/0.chunk.js:11221:14)
5. statusCode: 401
6. statusText: "Unauthorized"
7. __proto__: Object
Here is the full error:
Request URL: https://xxxxxx/userinfo
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: xxxxxx
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Credentials: false
Access-Control-Allow-Origin: *
cache-control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0, no-transform
Connection: keep-alive
Content-Length: 12
Date: Thu, 17 Oct 2019 13:59:55 GMT
ot-tracer-sampled: true
ot-tracer-spanid: 097fb6343d1f1996
ot-tracer-traceid: 4c6a955f613f93ee
Server: nginx
WWW-Authenticate: Bearer realm="Users", error="invalid_token", error_description="The token has expired"
X-Auth0-RequestId: f0fe861a4cb3d605be86
Provisional headers are shown
Auth0-Client: xxxxxx
Authorization: Bearer zujx8ae4PVZvw9-cyS4CaMxftcfQFyAU
Content-Type: application/json
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Mobile Safari/537.36
And here is the correct one after page refresh:
Request URL: https://xxxxxx/userinfo
Request Method: GET
Status Code: 200 OK
Remote Address: xxxxxx
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Credentials: false
Access-Control-Allow-Origin: *
cache-control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0, no-transform
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json; charset=utf-8
Date: Thu, 17 Oct 2019 13:59:56 GMT
ETag: W/"15e-rBVD07Z+yhhTybAyCGaop3Arhr8"
ot-tracer-sampled: true
ot-tracer-spanid: 391fc3cb70ed0a5d
ot-tracer-traceid: 7dbaa75a25f756f0
Server: nginx
Strict-Transport-Security: max-age=15768000
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Auth0-RequestId: 9c311e8d200abf2d235c
X-RateLimit-Limit: 10
X-RateLimit-Remaining: 9
X-RateLimit-Reset: 1571320809
X-Robots-Tag: noindex, nofollow, nosnippet, noarchive
Provisional headers are shown
Auth0-Client: xxxxxx
Authorization: Bearer ZtpopKA-wXwSGym-_T1JVqYqPJrV4uDZ
Content-Type: application/json
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Mobile Safari/537.36
I don’t understand this because we are not even using realm (unless that is just what auth0 uses when you use “connection”: ‘Username-Password-Authentication’,:
WWW-Authenticate: Bearer realm="Users", error="invalid_token", error_description="The token has expired"
Basically the error is coming in this function:
const howFarAlongIsUser = async () => {
if (localStorage.getItem("access_token") !== null) {
await new Bluebird(function (resolve, reject) {
auth0Client.client.userInfo(localStorage.getItem('access_token'), (err, user) => {
if (err) {
console.log("here is error i keep getting", err)
return reject(err)
}
resolve(user);
})
}).then(
data => {
This is called inside my app.js:
useEffect(() => {
if (localStorage.getItem("auth") === "true") {
renewSession();
}
}, []);
Here are the relevant functions in my Auth file (I am using auth0.js library and local storage):
const setSession = async authResult => {
const expiresAt = JSON.stringify(
authResult.expiresIn * 1000 + new Date().getTime()
)
localStorage.setItem('access_token', authResult.accessToken)
localStorage.setItem('id_token', authResult.idToken)
localStorage.setItem('expires_at', expiresAt)
localStorage.setItem('auth', true)
setAuthenticated(true);
await new Bluebird(function (resolve, reject) {
auth0Client.client.userInfo(authResult.accessToken, (err, user) => {
if (err) return reject(err)
return resolve(user);
})
}).then(
data => {
localStorage.setItem('user', JSON.stringify(data))
setUser(data);
}
)
}
const renewSession = async () => {
auth0Client.checkSession({}, async (err, authResult) => {
console.log("AUTH RESULT", authResult);
if (authResult && authResult.accessToken && authResult.idToken) {
await setSession(authResult);
} else if (err) {
console.log("loggin out inside renew session");
console.log("error", err);
logout();
}
});
setUser(getUser());
setAuthenticated(true);
}