Simple React.js User Login Authentication | Auth0

August 7 - 9, 2020

Auth0 makes it easy to add authentication to React with their npm package auth0-react, which uses React context and hooks.

Let me know if you would like to learn more about Auth0.

Time Stamps:
00:00 Intro
00:13 Sponsor (Auth0)
00:55 create-react-app / cleanup
02:17 Create Auth0 Application
03:48 Environmental Variables
04:36 Install auth0-react
06:45 LoginButton Component
09:34 LogoutButton Component
11:21 Profile Component
14:35 Render Components Based on Auth.
18:05 Show Loading...
_____________________________________

💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
_____________________________________

🛠️ Tools I use:
_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #React #Authentication

[codeSTACKr]

👉 Sign up for my newsletter to stay up-to-date on my new course:

[BlockCylinder]

Really well done. I'm following this tutorial nearly two years later, and I'm integrating Auth0 into an existing React application, and it went smoothly from start to finish. We all know how rare that is, even with more recent clips from mainstream channels.

[albert]

you, mate, saved my freelance carreer.

[JamesQQuick]

I'm biased but this video was great!! Auth0 makes auth in React so easy :)

[khandoor]

Stackr this was awesome. I think you just saved me years of my life not having to write all that authentication!!! You continue to impress with your code and delivery. So many people making these videos don't have (or don't know how to use) plugins and autocomplete and up to date syntax and it makes watching their videos frustrating (due to it taking so long to do simple things) but your code and syntax is up to date and on point. So not only do I learn the topic but pick up a few tips and tricks as well!! Awesome job man!!

[ioannispotouridis]

Just wrap your code in <pre> you don't need extra packages for formatting the JSON 😁

[TheWandererDoc]

so what is related to JWT ? or its the same we can use jwt or auth0

[abhisekray]

hello sir why my domain and clientId is undefined after using the .env file

[JoshAllan]

Random question, but what VSCode theme are you using? Really dig the colors!

[sundardass]

Hey mate, in console after clicking login button it shows, Loginwithredirect is not a function

[barelylate]

@8:50. anyone else get stuck here? it keeps telling me my credentials to login are invalid even though I am using them to login on a different tab in the same browser

[realsemig]

What editor and font theme is that? Really nice

[swapnilbhalerao]

application is starting well, but after log in it is not loading the next respective page, please help

[jamest]

I have had issues with auth for a while and this tutorial has made it simple to add it to my future react apps. Thanks for this!

[SuhweeSoftware]

Hello, so I am at 9:05 and I am trying to hit login but it loads slowly and then I get a server not found error. I believe it has to do with the in the index.js. Do you now this issue or how to troubleshoot it?

[mathewdavies]

Great tutorial and OAuth is a great technology. One note of caution - your API keys can be viewed by anyone, (even in the .Env file) using the browser tools if you put your site live, which is a security no no.

In production the keys would be hidden on the back end and served up to the front end via an API. You can also look into hiding your API keys in React to find solutions, most of which will involve making a simple back end to store and serve the keys.

[FernandoSouza-yjxl]

I have some questions:
- How user section keep active when page is realoaded? Does Auth0 React handle this or should you do it by yourself?
- If i have a rest API in a totally different domain, how can i handle this? I need to send something like a header to this API. And this API should be able to validade this header.

I really want to see more about Auth0

[shadmerhi]

This is an amazing video! How do you retrieve the form contents if the user decides to login by manually creating an account? I'd love to see more Auth0 videos from you.

[ahmedlabeeb]

Liked the video, subscribed, want to learn more about authentication! Thanks man!

[AyanKhan-dceu]

my react app on desktop is working fine but on android browser its a blank white screen after using auth0. please help me out