Authenticating Your First React App

Blog Discussions
, , ,
23

Thanks for providing the context. I will move this to the blog articles topic where the article author handle those questions. Thanks for providing the context!

24

Update: issue was resolved! Turned out it was because I was using an href to navigate to the page that was giving me trouble rather than a NavLink (or other Link) from React Router, so the history wasnā€™t consistent.

1 Like
25

Good find, Max! Thanks for sharing! Yesterday I had the same problem but in Vue :sweat_smile: I was using an href instead of the router-provided element and I was getting a weird flashing when loading that page.

26

Youā€™re welcome! Glad to be able to help!

1 Like
27

Hello,

I have been following along with this introductory Auth0 React app build-along (link below) and have been running into the same error over and over and canā€™t seem to find any solution. I made this yesterday and it worked 100% until it crashed and gave me this the error message below. I restarted the app many times, rebooted my computer, but nothing fixed it. To check my sanity, I started this project from scratch again but the error message still occurred.

I went to the path where the error was located but couldnā€™t find anything that stood out to me. The problem seems to have started as soon as I installed the npm SDK npm install --save @auth0/auth0-spa-js because before I installed that, the app was working just fine and text was displaying as it should. As soon as you install the SDK, the text disappears.

I even deleted the entire auth0 package in the node_modules folder just to see what would happen and the same error message occurred. Does anyone have some insight into this problem? I am losing my mind and any help would be greatly appreciated!

Code-along link: The Complete Guide to React User Authentication with Auth0

Error message: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Error location: ./node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js

SDK: npm install --save @auth0/auth0-spa-js (version 1.8.0)

1 Like
28

Hey there @samueljbarrick!

Moving your post to this thread as itā€™s a dedicated one to this blog post. Thanks!

29

Hi Chris,

I watched your tutorial as well and all works as planned upon the first npm start, but I have to clear my cookies every time to see the content again. Once I clear my cookies I am able to see the ā€œClick here!ā€ message, proceed to log in, and then the ā€œhello, (insert user name here)ā€. The problem is, if I were to run npm start again, all of that content seems to disappear.

I know you mentioned using React dev tools to debug but Iā€™m not quite sure where to start. Just trying to avoid having to clear cookies every time to see my content. Any help is appreciated and Iā€™m happy to share my source code with you if youā€™d like.

Thank you!

30

I would use React DevTools to see if the user is in your React state. If it is, then the issue here is a displaying one because you have the data, your views just donā€™t show it.

If there is no user in React state, then that means your app wasnā€™t able to go grab user information from Auth0.

Are you using social login? Social login wonā€™t persist if you are using Auth0ā€™s social keys. Youā€™ll need to go grab your own API keys for social logins. Another way to workaround this is to use email/password login.

31

Hi Chris,

Iā€™m using the email and password login. I see the user I made in my application under ā€œusers & rolesā€. However, Iā€™m not sure how to proceed with the React DevTools. Something Iā€™ll probably have to deep dive on but if youā€™re able to point me in the right direction Iā€™d appreciate it!

32

Iā€™ve just fixed a similar problem (login works, logout works, but refreshing or changing code requires me to clear my cookies.)

In my case, it was the fact that I had trailing slashes in Applications ā†’ Your app ā†’ Application URIs. This caused the code to hang on const auth0FromHook = await createAuth0Client(initOptions);

Your problem might be similar?

2 Likes
33

Thanks for sharing that with the rest of community!

34

In case you havenā€™t seen it :slight_smile: require function is used in a way in which dependencies cannot be statically extracted Ā· Issue #447 Ā· auth0/auth0-spa-js Ā· GitHub

2 Likes
35

Thanks for sharing that @georgespake!

36

The React DevTools lets you see whatā€™s in your React state. Hereā€™s some links to help show how to use it:

37

@RobinKruijt I believe this worked! I simply changed my localhost:3000/ to localhost:3000 and itā€™s behaving. Itā€™s always a simple fix but always so frustrating :sweat_smile: Thank you very much sir!

1 Like
39

No worries! Weā€™re here for you!

40

This post is now outdated, with the release of the Auth0 React SDK. Could you please update it?

Iā€™ve opened a GitHub issue for this: Outdated post; does not mention React SDKs Ā· Issue #5 Ā· auth0-blog/react-auth0-spa-sdk-ga Ā· GitHub

1 Like
41

Thanks for raising that! (cc: @dan-auth0, @chrisoncode, @kapehe)

1 Like
42

Howdy, Rafael! Thank you for bringing this up and also for checking out our new React SDK! I am working on a new blog post that will be coming out soon :eyes: Stay tuned, please :pray:

43

There you have it :slight_smile:

2 Likes