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.
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.
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!
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!
I successfully managed to do what you're asking for my company but it was quite tricky. This weekend I will create a repo if you'd like so you can get some help from there.
@@ionutsandu5913hey, pls can you send me the repo link? I'm working on a project that is supposed to use those features and I have no idea how to go about it
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
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) }
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
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?
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?
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 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.
… 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.
![[LIVE] นาทีนี้ต้องพี่ทนาย | ทนายแก้ว vs ทนายไพศาล | #คุยให้เด็กมันฟัง EP.47 (02/11/67)](http://i.ytimg.com/vi/HmquaO-PL_M/mqdefault.jpg)
![[Full] 4 ต่อ 4 Celebrity EP.920 | 3 พ.ย. 67 | one31](http://i.ytimg.com/vi/KwiW2M_kAg4/mqdefault.jpg)
Thank you for the video, App Router and Firebase was a headache until now
Happy it helped!
Rayan your best is that you always reply to your learners without hurting them this is your best then your skills
Thank you!
@@coderyan your welcome man!
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.
Thank you for the kind words, very much so appreciated!
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.
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!
Happy to hear it! Thank you
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 😊.
Happy to hear it!
beautiful tutorial, worked perfectly for me!
Happy to hear it!
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!
I successfully managed to do what you're asking for my company but it was quite tricky. This weekend I will create a repo if you'd like so you can get some help from there.
@@ionutsandu5913Hi! Can you please share your repo/GitHub username. I’m learning firebase Auth it would be great if you could share it. Thanks
@@ionutsandu5913 Very kind of you, if the offer still stands.
@@ionutsandu5913can you share the repo url? Thanks in advance
@@ionutsandu5913hey, pls can you send me the repo link? I'm working on a project that is supposed to use those features and I have no idea how to go about it
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?
i could kiss you right now!!!!! this is the best tutorial for a beginner like me. Love you so much brother!! RESPECT!!
Happy it helped!
@@coderyan also... loved your commentary it was hilarious 😂
Thanks for the tutorial Rayan!
You’re welcome!
27:36 "I'm gunna change this to jsx because I like the Icon better" - also me.
Haha glad you can relate
Thank you so much, Ryan, this will help me.
You’re welcome!
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
when creating the app and when i choose Yes on Would you like to use `src/` directory then it doesn't work. any idea why?
Thankyou soo much. Its working 😍🥰
Happy to hear it!
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)
}
it is not adding the user in the data base
you’re so good can you make a same tutorial but showing user data? or maybe username system?
that was awesome and so easy to use
Happy it helped!
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
if i refresh the page on the home screen it logs me out
(i did this exactly the same) why is that?
why is it giving the res undefined?
it's full ClientSide when we use Firebase auth?
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?
great video helped me a lot, keep it up
Happy it helped you out
Excellent video as usual. Just one plea from littl ol' England on presentation. Please try to avoid saying "go ahead and" too often. Thanks.
should firebase env vars be added to vercel platform to a prod app as NEXT_PUBLIC_...?
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?
Safety, you dont want to expose those values in your regular packages
@@nosrehcorporation ok thankyou sir
Hi! Thank you for this video! How did you use async/await in client component? I have an error when try it
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
Thats wrong because you can only have one user with the same email in firebase auth
Can you not handle the user logged in information with get server side props for the home component
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.
Have you tried going to / without signing in it displays the content for a short while which is really bad thing
Should have covered this in the video, but can be solved in several ways, one of which is by using some loading state
@@coderyan Wouldn't that be redundant to do that on each page
Wouldn’t need to do it at each page. You can do it higher up in the application (e.g in the root component)
How would you move the Auth logic into something like an Auth Context?
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.
I have a question, how can i sing up users and set their first and last name?
The home page still flashes when going to the original URL. if the page was to be protected its not.
I don't get the point, If you make all page use client then why you are using next?
ig he did this for tutorial purpose, we can rectify the code.
@@scor32k Not really. All firebase hooks need client to run. Having a SSR auth with firebase is quite tricky.
@@ionutsandu5913 you're right, I don't understand why everyone is making video with NextJS title but just handling the issues same as simple React.
Is this going to make all the app a client component?
Will this make all the components client components?
Thank you.
The thing is you are doing it only in client side
yes, this is okay only if you're using firebase as database since firebase will handle backend protection via security rules.
hey man great video! It gives me an error ''sessionStorage is not defined" when i try to deploy.
Any idea how to solve it?
'use client';
add this line in top of your page
@@shreyashraj its already in a client side component :(
@@CptJuke maybe you forgot to import sessionStorage
Hello, I have the same problem, could you solve it?
@@juanpabloarroyochavez7311 sadly no 😞
is this secured to store use in session storage ?
thanks
You’re welcome
I love you
… 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.