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.
@@compilexfaiz @Muhammad Faiz Khan React/next alone isn't gonna cut it. Networking is my most successful way of getting gigs; I even get messaged on LinkedIn if your CV is promising. - You need to sell solutions, not your skill set. A client doesn't care about what React/NextJS is; he cares about how you develop his vision, which is mostly a fancy/minimal website experience. Skilled Frontend Dev's are in demand. Several RUclips channels are even advertising for positions. I imagine most clients feel more comfortable, with the following: - Excellent English because a client needs to feel comfortable with you communicating in a way that avoids misunderstandings. - Computer Science Degree (finished, enrolled, or similar): Despite everything you hear on YT or read online on course websites, most clients don't wanna work with beginners. They think of a degree as something as a "proof of competence." It helped me a lot with more conservative, higher-paying jobs. - Portfolio / Open-Source Contributions: As said, showing you are not a beginner, like the other guys on Fiverr or similar, by showing off how competent you are in a Portfolio assures a client can know what he's getting from you. Most of them don't bother with the portfolio, but it's a way of taking confidence in your work. - People notice that. Open Source Contributions can build your portfolio significantly. Even more, if they're on big projects. Also, they are a good way of networking. tl;dr show off your work and use your soft skills. Networking lands most jobs.
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!!
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.
Great video thank you so much. This react auth is a turn on and is helping me want to learn more (again) about react for building something with a login. You rock bud.
@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
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 redirectUri={window.location.origin} in the index.js. Do you now this issue or how to troubleshoot it?
Hi @@SuhweeSoftware. When that happens to me, it's usually the domain parameter in the Auth0Provder that's not being passed in properly. If you check the console log, you might see what URL it's actually trying to go to, and it might be undefined/... Double check the value is being pulled in from the .env file (you'll need to stop and restart the node server to reload any changes) 🍀
@@bendechrai Ah. So I fixed the domain and clientId paramater. I had dashes '-' in the code but in the .env file I had underscores _. Now a webpage loads at least but it is saying. "oops something went wrong; callback URL mismatch". I went and checked the Auth0 cite and I still have the correct information in the boxes so not sure now.
@@SuhweeSoftware yay for progress! Okay, if you look in the logs from the Auth0 dashboard you should see the message that tells you what it's getting. How does that differ from what it's expecting?
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
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.
there you have it.. explained very well.. it seems to me that its like offloading your users data to a third party in exchange of flexibility the question is as a developer do you want that?
Is there anymore use cases for things such as Auth0 like chat rooms and such? Or permissions and admin panel access? I’m just curious as to how to deploy such things.
Thank you! Why at 12:35, I don't see the false displayed in the browser? I console.log (user) but it's showing me undefined. I wondering why the "false" isn't showing up on my screen.
something must have changed in the Auth0 API, I'm enable to see the return value after I log in. but if I'm logged out, I'm not able to see anything with JSON.stringify(user)
The snippets are from the extension Joel Garcia mentioned. The auto import is just built into VS Code. Start typing the component and it will import it.
Hi did you create a vids for Auth0 where you set up tenent settings, to allow someone to login using a HTMLRequest. To get that working you need to set up Default Audience and Default Directory. Auth0 documentaion seem very shy in explaining what they are. Thanks
Thanks ! By far the best , clear and easy tut . Quick question (generic) . When I deploy my app say on firebase , Can I still use .env file contents ? Will that still work ? Or should I be making any changes ?
Hey I'm running into a problem when I click the log in button it can't reach the authentication page. What could be the problem. It says it's undefined in the url bar
The problem is that you have to create a login button first for the Auth0 loging page to show up. Which is counter intuitive, you want users to arrive straight into the log in page, not another page with a login button you have to click, to then be redirected to the actual login page.
Is it possible to use Auth0 to manage additional user info? For example, I'd like to offer a service through a monthly subscription through a web app. I could check whether or not the user has an active license by putting a "licenseExpirationTimestamp" or something like that alongside the user's info. Would you recommend using something else, maybe Firebase or MongoDB Atlas (or MongoDB self-hosted) or is it possible to do this with Auth0? I've looked into it, but since I'm new to React + Express Node.js I'm not really sure about what the optimal solution for my problem would be. Thanks!
can i somehow manage user roles (or other custom user attributes) in the registration itself? also, besides the obvious user object, can i store roles and other custom attributes in the local storage under the same user object? i'm trying to play with it and the code gets messy
How do you set this up if you only want 1 user to be able to log in. For example if u want to access some hidden features of ur home page for maintenance etc... when I use the 0auth module it seems anyone can log in or register.
I can't believe this company locked me out of the accounts I've created just because they want to make a sale for a big organization. I have wasted so much time on this only because they were controlling my inability to log in. I will post this again and again.
you were locked out? can you explain? I am on the part where you first login and it keeps telling me my credentials are wrong even though I am using them to login in a different window in the same browser
👉 Sign up for my newsletter to stay up-to-date on my new course:
codestackr.com
hi
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.
please help me out my react app on desktop is working fine but on android browser its a blank white screen after using auth0
you, mate, saved my freelance carreer.
mine as well
hey can you help me to get freelance react and next js projects ?
@@compilexfaiz @Muhammad Faiz Khan React/next alone isn't gonna cut it. Networking is my most successful way of getting gigs; I even get messaged on LinkedIn if your CV is promising. - You need to sell solutions, not your skill set. A client doesn't care about what React/NextJS is; he cares about how you develop his vision, which is mostly a fancy/minimal website experience.
Skilled Frontend Dev's are in demand. Several RUclips channels are even advertising for positions.
I imagine most clients feel more comfortable, with the following:
- Excellent English because a client needs to feel comfortable with you communicating in a way that avoids misunderstandings.
- Computer Science Degree (finished, enrolled, or similar): Despite everything you hear on YT or read online on course websites, most clients don't wanna work with beginners. They think of a degree as something as a "proof of competence." It helped me a lot with more conservative, higher-paying jobs.
- Portfolio / Open-Source Contributions: As said, showing you are not a beginner, like the other guys on Fiverr or similar, by showing off how competent you are in a Portfolio assures a client can know what he's getting from you. Most of them don't bother with the portfolio, but it's a way of taking confidence in your work. - People notice that.
Open Source Contributions can build your portfolio significantly. Even more, if they're on big projects. Also, they are a good way of networking.
tl;dr show off your work and use your soft skills. Networking lands most jobs.
@@albert21994 thanks....above information is really helpful.....
I'm biased but this video was great!! Auth0 makes auth in React so easy :)
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!!
Thank you! I appreciate that!
@@codeSTACKr hi , thanks for thr content and I want to know if it's totally free
Just wrap your code in you don't need extra packages for formatting the JSON 😁
hey, thanks buddy for tip
Awesome.
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!
please help me out my react app on desktop is working fine but on android browser its a blank white screen after using auth0
Brilliant content! No need to speed up the video... you go at a great speed by default.
Liked the video, subscribed, want to learn more about authentication! Thanks man!
Yes, more about authentication. Thanks.
hello sir why my domain and clientId is undefined after using the .env file
You need to restart server after every change in .env file. So if your server was running and u created .env file after that just npm start again
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.
I just bumped into this tutorial and it was awesome! To be honest, it’s clearer than auth0 docs.
Thanks for sharing
Super clear, super good audio. I love you
Yay, thank you!
Great video thank you so much. This react auth is a turn on and is helping me want to learn more (again) about react for building something with a login. You rock bud.
great job - with so many of these types of vids out there, yours stands out
Thank you!
Yes yes, more auth videos pleaseeeeeeee... This was really great,
Very easy explanation and best video out there. Thank you man.🙌
Glad it helped!
@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
Random question, but what VSCode theme are you using? Really dig the colors!
amazing solution! my new goto for react auth components
Great!
Love this video!!! Thank you for making it easy to understand!!
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 redirectUri={window.location.origin} in the index.js. Do you now this issue or how to troubleshoot it?
I cloned the GitHub repository and added my info to the .env. Still the same error
Hi @@SuhweeSoftware. When that happens to me, it's usually the domain parameter in the Auth0Provder that's not being passed in properly. If you check the console log, you might see what URL it's actually trying to go to, and it might be undefined/...
Double check the value is being pulled in from the .env file (you'll need to stop and restart the node server to reload any changes) 🍀
Thanks for answering this! Caleb, let us know if you are still having issues :)
@@bendechrai Ah. So I fixed the domain and clientId paramater. I had dashes '-' in the code but in the .env file I had underscores _. Now a webpage loads at least but it is saying. "oops something went wrong; callback URL mismatch". I went and checked the Auth0 cite and I still have the correct information in the boxes so not sure now.
@@SuhweeSoftware yay for progress! Okay, if you look in the logs from the Auth0 dashboard you should see the message that tells you what it's getting. How does that differ from what it's expecting?
What editor and font theme is that? Really nice
Cobalt2 and Fira Code Font
@@codeSTACKr Thanks you!
so what is related to JWT ? or its the same we can use jwt or auth0
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
User session I mean
Those are defiantly more advanced features of Auth0. I can create a video on it.
@@codeSTACKr Im in!!
@@codeSTACKr that would be an excellent follow up
@@codeSTACKr Is there any feedback for this?
Best, concise video on the topic. Subbed 👍
Awesome, thank you!
This video is really great. Easy to understand. I will definitely build up a sample application using Auth0.
Glad you enjoyed it!
Thank you... You're content is my favourite!!! Youre giving us the best stuff right now!!! Thank you again!
Wow, thank you!
@@codeSTACKr Agreed you are doing a super job right now!!!
application is starting well ,but after log in it is not loading the next respective page ,please help
Hey mate , in console after clicking login button it shows,Loginwithredirect is not a function
my react app on desktop is working fine but on android browser its a blank white screen after using auth0. please help me out
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.
there you have it.. explained very well.. it seems to me that its like offloading your users data to a third party in exchange of flexibility the question is as a developer do you want that?
I sure do :)
wow Auth0 looks so good
Great tutorial! A video about protected routes using react-router would be nice
Great suggestion!
+1
How did u make your Vscode like the smooth thing like whenever u type or delete Code it's smooth how to do that??
Just have a good pc 😅 I guess
@@chitrangsharma uhm I have Ryzen 7 2700x and GTX 1660 super I guess that's a good pc 😅😅😅
BESTTT
Thanks for this, appreciate it!
Can u please post more about auth0 , this short tutotrial was amazing
Yes please. More authentication material. Much appreciated!
More to come!
I have a doubt, I didn't understand what you at 16:20.
Can you please explain
Is there anymore use cases for things such as Auth0 like chat rooms and such?
Or permissions and admin panel access?
I’m just curious as to how to deploy such things.
How easy it was ! Thank you very much ❤️.
You're welcome 😊
Thank you! Why at 12:35, I don't see the false displayed in the browser? I console.log (user) but it's showing me undefined. I wondering why the "false" isn't showing up on my screen.
something must have changed in the Auth0 API, I'm enable to see the return value after I log in. but if I'm logged out, I'm not able to see anything with JSON.stringify(user)
Perfect, working great. Really nice tutorial!
Easy and integrated in electron thanks buddy !
Who could possibly dislike this video? Ridiculous.
what is the snippet extension that you used? and how did you automatically imported the components too? are those from the same extension?
dsznajder.es7-react-js-snippets
The snippets are from the extension Joel Garcia mentioned. The auto import is just built into VS Code. Start typing the component and it will import it.
Thanks everyone
"site can't be reached" i did exactly what you did and when i click sign in, i get that message.
same here... did you manage to resolve it?
@@jedsalmon890 same here... did you manage to resolve it?
Edit: I stopped my server, and npm started again and it worked.
thank you soo...... much, it helped in my reactjs app, the code was literally so little
Nice tutorial! A video about login with github using OAuth would be nice
Hi did you create a vids for Auth0 where you set up tenent settings, to allow someone to login using a HTMLRequest. To get that working you need to set up Default Audience and Default Directory. Auth0 documentaion seem very shy in explaining what they are. Thanks
You just saved me hours. Thank you!
Glad I could help!
Your VS Code theme?
This channel is awesome!
I appreciate that!
Thanks ! By far the best , clear and easy tut . Quick question (generic) . When I deploy my app say on firebase , Can I still use .env file contents ? Will that still work ? Or should I be making any changes ?
Great video. Super helpful
Thanks for this video very simple to follow and packed with useful info
Signin with Google causing 400 error it redirects to /authorize, but it works with user\password
what if i want to use context js and wrap my app around AppProvider as well as auth0 ??
this was pretty cool
Brilliant, so simple and well explained.
Hey I'm running into a problem when I click the log in button it can't reach the authentication page. What could be the problem. It says it's undefined in the url bar
I love it, but i have a question, is possible to edit the login screen of auth0?
Hi ....I have performed all the steps, on click of login button it is not routed to page , it is showing "This site can't be reached"
How can you accomplish the same with a local DB using an API?
Awesome 👍😀
Thanks 🤗
The problem is that you have to create a login button first for the Auth0 loging page to show up. Which is counter intuitive, you want users to arrive straight into the log in page, not another page with a login button you have to click, to then be redirected to the actual login page.
Hi! Just wanted to know if do you have some resource or to utilize email address whitelist? Thank you very much.
Thank you so much. Subscribed!
Awesome, thank you!
I followed the exact steps in tutorial, but the social connection signin is not working (Google...) give me Error 400
For me also
what a fancy cursor.. is it a plugin? and is it cross-IDE (JetBrains IDEs ..etc)?
It's just VS Code cursor settings
Thank you Sir! Its working 😀
Is it possible to use Auth0 to manage additional user info? For example, I'd like to offer a service through a monthly subscription through a web app. I could check whether or not the user has an active license by putting a "licenseExpirationTimestamp" or something like that alongside the user's info. Would you recommend using something else, maybe Firebase or MongoDB Atlas (or MongoDB self-hosted) or is it possible to do this with Auth0? I've looked into it, but since I'm new to React + Express Node.js I'm not really sure about what the optimal solution for my problem would be. Thanks!
very easy to follow and direct thanks
Glad it was helpful!
can i somehow manage user roles (or other custom user attributes) in the registration itself?
also, besides the obvious user object, can i store roles and other custom attributes in the local storage under the same user object?
i'm trying to play with it and the code gets messy
Thanks . Informative video❤️
Glad you liked it
Great one, I love it
This is great but my .env file isn't being read into the process.env object
Also had this problem. npm i -D react-error-overlay@6.0.9 ... try downgrading this dependency... fixed it for me
Is this implicit grant?
wow! amazing tutorial! thank you so much!
How do you set this up if you only want 1 user to be able to log in. For example if u want to access some hidden features of ur home page for maintenance etc... when I use the 0auth module it seems anyone can log in or register.
File me under biased too, but that was so clear and easy to follow. Thanks ❤
Theme?
Thank you very much! your video is very helpful!
Glad it was helpful!
Thank you! This helped so much!
You're welcome!
What is the name of JSX autocomplete addon?
I can't believe this company locked me out of the accounts I've created just because they want to make a sale for a big organization. I have wasted so much time on this only because they were controlling my inability to log in. I will post this again and again.
you were locked out? can you explain? I am on the part where you first login and it keeps telling me my credentials are wrong even though I am using them to login in a different window in the same browser
Hello sir I have an error in reactJs login authentication. How can I do
If user signup in react application then how to make automatic login in wordpress account using sso please guide
Hey, Thanks for this video, this helped me a lot! I'm forever grateful!
Glad it helped!
does it still work if i don't buy the full version ?
my authorize page is not coming its givig error VM83:6770 crbug/1173575, non-JS module files deprecated. help
Please, teach us more about Authentication. Regards!
what type of extensions and theme you are using..?
Cobalt2 and the snippets are: marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Cobalt2 is the theme
@@codeSTACKr whats that cursor effect. can you please tell?
The video is good. I would like to encourage you to explain it more. Thank You
Great video! but i got a question, how can I handle multiple type of users? I mean, like an admin and so on...
Thank you for your time, amazing tutorial!
Glad it was helpful!
Hi, can we have a sso with this auth0?
Yep! :)