You can quickly add a login system to your React app that includes social logins, too! In this tutorial, we'll apply Auth0 to a React app and add an additional social login during set up. If you are just getting started with React, check out my React JS for Beginners full course here: kzread.info/dash/bejne/hIp6o9t_h7Kal9I.html But if your React skills are a bit more advanced, you may be interested in building your own React login system with me in this video playlist: kzread.info/head/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd

Hi Dave, this is the first video of yours I watched and I subscribed to your channel halfway through the video. The tutorial was really helpful and I really liked other aspects of your teaching, like how you always say the keyboard shortcuts you're using and your words of encouragement at the end.

@DaveGrayTeachesCode

2 жыл бұрын

I'm glad it helped you, Grace! 💯 Thank you for the note 🙏

Dave, you're on the top 5 best people to learn from, literally. Please keep going with the videos and tutorials!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Lucho! 🙏🙏

@davidlee588

Жыл бұрын

tell me the rest 4 pls, thx

@radubordea6359

Жыл бұрын

@@davidlee588 freeCodeCamp, Coding Addict, Traversy Media, Bro Code

Hi Dave just recently subscribed to the channel and I have got to say you're content is one of the best I have seen on KZread.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words, Javed! 🙏💯

Hi Dave it would be nice doing a tutroial on automation, testing, continous integration and deploying to production. Your tutorial is always refreshing.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Babatunde! Those are excellent suggestions. 💯🙏

Wow dave so quick and easy! Thank you so much for this!

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

Wow, Auth0 seems very easy. I just loved it 😍 Thank you Dave

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

I liked and subscribed all love from South Africa. Keep up the good work Champ. Its not going unnoticed. #happycoding

Great content here Dave. Thanks for giving them all for free.

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Great tutorials man!

I like the brief explanation on how to easily get started with login using Auth0. Explanaing was easy to follow along. One thing I would suggest to add to future vidoes is talk about real world scenarios. Login and logout is one part of the application and after login as an application developer we do a lot behind the scene. For example, once logged in via auth0 how should I personalize the user's dashboard. Let's say I have an ecommerce application and I want to store everything user liked, i can store it in a backend table though an API. So the gap is how to map this user to whatever they liked and store it in a db. Once Authenticated, would you store the user's unique values provided by Auth0 response in a user table? so the next time when user sign's in we who they they are and show them custom dashboard?

thanks for the content, really enjoying your channel

@DaveGrayTeachesCode

2 жыл бұрын

Glad to hear it, and you're welcome! 💯

Thank you! This is very much appreciated!

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

The redirectUri at 10:30 is now in the authorizationParams object. So instead of redirectUri={window.location.origin} it is authorizationParams={{ redirect_uri: window.location.origin }}

@DaveGrayTeachesCode

Жыл бұрын

Good note if this is an update from Auth0 since the video was made.

@quasicode6954

7 ай бұрын

Should be pinned

You explained auth0 well to a newbie web developer student like me

Very nice, the free plan includes 7000 active user with unlimited logins and no credit card required, and active users are "Users that authenticate in a given month for a given tenant", This is prefect to me, I only missing the perfect client 😎🤦‍♂️😁 Thanks Dave, it seems like it's not easy for you to run out of useful topics

@DaveGrayTeachesCode

2 жыл бұрын

Great info to add here, Ahmad! Thank you for your input. 🙏💯

Many thanks! GJ!

Fantastic video!

I love your tuto thanks 🙏

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome!

thank you very much Dave!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome!

you have something different in every new in each tutorial

Am from Africa. In have to say you're among the best.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Eugene! 🙏🙏

Thanks so much that was pretty useful.

@DaveGrayTeachesCode

Жыл бұрын

Glad it helped!

I had the issue of redirect to "undefined/authorize?redirect", and the solution I found was to relocate the .env file to the root folder(not inside the src folder, but outside of it). IF you have the .env file inside your src folder instead, it cannot be read. If that doesn't do it, you should look at the .env file for other issues related to it.

@nick49302

10 ай бұрын

If you're using vite for example, you have to prefix the .env values with VITE_AUTH0, instead of REACT_APP_AUTH0.

posting it here because I wasted a solid hour figuring this out: you only need to structure your environment variables like: REACT_APP_:value if you created the app using create-react-app If, like me, you bootstrapped your application using Vite, you will need to do VITE_:value Also, if you bootstrapped your app with Vite, you will access them like const myEnvVar = import.meta.env.VITE_WHATEVER

you are perfect. thank you☺

great video Dave, fast and right to the point, just one question is it better to apply auth0 in the frontend or in the backend?

@DaveGrayTeachesCode

Жыл бұрын

The user interface is always frontend which is where we add Auth0 to our apps. Auth0 handles the backend on their servers.

Thank you !

@DaveGrayTeachesCode

2 жыл бұрын

Glad I could help! 🙏

thanks Dave 🥰🥰🥰

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🚀🚀

Thanks sir ❤️

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

Were you a professor? Your videos are like a video book. Great👍

@DaveGrayTeachesCode

2 жыл бұрын

Thank you so much! I sincerely appreciate the kind words, and I am glad that my teaching experience shows. I was a full-time instructor at a university for several years before taking a full-time developer job. I continue to teach as an online adjunct instructor for the university, too.

thanks, really !

@DaveGrayTeachesCode

2 жыл бұрын

Welcome!

Wonderfull tutorial again! One question can we implement Authorization on top of Auth0 Authorization? For example is using Auth0 simple email and password login, but also add some custom roles (Admin, Editor, Viewer) ? Or it need to be made only within auth0 account page?

@DaveGrayTeachesCode

Жыл бұрын

You can work with the Auth0 data to apply it to your auth flow with custom roles. Deeper dive on that in the Auth0 docs. 💯

thank you so much for the useful video ✌🤞👍🙌👌

@DaveGrayTeachesCode

2 жыл бұрын

Glad it was helpful! 💯

@mahendranath2504

2 жыл бұрын

@@DaveGrayTeachesCode most of your videos are so helpful and informative, for web development your channel has everything, I refering your channel to my friends as a reference to learn the concepts

@DaveGrayTeachesCode

2 жыл бұрын

@@mahendranath2504 thank you very much!

Это лучшее объяснение материала по данной теме. Thx, Dave!

@DaveGrayTeachesCode

Жыл бұрын

Thank you for the kind words! You're welcome!

LOVED IT MOST make component of how to check net connection available or not ?

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! Your request for checking net connection - while I haven't made it into a React component, one of the very first videos I made was about how to check your Internet connection with Javascript: kzread.info/dash/bejne/mn2VqdyDY9feobA.html

I don't know if you're still looking at comments on this video, but right off the bat, I really liked the video. I am a Java/Spring back-end developer and diving into React, so I am still a beginner there. I like how the redirect was told to go back to the UI and passing back that user information, that is great. I know you can configure what kind of information to return back once the user is logged in. However, what I am looking for is the Oauth2 token, or JWT token to come back to the UI just to see if it exists, how would I get that back? I wonder if there is some configuration with Auth0 on that. Thanks again!

@DaveGrayTeachesCode

Жыл бұрын

Thank you! This video helped get you started with Auth0, but they offer much more in their documentation. I'm sure you can find what you are looking for.

❤ from south india... Thanks for the video 🙏🙏

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏🚀

@kathirmldata7411

2 жыл бұрын

@@DaveGrayTeachesCode Please teach how to do filtering, sorting and pagination in react js. i have searched in so many channels. but i didn't get clear idea. please consider it. Thank you!

@DaveGrayTeachesCode

2 жыл бұрын

@@kathirmldata7411 in my React for Beginners course, we filter blog posts with a search box. I have not created a pagination tutorial yet. Good idea!

hey Dave great tutorial on auth0 can you explain or do a short tutorial how to implement this into your existing project with node.js and react

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Javed. I could do this sometime. It would be a bit more complex as Auth0 requires more setup to send the roles in the JWT, but they do support it. Thanks for the request!

@jessbk1678

2 жыл бұрын

Thanks for the reply, have you got a discord channel if not would be great if you can make one.

thanks for uploading nice video. by the way, is it possible to stop xhr.js error message from appearing on console tap? it shows the url of request directly

Is it adviced to use custom authentication endpoints or using prebuilt packages like autho0, passportjs to implement authentication and authorisation for a professional production app ? . By the way love your vedios .

@DaveGrayTeachesCode

17 күн бұрын

Thank you! Rolling your own off is a good learning experience. That said, I prefer to use a service like Kinde for most projects.

Hey dave ! Can you cover a Rxjs-React Course ? Thanks

@DaveGrayTeachesCode

2 жыл бұрын

I'll look into this! Thanks for the request 💯🙏

Hello sir. Please do a email verification on this series. Thanks

Sir, I am waiting for your OAuth course

hi dave why we dont see any access token or refresh token in this tutorial ?

how does your code put the closing tag of jsx on the next line, on save it just puts on the same line. Please could you let me know ?

Salam dave ، i have some data for users but have some way to to login and log out , what is the best secure way to login and log out for pern full stack developer please answere ? thanks bro

Hi dave I have a question: is it possible to make the login page be on your own url "localhost:3000/login" or does it have to be on the auth0 url

@DaveGrayTeachesCode

Жыл бұрын

auth0.com/docs/customize

how can i include more data to the user retrieved, for example the email? i was trying to use a rule, but not working x.x help

Hi Dave, I followed your tutorial except for a couple things. when I like login I get taken to a page with URL undefined/authorize?redirect , I have followed advice from people online from people that had the same issue but I couldn't resolve it. just wondering if you know anything about this issue? Thanks for the great video love your content!

@DaveGrayTeachesCode

Жыл бұрын

I haven't heard of that issue. You might check the Auth0 documentation. It has been awhile since I made this.. something could change. It should link with your account. Maybe you need to define that URL in your Auth0 account.

@AndromedaSir

Жыл бұрын

​@@DaveGrayTeachesCode I had the same issue, and the solution I found was to relocate the .env file to the root folder. IF you have the .env file inside your app instead it cannot be read. If that doesn't do it, you should look at the .env file for other issues related to it.

is there a way to create a login system using material ui on your react app and integrate auth0 api's instead of using auth0's loginsystem

@DaveGrayTeachesCode

Жыл бұрын

I'm sure there is. Material UI is for design so it could be combined with any JS logic, library, or framework.

I build a mern stack app. I can choose if I want to use Auth0 client or server side? how/where are the users stored? for example: if my app offers editing posts, but you have to be the creater to edit. how do I check that? is the important thing the token in the end? do I have to store the tokenId into my userPost document in mongoDb? I'm a bit confused. can you help me?

@DaveGrayTeachesCode

Жыл бұрын

If you have lots of questions about Auth0, their docs are the best place to find answers: auth0.com/docs

Can you make a tutorial on how to implement this in the mern stack?

@DaveGrayTeachesCode

Жыл бұрын

Good request! We could take the intro a step further and use the auth it provides. Auth0 also provides documentation for this. 🚀

@sajawalhassan1f12

Жыл бұрын

@@DaveGrayTeachesCode Could you please send the documentation link? I could not find it anywhere.

言简意赅，直奔主题；内容丰富，才思敏捷。

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words, Wei! 🙏🙏

Could you show please how to implement your own social networks authentication

@DaveGrayTeachesCode

2 жыл бұрын

Hi Daniel - each social network has their own API. That makes each integration its own task, but Auth0 makes it much easier as I show in this video.

How do you call an API securely using the react-auth0 package?

@DaveGrayTeachesCode

2 жыл бұрын

The auth0 package is only for interacting with Auth0. Auth0 does support user roles but it is not automatically configured for you. You can connect with APIs independently and those APIs may provide secure keys, JWTs, etc.

Hi Dave, when ever I insert npm start, the webpage is blank with nothing on the screen. I have followed your instruction strictly. What could be causing this issue?

@DaveGrayTeachesCode

Жыл бұрын

All I can do is provide my source code in the description and suggest you compare for any possible differences. We all make mistakes. You may have something different even though you think it is the same.

i get an error on client id and domain in ts it says "Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'."

To whom it may concern, "Social Connections" has been moved to "Authentication > Social"

@DaveGrayTeachesCode

Жыл бұрын

Good info - thanks for sharing!

Can Auth0 be used with php functionality?

@DaveGrayTeachesCode

Жыл бұрын

Sure looks like it: auth0.com/docs/libraries/auth0-php 👀

I get logged out when I refresh. Do you know why? edit: think I got it. the Auth0Provider has a prop called "cacheLocation" that you must set to "localstorage" (cacheLocation="localstorage").

@DaveGrayTeachesCode

Жыл бұрын

I advise against storing any login / auth data in localStorage. Not very secure. See if you can get a secure http only cookie - like the strategy I describe here: kzread.info/dash/bejne/oH1ssruTfqnakcY.html

David can I use Auth0 with a token based authentication endpoint

@DaveGrayTeachesCode

2 жыл бұрын

Yes, you can. Read the Auth0 docs. You change some of the settings in their dashboard for it.

@nanakwekuotoo1775

2 жыл бұрын

@@DaveGrayTeachesCode okay I'll look into it

I request the implementation of oauth2 from scratch, without any 3rd party libs, like jwt does 😀

@DaveGrayTeachesCode

Жыл бұрын

An ambitious request! Forget the "made easy" part lol 😀There is a difference between jwt and oauth: www.wallarm.com/what/oauth-vs-jwt-detailed-comparison I do cover jwt in detail in this series for frontend: kzread.info/head/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd ...and in this series for backend: kzread.info/head/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw

I don't get it, where is the back-end implementation?

Man i am very lagging in css how can I improve?

@DaveGrayTeachesCode

2 жыл бұрын

You can join me as I review the basics while creating my CSS for Beginners playlist: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit One new video in this per week until I finish. I want to keep getting better at CSS, too!

Where passport.js fit in here?

@DaveGrayTeachesCode

2 жыл бұрын

That's another solution and another tutorial I should make. 💯🚀

there is nothing in your files

aaa

ddd

i want that users can only access root url before authentication and if he tries to add additional parameters like /dashboard to url before login then he gets redirected to root url, how can i do that in auth0?

@DaveGrayTeachesCode

Жыл бұрын

Check login status and if false, redirect to login. Here's a video on protected routes: kzread.info/dash/bejne/oYmOzLFpYLHRmLw.html

Can anyone hlp with below error? This site can’t be reachedCheck if there is a typo in undefined. If spelling is correct, try running Windows Network Diagnostics. DNS_PROBE_FINISHED_NXDOMAIN

hi Dave, after I do a 'npm start', i see the Sign in button screen on my local host browser. However when i click on Sign in, it redirects me to undefined/authorize?redirect_uri=http%3A%2F%2Flocalhost%3A3000&.....I can confirm that i have configured the domain name and client id in the .env file. Can you please help ??

@DaveGrayTeachesCode

Жыл бұрын

Auth0 is not getting your domain value for the redirect. To be safe, check their documentation. They may have changed something since I made this video. It has been months.

@balu2gani

Жыл бұрын

@@DaveGrayTeachesCode Thank you

@alexparsons909

Жыл бұрын

For anyone having this issue try moving your .env up a directory to be even with src not inside the folder. That's what worked for me.

@Ann-jf2tz

Жыл бұрын

​@@alexparsons909 THANKYOU IT WORKS!