React Firebase Authentication Crash Course With Context API and Protected Routes For Beginners
In this video we will explore the React + Firebase Authentication combo. We build an Authentication App to create new users, login and logout functionality. We will see how to use Context Api to management Auth state in the application.
We will also build Google Sign using Firebase Google Authentication Provider and make the protected routes accessible only to Authenticated Users. So we have a lot to learn in this 50 minutes tutorial.
Please use the timestamps mentioned below to jump to any topic and also checkout the reference videos and links.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
⭐️GitHub link for Reference⭐️
github.com/dmalvia/React_Fire...
⭐️Reference Videos and Links⭐️
firebase.google.com/
react-bootstrap.github.io/
reactrouter.com/docs/en/v6/ge...
Protected Routes - • Protected Routes in Re...
Context API - • React Context API Tuto...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:20 - Application Demo
0:02:32 - Code Walkthrough
0:05:15 - Firebase Project Setup
0:06:53 - Install Firebase and Config Setup
0:07:45 - Enable Firebase Authentication
0:10:13 - Adding Routes (React Router version6)
0:14:34 - Context API for Authentication
0:22:50 - Signup Component Firebase Integration
0:31:00 - Login Component Firebase Integration
0:35:08 - Firebase Protected Route Setup
0:42:58 - Adding Firebase Logout Functionality
0:44:20 - Sign In With Google
0:48:52 - Forgot Password Assignment
0:49:51 - App Testing
0:50:13 - Outro
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React in One Project - • Learn React JS with Pr...
React Redux Toolkit Tutorial - • React Redux Toolkit wi...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn React Hooks - • Learn React JS Hooks |...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- React Firebase Authentication Tutorial
- React Firebase Login Authentication
- Firebase Google Authentication
- Context API And Protected Routes
- Firebase v9 Crash Course
⭐️ Hashtags ⭐️
#react #firebase #authentication #tutorial
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.
Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉
when we login for the second time with google signin which was already registered it was overwriting the previous auth can you help me out
after u login u redirect to some other page but when u enter login manually in address bar it logs u out and shows login page again how to deal with that
Really good and clear explanation. I think though there is a little detail in the logOut function. You should set the user to the default value, in my case, null function logOut() { setUser(null) return signOut(auth); } regards!
@@jeevankrishnagorrepati1599 did you get the sol
thank you so much
Thanks so much! This really helped me to understand the authentication process. I had been completely stuck and overwhelmed but this video really made sense and made it easy.
Thanks a lot man! This class was very userful!!!
This video is so easy to understand , follow and also well detailed! Thank you.
you are a very good teacher, it's rare to find teachers that are precise and direct and at the same time very clear in explanation. Thank you.
Hi, I am currently trying to wrap the app component with the context provider as shown. I am using NextJS and every time I wrap the _app.js; the page just breaks with no console errors. Just goes blank on my local host. Hopefully this is enough information that you can help me with. Thanks
You've got a sub from me dude! Awesome work!
The best video about Auth with React and FireBase on KZhead! Trust me!
I don't usually comment, but thank you. You are very helpful and clear when explaining how things worked. Loved the video! Keep up the good work.
Glad it helped!
Your videos are really informative. Thanks for your effort. This tutorial is also well designed. Thanks again.
Great explanation. Very helpful. Appreciate your effort. Thank you.
Very nice & quick explanation to cover the entire topic. Wonderful 😀
Genial hermano. muchas gracias, habia visto muchos videos pero ninguno me sirvió como este.
Excellent!
Thankyou sir for this tutorial it was really helpfull bit confused on useEffect part
A Clean Way to Learn Authentication , Highly Appreciated❤❤😊😊
Thank you soo muchh!!!! This was very very helpful!!!!!! You are an absolute gem! I was stuck on this for a while but your video helped me implement authentication! 💖
You are the GOAT🐐. Thanks for everything.
i'm gonnnu give a big thumps up👍 and dab
thank you soo much sir , it was soo helpful and you made it soo easy to understand for us. ❤❤
🤜🤜Thanks a lot your content is very useful
Excellent ! Thank you for your clear explanations
Glad it was helpful!
Another Banger!👌
Thanks!
Thanks for this... it's really helpful...
hey Dipesh its really Awesome and useful to create firebase login and logout system
EXACTLY WHAT I REALLY NEED FOR MY SENIOR PROJECT. YOU ARE A GOD.
Thanks! It's very helpful for me
Glad to hear that!
Thanks for this video
Very Helpful. Thanks for using the latest features of React Router.
Glad it was helpful!
Your explanation on concepts is very good bro
Wow this is the exact tutorial I was looking for
Wonderful! Hope you enjoyed the tutorial!
Excelent video!
Great video for learning Authentication, You are changing people's lives.
Nice video, very understandable, Thank you so much.
Glad it was helpful!
Great video ❤ Thank you so much for being very helpful and clear in your instructions. Keep the good work going 💯
My pleasure 😊
thank you my friend :)
Excellent
I just realized ChatGPT will never be as helpful as these excelent indian programmers lmao. Well done man! You have no idea how helpful this video was, keep the good work:D
Thanks Dipesh.....this was really helpful
Thanks!
This tutorial is so amazing 🔥🔥
Thanks and glad you liked it!
Great Explanation as always Dipesh. I am successfully able to add firebase Authentication in my website. Although, I got stuck for 24 hrs at one issue but just now I found out I made a mistake in component will Unmount('unsubscribe') method. React Rocks !
That's wonderful. 👍
Very helpful sir im learning react through your videos...thank you so much.
That's awesome! Keep learning
Thanks alot for this been looking for how to do it for months........ one issue though whenever the i enter the protected routes if i refresh it'll take me back to login page and i'll like to integrate firestore with it also
nice explaination bro
Really helpful this video... Thank you so much... Sir❤️❤️
Most welcome 😊
Thank you for this Tutorial sir
awesome video, can you make or recommend how to make the role base or multiple login react with firebase database?
Awesome video +++++++++++++++ Thank you 😃
you are the best
Thank you sir
Hi Dip .. Really nice video … I have implemented the Microsoft provider but pop up instantly closes and in console it say auth/internal-error I have checked all the settings of azure and firebase , all seems ok Any thoughts on this Contacting viva react app
Nice lesson Thank you
Glad you liked it!
Hey @dipeshmalvia what should I do if a logged in user can access the login page after successful login after clicking back button. It should redirect to dashboard/home page. Please suggest something as I am trying to do it from 2 days.
Ur videos are amazing brooo thanksss bhai
Thanks and welcome!
what if my login and signup codes are in different components where should I setup the authState Persistence?
very helpful and informative
Thanks! Glad it was helpful!
Neat and clean.. Bro..
Thanks 👍
hey! buddy I want ur help. I've configured firebase for my project for google sign in using popup and idk why the popup is not opening on my localhost, but as soon as I close the server, it opens. it;s really weird and I'm frustrated. I've tried all the tips from StackOverflow, downgraded the firebase version to 8 also. nothing worked. plssssss help!!!!
Thanks a lot for the great content and the explanation too! Could you please do a full-stack authentication maybe with Rails as a backend and PostgreSQL for database 🙏
great tutorial however I have got an error on the firebase regarding the google sign in, the error is auth/auth-domain-config-required
You are a god
Great work sir. I'm trying to include a loading state when a user tries to login. I tried it out but, I've encountered so many errors. Can you or anyone help me with this?
Sir, you may have just saved my graduation
After pressing refresh button on home screen I keep getting sign out and redirected to login page, how to solve it?
Hi @Dipesh I followed your tutorial and it worked fine for me. I am trying to implement the forget password and reset password email but its not working. Can you please help
I am getting error in value in userAuthContext.Provider
Can u do same video it with apple id sign in and Google sign in.
error handling with try and catch doesnt work , solutions ??
whenever i login with registered user and then refresh i redirect to login page and currentUser state becomes null. idk why
In userAuthContext file..it is not allowing to take useStare nd useEffect as...usercontexprovider is not a part of react
Sir followed your whole code but one signup function is not working..here is the problem TypeError Cannot read properties of undefined (reading 'userSignUp') const {userSignUp} =userAuth() this line is showing error
thank you bhai, mja aa gya ab firestore and storage pr video aa jaye to mja hi aa jayega
Video already aa gya hai bhai...check the lastest upload
Thanks ❤️
You're welcome 😊
22:35 you can return only ref to the unsubscribe function, without anonymous wrap function :) By the way, great tutorial!
Thanks for that!
I think I am getting an error because of that but I am not sure. When I login and try to redirect I get white screen and the following errors: - Class constructor Button cannot be invoked without 'new' - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Can you help me or at least tell me what the problem might come from? I just started to learn React so I don't really know what to do here.
I found the problem, the problem is in the Home page with the bootstrap Button. If I use a normal JSX , I don't get the error anymore.
@@catagreendevil Class constructor Button cannot be invoked without 'new' import { Card, Form, Button, Alert, Container } from "react-bootstrap"; **import from react-bootstrap not from bootstrap - this solve my problem
sir how to add admin role and user role ? any video for that
Can you make with a custom user claims like this
Very informative video sir Really appreciated. I am having an error since a week now Saying element type is invalid expecting a string or a class/function but what undefined you're likely forgot to export your component from the file it's defined in or you might have mixed up defaults and name imports
i've the same error, do u got the solution ? please
When you create an account it is automatically keeping you signed in. So thats not working as it looks in the background at all.
Amazing walkthrough! You explained everything! I was having quite hard time with redirecting and protected route before, but after following your tutorial I managed to implement it! Great content! However, I have one issue, when I reload the page from the protected route, the Login page will be displayed and not the protected one, even though I'm already logged in... any thoughts?
Thats because the "user" is only a state, which is cleared when you refresh the page. You can use the setPersistence(auth, browserLocalPersistence) to save the user in localstorage, and when the page loads the first time (useEffect), you check if there is any value in localstorage and fill the user state with that data. This way you will keep logged in. With this method, when you signOut() the localstorage is automatically cleared.
@@Gustavo-nz1vt oh yeah, I thought I would need it to store in local storage, but thanks to you, I can now use setPersistence and not do it manually myself! Thank you!
hey dude, i just left a comment regarding this but i will reply with it here again. @38:13 -- when you refresh the page, it logs the user out even tho technically the user is logged in and the UI makes it appear like the user is logged out the way u fix this is you put the 'onAuthStateChanged' function inside 'ProtectedRoute.js' AND you create a useState like so: const [user, setUser] = useState({}) onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); }); just make sure you import the onAuthStateChange function and the 'auth' from 'UserAuthContext.js' into 'ProtectedRoute.js' the if statement should be left as is and when u refresh your authentication should persist. You do not need to use Local Storage
@@westernpigeon thanks, I fixed it with firebase function setPersistence, where you can set either local storage, session storage or no persistence. I set it to session storage and it works fine :)
@@flpmko Hey, do you have any tutorial or link you followed. I want to work on this.
A bug i am facing : I am displaying a ("/") home component, which is unprotected and i am displaying a button on that which is for login, when i click i go to login ("/login"), and same for signup, The issue is when i am signing up, and redirecting to login so that user logins and then goes to the protected route. But right after signup, my unprotected routes are getting unlocked and i am able to access it right after signup and before login.
I was looking for a video for a junior developer, unfortunately it skips too much of the UI building part.
Well done with easy step-by-step explanations. On the firebase sign up, is there a way to send a confirmation email to the new user instructing him to click on the email link, before allowing him access? Thx
You can use this method sendEmailVerification
😍
Hi bro it's nice but am applied this it is accesing by path like localhost/home without authentication
but did lots of thinks eariler agt the end it throughs errors
nice video but you forgot to save user in the firestore :p
Thanks
Welcome!
Even when you're logged in and try to access home from some other place...you just can't you have to login again. It's a bug in your code.
Great content but i would like to see how you're going to store client site generated access token without storing in local storage and in Cookie.
@dipesh please enhance with it
I have to understand this what is the use case you are trying to achieve so that I can work on it. Usually tokens are generated from Auth server and passed to client application so that they(client app) can use the token and access the resources from resource server.
I was implementing this into one of my projects and i believe there is a bug in your code. @38:13 -- when you refresh the page, it logs the user out even tho technically the user is logged in and the UI makes it appear like the user is logged out the way u fix this is you put the 'onAuthStateChanged' function inside 'ProtectedRoute.js' AND you create a useState like so: const [user, setUser] = useState({}) onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); }); just make sure you import onAuthStateChange and the 'auth' from 'UserAuthContext.js' into 'ProtectedRoute.js' the if statement should be left as is and when u refresh your authentication should persist and you should only be logged out when you click logout. hope this helps
hi, can you please demonstrate with your source code?
Hi, can you help me by showing the code? I cannot seem to make it work
Could you please provide the starting files?
i did the same then also there is no user data in firebase
Please make a video on forget password as I am new and I am not able to do it
Make video on react on AA based on token
Sir any MERN project coming, from your side in the future videos?
Yes, offcourse that is in my to-do list. Appreciate to share ideas if you have any for MERN project videos.
@@DipeshMalvia actually I want a video of otp verification via sms and email id too, in MERN
How to add the name with firebase data
What if I want to add LogOut functionality in a seperate Navbar file, I tried but it gives the following Error : Uncaught TypeError: Cannot destructure property 'user' of '(0 , _context_UserAuthContext__WEBPACK_IMPORTED_MODULE_0__.useUserAuth)(...)' as it is undefined.
bhai user ko dekh auth file me same h ky or fir render shi huaa ky
@@RahulGupta-yl3jk yes, but yet the same error
I had this same issue the problem is your header is most likely not in the UserAuthContextProvider go to your app.js and where your routes are make sure the header is in there. This game me so much issues for no reason.
just rap the index.js with the provider, this means that the user can bot be accessible to your component
how can we persist the user state in our app, do we need to use localstorage to do that stuff, could you plz explain in brief with reference to this code.
@Samuel lebaron yeah, I find the fix instead of setting the value of user to "" in the useState make it an object. {} ex - const [user, setUser] = useState({}); works for me!
hi thanks for this video but i am having an error from the login file: Uncaught TypeError: Cannot destructure property 'logIn' of '(0 , _context_UserAuthContext__WEBPACK_IMPORTED_MODULE_2__.useUserAuth)(...)' as it is undefined. at Login (Login.js:12:1)
rap with the userAuthProvider to the index.js
I am getting error googlsignIn is not a function