Authenticate Your Next.js Apps Using Firebase: Complete Guide

[Rawailsakib]

Rayan your best is that you always reply to your learners without hurting them this is your best then your skills

[eugenebesedovsky]

To prevent a home page to flash just use 'return router.push("...")' instead of 'router.push("...")'. Thus you won't see the home page if you're not signed in. Also can use 'loading' variable coming second from useAuthState hook to render some fallback component. So there won't be any need of adding session storage item.

[RheddrianBenekander]

Thanks for sharing this guide!

You made a comment about making errors toward the end of the video. I just came here to say that I was looking for this video, and there were a few available... but the other ones I looked at were guys that jump-cut through their mistakes, and they'd copy and paste all of their code so you wouldn't see them typing.

Those videos are awful to follow along with. Yours is relatable. Keep doing it the way you're doing it! We're here because we're making mistakes too.

[MrBlazzerBoy]

Also please do one for protecting routes: show those pages only if user is logged in.

[fengtaka]

This is definitely one of the best tutorials I've watched
Easy to understand and literally solved an issue I thought would take me hours in such a short time. Thanks!

[ukaszStrzelecki]

Hi Ryan! Thanks for this tutorial. Can you make full example how to use Firebase Auth also using SSR and proper session storage thru whole application? There is a lot of this kind of tutorials were you can find examples how to signin/login/signout but it ends at this step. Thanks a lot!

[yashraj]

Awesome guide! Got my thing working in one go. Thanks a lot 😊.

[alexandergeorgesquire]

Hey thanks Ryan Just wondering... Why are you using .env for the config files? The docs say the cofnig data is safe to be on the front end?

[davidlintin]

27:36 "I'm gunna change this to jsx because I like the Icon better" - also me.

[isagive]

Thank you brother.
the userSession solution seems wrong - the useAuthState changes so maybe we need to wrap in a function and wait for it?
i dont know but it still kicks out a lot of error after routing.

In anycase, thank you for the hard work
very helpfull tutorial

[Robert-grcl]

beautiful tutorial, worked perfectly for me!

[Growingmindsetalha]

it is not adding the user in the data base

[Milan]

you’re so good can you make a same tutorial but showing user data? or maybe username system?

[lucasrodrigues]

Thank you for the guide. It helped me a lot!
The only issue that I had was the errors. The react-firebase-hook did not throw some of my errors automatically.
I had to get the errors from the hook and then throw it manually.

Something like this:
const [signInWithEmailAndPassword, user, loading, error] =

try {
const res = await signInWithEmailAndPassword(data.email, data.password)

if(error){
throw new Error(error.message)
}

reset()
router.push('/my-chats')
}
catch(err) {
console.error(err)
}

[gokulnaathb]

Thank you so much, Ryan, this will help me.

[TheJoyBoySSK]

My problem is that there is no code written in SignIn.js file that checks the databse for users and then signs them in, it just creates a new user in signIn itself, removing the need for signup and leading to multiple entries of same users everytime they login

[МишаАнискин-рш]

Hi! Thank you for this video! How did you use async/await in client component? I have an error when try it

[darkside]

thanks man, i've been following the official docs but kept on getting errors. Is "react-firebase-hooks" library a must in order to use firebase with next js?

[Robert-grcl]

if i refresh the page on the home screen it logs me out
(i did this exactly the same) why is that?

[juancabanas]

How can I refresh the user idToken after expiration? How is that process? After 1 hour, the user is not retrieved and no refreshed id is gotten. Please, I'm really stuck in that process 🙏. I'm building a PWA with NextJS and I need the user to always be signed in