Incredible job. I spent days reading articles trying to figure this out and you taught me in 30 minutes. Really clear explanation behind the logic and everything too so that I actually understood better what I was doing instead of just copying you. Thank you and God bless!
Thank you so, so much. Spent hours going through articles and videos that were just complicating the solution. This was very straightforward and well explained. The fact that you left out "types" shows how much you value simplicity when teaching, thanks mhn.
This is an awesome tutorial man. The only thing I would've add is a 'starter-template' folder in the github repo for when you pasted all that code at the start
Thanks for this video, I wished I had found it since yesterday night, I hope this video gets more activity so it can rank higher in search! I did this with GatsbyJS and it worked just fine!!
but there is a problem. when i reload or enter the protected page when i m logged in the protectedRoute work and redirect me to the home page and i m logged in
Thanks for watching and Ya definitely you can use it in prod, you can also make it more strict or customise it as you want it to behave, it's all yours
This is only client-side auth, so your server-side logic won't know who the signed in user is. Very good tutorial, but it's important to be aware of this limitation.
This is the technique you'll want to use (i.e. good old cookies) if you want the server to be aware of auth data: ua-cam.com/video/kRszxpeTnW0/v-deo.html
Thanks, This helped me resolved my problem. However, there is a little bug in the code, inside the user context, the else is resetting the user to empty when the page reloads, so i removed that part and the user object still retains the data even after page refresh
i keep getting an error at this line 'export const auth = getAuth()' - FirebaseError: Firebase: Error (auth/invalid-api-key). i have also checked thru the config.....google search not providing a clear answer at the moment LOL will you be able to help?
Really nice job mate ! An error happen if a people try to signup 2 times with the same email. Do u have a solution or can you record another tutorial for that ? Thank you
I guess you are asking where can we use the displayName property on the user object (which is the state) in AuthContext if that's the question, then we can use displayName of user in Navbar just beside to logout, so that user can see by which account he has logged in, and on clicking that link we can redirect to the profile page (if we have one)
why does useEffect run 3 times in console @27:12 ? and does this matter for performance? also can you do a tutorial about Iron sessions ? i think this helps to keep user logged in so that there is no loading required because session is from cookie but I am not sure .... Thank you for the tutorial :)
That is not in useEffect I logged the user below the useEffect so one is when firebase identifies user state changes one is route change and other is normal render ig, typically we should be wrapping the functions like login and signup inside of useCallback to improve the performance And I have no idea about iron session, I will check it out thanks for the suggestions
Thank you for this tutorial Sairaj. Although I'm stucked with an error, could you help me with that ? TypeError: (0 , _firebase_util__WEBPACK_IMPORTED_MODULE_0__.getModularInstance)(...).onAuthStateChanged is not a function
Incredible job. I spent days reading articles trying to figure this out and you taught me in 30 minutes. Really clear explanation behind the logic and everything too so that I actually understood better what I was doing instead of just copying you. Thank you and God bless!
Completely agree with above. Awsome job, helped me heaps and very clear!
this video made my day
Great tutorial, just a key note, useRouter() is not with `next/rounter` in NextJS 13 , replacement is `next/navigation`
Thanks for the tip
Thank you so, so much. Spent hours going through articles and videos that were just complicating the solution. This was very straightforward and well explained. The fact that you left out "types" shows how much you value simplicity when teaching, thanks mhn.
Glad it helped!
Amazing tutorial, I spent hours trying to figure out auth until I found your video, Great job!
This is an awesome tutorial man. The only thing I would've add is a 'starter-template' folder in the github repo for when you pasted all that code at the start
Thanks a ton!! I struggled for a whole week to get firebase authentication to work. I learned a lot from you.
for those who have problems with "useContext(AuthContext)". You have to change "createContext({})" to "createContext({}, () => {})"
Thank you so much brother. Its very helpful❤
Awsome, You saved me lots of time bro!
Thanks so much Sairaj 🙏🙏 Really appreciate your work! Complete Authentication tutorial including protected routes. You're awesome 💯
Thanks for this video, I wished I had found it since yesterday night, I hope this video gets more activity so it can rank higher in search! I did this with GatsbyJS and it worked just fine!!
I don't have this , what do I wrap in ?
Great video man
Awesome! It worked well here! Thanks, man! Really helpful! :)
Amazing tutorial, easy to understand and worked very well! Thank you for sharing your knowledge!
thx, great tutorial, it helped me figured out how to structure auth utilities
God amongst men!
i loved your explanation. thank you
but there is a problem. when i reload or enter the protected page when i m logged in the protectedRoute work and redirect me to the home page and i m logged in
Works for me thank you !
Works perfectly! Thank you and God bless you!
Would be great to see this used to protect NextJS API routes.
This is the great tutorial. thank you
How do use {children} statement (that u used inside ProtectedRoute in a js file?
Does exist any vulnerability in a loggin like this?
Great tutorial. Flash of unauthenticated contents still appear on my end though.
thank you for ProtectedRoute😍😍😍😍
Nice explication and work, very helpful, thanks man!
getting undefined when the user is logged in. is there any solution for this undefined?
Awesome! The best course 🙏
Can I use these protected routes in Production that you have shown in the video ??? And Thank you for the tutorial.
Thanks for watching and Ya definitely you can use it in prod, you can also make it more strict or customise it as you want it to behave, it's all yours
Why don't you used nextjs middelware function?
This is only client-side auth, so your server-side logic won't know who the signed in user is. Very good tutorial, but it's important to be aware of this limitation.
This is the technique you'll want to use (i.e. good old cookies) if you want the server to be aware of auth data: ua-cam.com/video/kRszxpeTnW0/v-deo.html
How can I also add Google sign-up - in ?
Thanks, This helped me resolved my problem. However, there is a little bug in the code, inside the user context, the else is resetting the user to empty when the page reloads, so i removed that part and the user object still retains the data even after page refresh
It redirects when you access specific link. How to fix this ?
if you want to prevent redirect if someone refreshes the page then you have to call on state change directly
Bro which vs code theme and font u are using
Awesome! Thank you!
How do you persist the logged in state
This vid helped me a lot thanks man
Amazing video!!
on 20:20, why is it rendering everytime when you type, can you not make it render once when the user hits the submit button?
Because it's controled input that is managed by react it renders every time we type
thank you so much sir
My dashboard page and its component is flashed for a few sec before it redirects me to the login page. Anyone else?
Hey Greta work! What is the theme and font you use in VS Code?
Extremely helpful thank you
Nicely done. Does Firebase Auth have an email confirmation upon signup whereby a user gets a signup link in his inbox?
Ya it does
I'm trying to get JWT token to initialize Apollo, but I couldn't manage, where would be the best way to place apollo initialization?
Apollo is it on frontend or backend?
If it's backend then it's pretty simple and you can get the idToken from firebase and send that to your backend
@@sairajchouhan Thank you for the reply, Apollo is in the frontend.
@@tinmank I am sorry I don't have enough expertise to answer this
@@sairajchouhan No worries, thank you.
i keep getting an error at this line 'export const auth = getAuth()' - FirebaseError: Firebase: Error (auth/invalid-api-key).
i have also checked thru the config.....google search not providing a clear answer at the moment LOL will you be able to help?
Sure that's because of wrong or mismatched credentials when you initialise firebase
can we do that authentication with redux instead of context?
Sure we can
Thank you so much for the guide, please what's the name of your vscode font?
It's Dank Mono
@@sairajchouhan Alright thank you!
great tutorial. thank you.
Which font and theme are you using? It really looks awesome.
Font - Dank Mono
Theme - Night Owl
Really nice job mate !
An error happen if a people try to signup 2 times with the same email. Do u have a solution or can you record another tutorial for that ?
Thank you
Thank you!
Which extension do you use for code intelicience?
That's GitHub Co-pilot
Valeu amigo indiano salvou thanks bro
how do we use that displayName?
I guess you are asking where can we use the displayName property on the user object (which is the state) in AuthContext
if that's the question, then we can use displayName of user in Navbar just beside to logout, so that user can see by which account he has logged in, and on clicking that link we can redirect to the profile page (if we have one)
return createUserWithEmailAndPassword(auth, email, password).then(async () => {
await updateProfile(auth.currentUser, {
displayName: 'username handled by useState'
})
})
user.displayName
Worked
loved the video
Thank you
why does useEffect run 3 times in console @27:12 ? and does this matter for performance? also can you do a tutorial about Iron sessions ? i think this helps to keep user logged in so that there is no loading required because session is from cookie but I am not sure .... Thank you for the tutorial :)
That is not in useEffect I logged the user below the useEffect so one is when firebase identifies user state changes one is route change and other is normal render ig, typically we should be wrapping the functions like login and signup inside of useCallback to improve the performance
And I have no idea about iron session, I will check it out thanks for the suggestions
you need of an gx40 official bro
bro i need video on the same thing but i need to update my users name validate email and other stuff i hope you see this soon
There are well documented APIs to do this
Checkout firebase.google.com/docs/auth/web/manage-users
27:40
thanks
Up
6:18 hope u didn’t type in your actual password bc we can all see it
No no 😂, I use a password manager
IDK why we are wasting our time with bootstrap. I came for a tutorial about firebase.
Thank you for this tutorial Sairaj.
Although I'm stucked with an error, could you help me with that ?
TypeError: (0 , _firebase_util__WEBPACK_IMPORTED_MODULE_0__.getModularInstance)(...).onAuthStateChanged is not a function
Thanks dude ❤helped me a lot.