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.
@@faiztriedcode @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!!
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.
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.
@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
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.
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
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, 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?
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?
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.
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 ?
Hi, this video is really helpful. Although, i am getting the same error as many others while hitting the Log In button, If anyone got any solution to it, kindly share. Thankyou. :)
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
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
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 so much for making such a straightforward video! One issue though, when I click the login button and I am taken to the Auth0 login page, I get an alert saying that I am using Auth0 development keys. How should I fix this issue?
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.
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
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)
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!
PLEASE do something with image uploads. I need to get better with AWS S3 buckets and Multer and saving to MongoDB that whole crazy mess. Maybe with title and description so I can see how to save an image with other items in a form. Sorry I'm rambling...
![[DOKKAN BATTLE] Worldwide Campaign Announcement Video](http://i.ytimg.com/vi/zxfEiMksZQs/mqdefault.jpg)
👉 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 ?
@@faiztriedcode @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.....
Just wrap your code in you don't need extra packages for formatting the JSON 😁
hey, thanks buddy for tip
Awesome.
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
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
what if I want to use my own login screen and then redirect to authentication? without entering the credentials in Auth0 login screen?
application is starting well ,but after log in it is not loading the next respective page ,please help
Who could possibly dislike this video? Ridiculous.
Random question, but what VSCode theme are you using? Really dig the colors!
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.
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.
Yes, more about authentication. Thanks.
@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
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
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.
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?
Liked the video, subscribed, want to learn more about authentication! Thanks man!
Brilliant content! No need to speed up the video... you go at a great speed by default.
Signin with Google causing 400 error it redirects to /authorize, but it works with user\password
Can u please post more about auth0 , this short tutotrial was amazing
great job - with so many of these types of vids out there, yours stands out
Thank you!
What editor and font theme is that? Really nice
Cobalt2 and Fira Code Font
@@codeSTACKr Thanks you!
my react app on desktop is working fine but on android browser its a blank white screen after using auth0. please help me out
Hey mate , in console after clicking login button it shows,Loginwithredirect is not a function
Very easy explanation and best video out there. Thank you man.🙌
Glad it helped!
Love this video!!! Thank you for making it easy to understand!!
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
Super clear, super good audio. I love you
Yay, thank you!
Great tutorial! A video about protected routes using react-router would be nice
Great suggestion!
+1
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!!!
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?
This video is really great. Easy to understand. I will definitely build up a sample application using Auth0.
Glad you enjoyed it!
I just bumped into this tutorial and it was awesome! To be honest, it’s clearer than auth0 docs.
Thanks for sharing
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 :)
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 😅😅😅
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.
Best, concise video on the topic. Subbed 👍
Awesome, thank you!
amazing solution! my new goto for react auth components
Great!
Yes yes, more auth videos pleaseeeeeeee... This was really great,
Nice tutorial! A video about login with github using OAuth would be nice
File me under biased too, but that was so clear and easy to follow. Thanks ❤
How easy it was ! Thank you very much ❤️.
You're welcome 😊
so what is related to JWT ? or its the same we can use jwt or 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"
I followed the exact steps in tutorial, but the social connection signin is not working (Google...) give me Error 400
For me also
"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.
More on auth0 please.
You started coding before I was born
_I was born in the year 1995_
😂
Please, teach us more about Authentication. Regards!
Easy and integrated in electron thanks buddy !
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 ?
Malik ke giye bol Khoka esheche !!
Hi, this video is really helpful. Although, i am getting the same error as many others while hitting the Log In button, If anyone got any solution to it, kindly share. Thankyou. :)
Thanks for this, appreciate it!
I have a doubt, I didn't understand what you at 16:20.
Can you please explain
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
thank you soo...... much, it helped in my reactjs app, the code was literally so little
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
wow Auth0 looks so good
what if i want to use context js and wrap my app around AppProvider as well as auth0 ??
How can you accomplish the same with a local DB using an API?
Great Tuto ! thanks
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.
If user signup in react application then how to make automatic login in wordpress account using sso please guide
Thank you so much for making such a straightforward video! One issue though, when I click the login button and I am taken to the Auth0 login page, I get an alert saying that I am using Auth0 development keys. How should I fix this issue?
my authorize page is not coming its givig error VM83:6770 crbug/1173575, non-JS module files deprecated. help
Hello sir I have an error in reactJs login authentication. How can I do
very easy to follow and direct thanks
Glad it was helpful!
Thanks for your video sir 🤗 can you explain how to implement microsoft authentication
Want to learn more about authentication
Yes please. More authentication material. Much appreciated!
More to come!
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.
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
Great video! but i got a question, how can I handle multiple type of users? I mean, like an admin and so on...
Hi! Just wanted to know if do you have some resource or to utilize email address whitelist? Thank you very much.
Hey, Thanks for this video, this helped me a lot! I'm forever grateful!
Glad it helped!
Brilliant, so simple and well explained.
Thank you so much. Subscribed!
Awesome, thank you!
I tried using this in my already existing project. But when I clicked the newly created login button, nothing is happening. Somebody please help
Thank you! This helped so much!
You're welcome!
If we refresh page, login is gone and we need to re-login. How to solve it?
Thanks for this video very simple to follow and packed with useful info
Love from india..please teach to debug the code on vscode
Your VS Code theme?
How can I tell Auth0 to redirect to a another page instead of the home page?
I love it, but i have a question, is possible to edit the login screen of auth0?
Everytime i refresh the page i have to Log In again in my application. Can anyone help me please??
what a fancy cursor.. is it a plugin? and is it cross-IDE (JetBrains IDEs ..etc)?
It's just VS Code cursor settings
You just saved me hours. Thank you!
Glad I could help!
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
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)
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!
this was pretty cool
The video is good. I would like to encourage you to explain it more. Thank You
PLEASE do something with image uploads. I need to get better with AWS S3 buckets and Multer and saving to MongoDB that whole crazy mess. Maybe with title and description so I can see how to save an image with other items in a form. Sorry I'm rambling...
Thank you very much! your video is very helpful!
Glad it was helpful!
What is the name of JSX autocomplete addon?
Can we customize Auth0's login and signup modal?