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.

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.

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

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!

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

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

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!

Thanks for the tutorial Rayan!

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

it is not adding the user in the data base

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

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?

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

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] = useSignInWithEmailAndPassword(auth) 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) }

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

Thankyou soo much. Its working 😍🥰

why is it giving the res undefined?

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

Have you tried going to / without signing in it displays the content for a short while which is really bad thing

I don't get the point, If you make all page use client then why you are using next?

The thing is you are doing it only in client side

great video helped me a lot, keep it up

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?

Will this make all the components client components?

that was awesome and so easy to use

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

Can you not handle the user logged in information with get server side props for the home component

Can't we directly use the config js file for the storing values of those variables? Why are we using them as env variables? Is it some kind of convention to do so?

Excellent video as usual. Just one plea from littl ol' England on presentation. Please try to avoid saying "go ahead and" too often. Thanks.

I am getting an error of module not found in page.js file for config.js file for auth. But I have already made that file.

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

Thank you.

The home page still flashes when going to the original URL. if the page was to be protected its not.

should firebase env vars be added to vercel platform to a prod app as NEXT_PUBLIC_...?

Is this going to make all the app a client component?

I have a question, how can i sing up users and set their first and last name?

How would you move the Auth logic into something like an Auth Context?

it's full ClientSide when we use Firebase auth?

is this secured to store use in session storage ?

Hi Ryan! Maybe I'm wrong, but as I know NEXT_PUBLIC will be included in the client-side JavaScript bundle, making them accessible to anyone who can inspect the website's source code.

hey man great video! It gives me an error ''sessionStorage is not defined" when i try to deploy. Any idea how to solve it?

I love you

thanks

… Oh. So I have to use hooks and shit… alright. That makes my life easier. I’m used to calling some API instead of FireBase and then storing JWTs. So this is kinda weird. And I’m used to working in SolidJS or Svelte. So this is weird for me.