React Firebase Authentication Crash Course With Context API and Protected Routes For Beginners

[@DipeshMalvia]

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😉

[@smitagravat1063]

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

[@nisara2510]

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!

[@kavascgjmd5790]

@Jeevan Krishna gorrepati did you get the sol

[@devsuthar6272]

thank you so much

[@Iqrewardug]

Thank you bro

[@DRVOSSEN]

The best video about Auth with React and FireBase on KZbin! Trust me!

[@Disguised_Angel]

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.

[@DipeshMalvia]

Glad it helped!

[@ankitchauhan9099]

Thank You so much. I found the best Firebase tutorial video on youtube ❤

[@quanduong3390]

EXACTLY WHAT I REALLY NEED FOR MY SENIOR PROJECT. YOU ARE A GOD.

[@DexterrrrX]

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.

[@shubhamokay]

Great video ❤ Thank you so much for being very helpful and clear in your instructions. Keep the good work going 💯

[@DipeshMalvia]

My pleasure 😊

[@kanuchinaza2984]

This video is so easy to understand , follow and also well detailed! Thank you.

[@priyanshramnani1751]

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! 💖

[@Iqrewardug]

Wow this is the exact tutorial I was looking for

[@DipeshMalvia]

Wonderful! Hope you enjoyed the tutorial!

[@carlosnani]

Thanks a lot man! This class was very userful!!!

[@danielmalede]

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.

[@anandkrg]

Great video for learning Authentication, You are changing people's lives.

[@jppd0657]

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

[@westernpigeon]

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

[@ashimshrestha4004]

hi, can you please demonstrate with your source code?

[@jordan0639]

Hi, can you help me by showing the code? I cannot seem to make it work

[@KarolCud]

22:35 you can return only ref to the unsubscribe function, without anonymous wrap function :) By the way, great tutorial!

[@DipeshMalvia]

Thanks for that!

[@catagreendevil]

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.

[@catagreendevil]

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.

[@maheshtamrakar292]

@@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

[@KaranSingh-rn2zk]

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 !

[@DipeshMalvia]

That's wonderful. 👍

[@indrasen9617]

Very Helpful. Thanks for using the latest features of React Router.

[@DipeshMalvia]

Glad it was helpful!

[@salamsheikh5648]

A Clean Way to Learn Authentication , Highly Appreciated❤❤😊😊

[@alainroos5383]

Excellent ! Thank you for your clear explanations

[@DipeshMalvia]

Glad it was helpful!

[@rakeshkundu2872]

You are the GOAT🐐. Thanks for everything.

[@clintbriley1892]

You've got a sub from me dude! Awesome work!

[@imkir4n]

Another Banger!👌

[@DipeshMalvia]

Thanks!

[@adityarout1276]

i'm gonnnu give a big thumps up👍 and dab

[@eliuddyn]

This tutorial is so amazing 🔥🔥

[@DipeshMalvia]

Thanks and glad you liked it!

[@danieldeavila557]

Genial hermano. muchas gracias, habia visto muchos videos pero ninguno me sirvió como este.

[@dcode721]

Thanks Dipesh.....this was really helpful

[@DipeshMalvia]

Thanks!

[@pasalapranathi9015]

hey Dipesh its really Awesome and useful to create firebase login and logout system

[@aburaihan-py4vi]

Excellent!

[@aviworld1995]

Great explanation. Very helpful. Appreciate your effort. Thank you.

[@RahulGupta-yl3jk]

thank you bhai, mja aa gya ab firestore and storage pr video aa jaye to mja hi aa jayega

[@DipeshMalvia]

Video already aa gya hai bhai...check the lastest upload

[@faisalahmad100]

Really helpful this video... Thank you so much... Sir❤️❤️

[@DipeshMalvia]

Most welcome 😊

[@tahirmahmoodhashmi7418]

Nice video, very understandable, Thank you so much.

[@DipeshMalvia]

Glad it was helpful!

[@talatkuyuk6556]

Your videos are really informative. Thanks for your effort. This tutorial is also well designed. Thanks again.

[@saugatmainali7784]

Thankyou sir for this tutorial it was really helpfull bit confused on useEffect part

[@surajdedhia9584]

Very nice & quick explanation to cover the entire topic. Wonderful 😀

[@tp2133]

I am getting error in value in userAuthContext.Provider

[@AyushKumar-16999]

thank you soo much sir , it was soo helpful and you made it soo easy to understand for us. ❤❤

[@pablomarino]

Excelent video!

[@mohammedshahid6663]

Thanks! It's very helpful for me

[@DipeshMalvia]

Glad to hear that!

[@chloe_delinah]

Sir, you may have just saved my graduation

[@TheAppliancePlug]

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

[@paltechy]

Very helpful sir im learning react through your videos...thank you so much.

[@DipeshMalvia]

That's awesome! Keep learning

[@muhammadrabbi2211]

Thanks for this... it's really helpful...

[@Lotus-kb2vg]

Excellent

[@hi-yi7en]

Your explanation on concepts is very good bro

[@dineshj1998]

Neat and clean.. Bro..

[@DipeshMalvia]

Thanks 👍

[@BABLUKUMARBAMBAL]

Ur videos are amazing brooo thanksss bhai

[@DipeshMalvia]

Thanks and welcome!

[@deniz-wt8go]

thank you my friend :)

[@manqobangubeni6172]

🤜🤜Thanks a lot your content is very useful

[@ijajulislam7223]

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

[@fahadbhatti6185]

Nice video i was stuck on a thing which is when i reloads the page it didn't logged me in so i make a slight changing in it which is I change useState in context file from const [user, setUser] = useState(" ") to const [user, setUser] = useState({}) and it works for me :)

[@azimabdumutalibov7647]

Nice lesson Thank you

[@DipeshMalvia]

Glad you liked it!

[@mohamedyoussef8835]

Awesome video +++++++++++++++ Thank you 😃

[@aankushchauhan]

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.

[@aankushchauhan]

@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!

[@bravo1oh1]

Can u do same video it with apple id sign in and Google sign in.

[@ValpaliVenkatesh]

nice explaination bro

[@MYusup-yf7lu]

awesome video, can you make or recommend how to make the role base or multiple login react with firebase database?

[@dzuzr]

I was looking for a video for a junior developer, unfortunately it skips too much of the UI building part.

[@AdityaAditya-il6ng]

you are the best

[@osman_akdag]

Thanks for this video

[@JJ-ot3ps]

nice video but you forgot to save user in the firestore :p

[@leonardospecht4779]

You are a god

[@rohitjha7202]

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.

[@jayakulhade5811]

@dipesh please enhance with it

[@DipeshMalvia]

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.

[@shabiqghaziid5345]

When I refreshed on Home page, I was redirected to Login page. why? I think it because I initialized user with useState(""). and it take a while for get the currentUser data. so I change it. I initialize with empty object {}. It works!. But it causes a new problem. when an un-authenticated user goes to the Home page, he can view that page for a while until it returns to the login page. How to fix that problem ?

[@DipeshMalvia]

I saw few people reported this issue. I will surely look into it. Thanks

[@shabiqghaziid5345]

@@DipeshMalvia ok. Nice tutorial btw

[@xmart2k]

@@DipeshMalvia any fix on this?

[@thepatternhub853]

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)

[@allymbaya2701]

rap with the userAuthProvider to the index.js

[@Anonymous-xy8ps]

Thanks for the video 😊.. I have encountered one problem, when I refresh my page after logging in , it takes me back to the login page even though I have logged in.. Can someone please help me ??

[@raffyrey9604]

same here...

[@raffyrey9604]

i change something in my protected route //Protected Route function RequireAuth() { const currentUser = useAuth(); if (currentUser === undefined) { return null; // or loading indicator, etc... } return currentUser ? : ; }

[@raffyrey9604]

i hope it will help in your side

[@Anonymous-xy8ps]

@@raffyrey9604 Did it solve the problem ??

[@allymbaya2701]

it means the user is null

[@itinfo8931]

Thank you sir

[@vanshikaacchwani]

very informative but the protected route is not working in my project

[@DipeshMalvia]

Can you check the reference code or elaborate your problem so that we can look into it.

[@davidgeeen333]

While refreshing the home page my user is getting logout what to do

[@davidgeeen333]

@Samuel lebaron yes got it its because I use return function in protected routes

[@hridoy5585]

Thanks ❤️

[@DipeshMalvia]

You're welcome 😊

[@skverskk]

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

[@0xredpill]

You can use this method sendEmailVerification

[@duanehodges3146]

Thanks for this tutorial. It was very helpful but I'm getting an error that I can't decontruct the signUp method from the context. Any idea what could be happning?

[@tristanhurley9071]

When you create an account it is automatically keeping you signed in. So thats not working as it looks in the background at all.

[@SolomonRazak]

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

[@Speede04]

After pressing refresh button on home screen I keep getting sign out and redirected to login page, how to solve it?

[@divvukancherla9817]

sir how to add admin role and user role ? any video for that

[@mechvishwanath]

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

[@52nevil36]

please video on MERN project!

[@DipeshMalvia]

Yes, already added for next year

[@Ash-uf9sn]

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.

[@pmahesh1147]

while refresh browser auto logouted what is the solution ???????

[@mihirlakhamje9575]

whenever i login with registered user and then refresh i redirect to login page and currentUser state becomes null. idk why

[@kachidereodumeh2040]

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?

[@allymbaya2701]

great tutorial however I have got an error on the firebase regarding the google sign in, the error is auth/auth-domain-config-required

[@Harindervir46]

Thanks

[@DipeshMalvia]

Welcome!

[@piyush5764]

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.

[@michaelcaligner4636]

Thank you for this Tutorial sir

[@tareshgupta1095]

error handling with try and catch doesnt work , solutions ??

[@malemyengkhom56]

Sir any MERN project coming, from your side in the future videos?

[@DipeshMalvia]

Yes, offcourse that is in my to-do list. Appreciate to share ideas if you have any for MERN project videos.

[@malemyengkhom56]

@@DipeshMalvia actually I want a video of otp verification via sms and email id too, in MERN

[@haaidrehman3243]

Getting this Error ---> Firebase: Error (auth/cancelled-popup-request) whenever I am trying to login using google login button (with firebase setup)

[@DipeshMalvia]

Please allow the pop-up in your browser first and then try. As from the code or firebase side the prompt to user for allow pop-up is not available. So first manually allow your browser setting to open pop-up's.

[@sadiyakhan2795]

In userAuthContext file..it is not allowing to take useStare nd useEffect as...usercontexprovider is not a part of react

[@sahil-ld1bu]

but did lots of thinks eariler agt the end it throughs errors

[@harikrishnabomen8650]

Could you please provide the starting files?

[@olaitanmichael6025]

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

[@sangeetkukreja3879]

Module not found: Error: Cannot find file: 'index.esm.js' does not match the corresponding name on disk: '. ode_modules\Firebase\auth\dist\firebase'.

[@sangeetkukreja3879]

get error

[@flpmko]

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?

[@Gustavo-nz1vt]

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.

[@flpmko]

@@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!

[@westernpigeon]

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

[@flpmko]

@@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 :)

[@manishpaudel6515]

@@flpmko Hey, do you have any tutorial or link you followed. I want to work on this.

[@akshayKumar-kx9mm]

Can, you implement and show the forgot password, reset password, send verification using firebase!!

[@DipeshMalvia]

Sure, firebase have pre-built methods

[@ashharmansuri6816]

I am getting error googlsignIn is not a function

[@RithekhasreeKanapathy]

is this typescript or javascript ?

[@mirzaraza3542]

what if my login and signup codes are in different components where should I setup the authState Persistence?