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: ua-cam.com/video/RVFAyFWO4go/v-deo.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: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
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
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 }}
Hi Dave it would be nice doing a tutroial on automation, testing, continous integration and deploying to production. Your tutorial is always refreshing.
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.
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.
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?
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
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!
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.
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?
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
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 .
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: ua-cam.com/video/hIaGzJ3txqM/v-deo.html
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.
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'."
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!
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").
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: ua-cam.com/video/nI8PYZNFtac/v-deo.html
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?
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.
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
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?
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!
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.
@@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.
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.
@@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
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: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html ...and in this series for backend: ua-cam.com/play/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw.html
@@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!
You can join me as I review the basics while creating my CSS for Beginners playlist: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html One new video in this per week until I finish. I want to keep getting better at CSS, too!
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?
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 ??
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.
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: ua-cam.com/video/RVFAyFWO4go/v-deo.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: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
Dave, you're on the top 5 best people to learn from, literally. Please keep going with the videos and tutorials!
Thank you, Lucho! 🙏🙏
tell me the rest 4 pls, thx
@@davidlee588 freeCodeCamp, Coding Addict, Traversy Media, Bro Code
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
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
}}
Good note if this is an update from Auth0 since the video was made.
Should be pinned
Hi Dave it would be nice doing a tutroial on automation, testing, continous integration and deploying to production. Your tutorial is always refreshing.
Thank you, Babatunde! Those are excellent suggestions. 💯🙏
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.
I'm glad it helped you, Grace! 💯 Thank you for the note 🙏
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.
If you're using vite for example, you have to prefix the .env values with VITE_AUTH0, instead of REACT_APP_AUTH0.
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?
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
Great info to add here, Ahmad! Thank you for your input. 🙏💯
You explained auth0 well to a newbie web developer student like me
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 UA-cam.
Thank you for the kind words, Javed! 🙏💯
Wow dave so quick and easy! Thank you so much for this!
You're very welcome!
you have something different in every new in each tutorial
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!
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.
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?
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. 💯
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?
The user interface is always frontend which is where we add Auth0 to our apps. Auth0 handles the backend on their servers.
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
Great tutorials man!
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 .
Thank you! Rolling your own off is a good learning experience. That said, I prefer to use a service like Kinde for most projects.
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 ?
To whom it may concern, "Social Connections" has been moved to "Authentication > Social"
Good info - thanks for sharing!
I liked and subscribed all love from South Africa. Keep up the good work Champ. Its not going unnoticed. #happycoding
LOVED IT MOST
make component of how to check net connection available or not ?
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: ua-cam.com/video/hIaGzJ3txqM/v-deo.html
Hello sir. Please do a email verification on this series. Thanks
I love your tuto thanks 🙏
You're welcome!
hi dave why we dont see any access token or refresh token in this tutorial ?
Wow, Auth0 seems very easy. I just loved it 😍
Thank you Dave
You're welcome! 💯
Sir, I am waiting for your OAuth course
Great content here Dave. Thanks for giving them all for free.
You're welcome!
Were you a professor? Your videos are like a video book. Great👍
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 for the content, really enjoying your channel
Glad to hear it, and you're welcome! 💯
Thank you! This is very much appreciated!
You're very welcome!
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'."
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
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!
Thanks for the reply, have you got a discord channel if not would be great if you can make one.
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
Fantastic video!
Hey dave ! Can you cover a Rxjs-React Course ? Thanks
I'll look into this! Thanks for the request 💯🙏
thank you very much Dave!
You're welcome!
Am from Africa. In have to say you're among the best.
Thank you, Eugene! 🙏🙏
Many thanks! GJ!
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").
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: ua-cam.com/video/nI8PYZNFtac/v-deo.html
Thanks so much that was pretty useful.
Glad it helped!
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?
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.
Thank you !
Glad I could help! 🙏
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
auth0.com/docs/customize
I don't get it, where is the back-end implementation?
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
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?
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?
Good request! We could take the intro a step further and use the auth it provides. Auth0 also provides documentation for this. 🚀
@@DaveGrayTeachesCode Could you please send the documentation link? I could not find it anywhere.
Could you show please how to implement your own social networks authentication
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.
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
I'm sure there is. Material UI is for design so it could be combined with any JS logic, library, or framework.
you are perfect.
thank you☺
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!
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.
@@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.
thanks, really !
Welcome!
How do you call an API securely using the react-auth0 package?
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.
Thanks sir ❤️
You're welcome! 💯
thanks Dave 🥰🥰🥰
You're welcome! 🚀🚀
Can Auth0 be used with php functionality?
Sure looks like it: auth0.com/docs/libraries/auth0-php 👀
David can I use Auth0 with a token based authentication endpoint
Yes, you can. Read the Auth0 docs. You change some of the settings in their dashboard for it.
@@DaveGrayTeachesCode okay I'll look into it
thank you so much for the useful video ✌🤞👍🙌👌
Glad it was helpful! 💯
@@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
@@mahendranath2504 thank you very much!
I request the implementation of oauth2 from scratch, without any 3rd party libs, like jwt does 😀
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: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html ...and in this series for backend: ua-cam.com/play/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw.html
❤ from south india... Thanks for the video 🙏🙏
You're welcome! 🙏🚀
@@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!
@@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!
言简意赅，直奔主题；内容丰富，才思敏捷。
Thank you for the kind words, Wei! 🙏🙏
Man i am very lagging in css how can I improve?
You can join me as I review the basics while creating my CSS for Beginners playlist: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html 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?
That's another solution and another tutorial I should make. 💯🚀
there is nothing in your files
Это лучшее объяснение материала по данной теме. Thx, Dave!
Thank you for the kind words! You're welcome!
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?
Check login status and if false, redirect to login. Here's a video on protected routes: ua-cam.com/video/oUZjO00NkhY/v-deo.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 ??
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.
@@DaveGrayTeachesCode Thank you
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.
@@alexparsons909 THANKYOU IT WORKS!