React - Quickstart - Login error

I’m following the react quickstart login tutorial

I’m stuck at Checkpoint : At this point, you should be able to go through a complete authentication cycle…

I get -

Unhandled Rejection (TypeError): Cannot read property ‘digest’ of undefined

:arrow_forward: 5 stack frames were collapsed.

loginWithRedirect

src/react-auth0-wrapper.js:77

  74 | loginWithPopup,  75 | handleRedirectCallback,  76 | getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),> 77 | loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),     | ^  78 | getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),  79 | getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),  80 | logout: (...p) => auth0Client.logout(...p)

With stack trace -

Uncaught (in promise) TypeError: Cannot read property 'digest' of undefined
    at T (auth0-spa-js.production.js:404)
    at oe.<anonymous> (auth0-spa-js.production.js:722)
    at Generator.next (<anonymous>)
    at auth0-spa-js.production.js:46
    at new Promise (<anonymous>)
    at t (auth0-spa-js.production.js:23)
    at oe.loginWithRedirect (auth0-spa-js.production.js:715)
    at loginWithRedirect (react-auth0-wrapper.js:77)
    at onClick (Navbar.jsx:13)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5029)
    at batchedUpdates$1 (react-dom.development.js:21463)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5109)
    at react-dom.development.js:21520
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21519)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5085)

Any idea what I’ve done wrong?

Hey there Andy!

Let me go through the quickstart myself and see if I also happen to get such issue!

Thanks for this.

I’ll verify I’ve done all the steps, with extra info -

Domain/Client ID - So I tried with the default app and a new app I created. They had the same domain but different IDs. I think this is ok, the domain says it’s andy3’s stuff.

Allowed call back - I’m using ‘http://pinkwing:3001/callback’. I’ve got a modified /etc/hosts and pinkwing points to a machine on my local network. So it can’t be accessed from internet, but I think that’s ok. Browser on laptop can get to it and run the react code fine.

Allowed Web Origins: http://pinkwing:3001
Logout URL: http://pinkwing:3001 same as above, should be ok.

create app ok: npx create-react-app my-app
install packages ok: npm install react-router-dom @auth0/auth0-spa-js
file react-auth0-wrapper.js in src ok
components Navbar.jsx ok
file src/index.js ok
auth_config.json ok (tried with both clientIds, one for each of my Apps)
App.js ok

And this is checkpoint. When I load the page I see the ‘Log in’ button.

But pressing it fails with above error.

Unhandled Rejection (TypeError): Cannot read property ‘digest’ of undefined

77 | loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),


Tutorial says: System requirements: React 16.8 I’m using 16.8.6

Hi Again,

I’m still failing to get anywhere with this.

Within the dashboard, there is the universal login. Given it’s name, is this used for all log ins? All apps for a domain? When I go to mine, i.e. in the browser I go to ‘https://MYDOMAIN.eu.auth0.com/login’, I get -

‘’ Oops!, something went wrong

There could be a misconfiguration in the system or a service outage. We track these errors automatically, but if the problem persists feel free to contact us.
Please try again. ‘’

Is this the problem?

I only created my account today.

Actually, I went to

https://MYDOMAIN.eu.auth0.com/authorize?client_id=MYCLIENTID&response_type=code&redirect_uri=http://pinkwing:3001/callback

And I got a redirect to pinkwing and got another react error, but that might be ok as I’m jumping in and react has no context of what I’m doing.

Unhandled Rejection (Error): Invalid state

I got this working eventually.

Rather than the first tutorial, I followed this one instead …

This worked but with node backend. For my needs I wanted to use django rest backend. This took a bit more time.

There were a few issues which were pretty hard to diagnose, some which threw me

Django REST JWT config ‘Domain’ which is called ‘JWT_ISSUER’ needs to have the ‘https://’ and ‘/’ rather than just the domain.

React axios.post(url,{},{headers:{Authorization: Bearer xxxxxx}}) I missed out the 2nd parameter {}. I guess this put the auth header into the body of the call.

Anyway, works now. I need a beer.

Glad you have it working!

1 Like

Hi, I’m getting also same error. Any solutions?

Are you running the same quickstart tutorial? I didn’t solve why that particular tutorial is broken for us.

I followed a different tutorial and that worked for me.

Hey there @andy3! Can you share with @jani.krunniniva what tutorial worked for you? Thank you!

I did. Here it is again…

Read further up this thread for other gotchas that I had.

oooh thanks a lot! Thought you also had in mind another post. Nevermind :slight_smile:

I’m experiencing the same issue in Chrome, in FireFox everythings works as expected. Could there be some browser incompatibility in your code?

Just to be sure: do you have maybe any Chrome addons installed that might interfere? Try to disable them or use an incognito window and see if the issue remains.

Hi Mathias, thanks for your reply. I’ve just disabled all browserextensions, without any result.
I’ve tried on both my laptop and my PC, and I’ve let my colleagues try using chrome.

To be sure, I’ve added react-app-polyfill/stable and tightened my browserslist in package.json.

Maybe this stacktrace helps with finding the cause of the issue?

As my application is still in early stages of development, I did not yet add SSL. After adding SSL to my application (and of course whitelisting the https-callback url), it started working. So it seems using a plain http connection doesn’t work properly.

Hi,

It was this tutorial Auth0 JavaScript SDK Quickstarts: Login
I just installed that and added correct domain and clientId, nothing else.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.