This is a super helpful video. Next.js and Firebase don't have a good tutorial to understand how to integrate them together. All the information is in doc but it is very hard to find it when doing this all for the first time. The idea of creating client.ts and server.ts files to distinguish client-side and server-side configs is great.
Thank you so much, Miguel Vieira, for the incredibly clear and thorough explanation in this video! Your expertise made a complex topic like handling user roles in Next.js using Firebase seem much more manageable. Your effort in breaking down the concepts and providing practical examples is truly appreciated. It's evident that you put a lot of thought into making the content accessible for viewers like me. Kudos to your excellent teaching style and the valuable insights you shared. Looking forward to more tutorials from you!
Great content, thanks so much! QQ: if you are fetching data on the server, why using API Endpoints if you could just define some functions to be called from the server?
Thanks. Saw other videos but they were doing things on the client side. One question related to nextjs. Is it okay copy the firebase/functions folder inside nextjs. Like can it be bundled to the frontend and increase security risks or bundle size?
I am stuck here 'NEXT_PUBLIC_APP_ENV' is not recognized as an internal or external command, operable program or batch file. when I change the scripts.dev in package.json to "dev": "NEXT_PUBLIC_APP_ENV='emulator' next dev",
Hi Miguel, great tutorial. I just have a question (newish to next.js) when you wrap the children with the AuthProvider (which is client component) in the Root Layout doesn’t that make the whole app client component? From what I understand any children of client component become client component?
No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
@@DanielWorldRocks No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
Hola Miguel! Gracias por tu contenido. Una pregunta, ¿Cómo puedo utilizar el simulador de Firebase si mis "Environmental Variables" no son reconocidas. Sigo obteniendo este error donde "NEXT_PUBLIC_APP_ENV='emulator'", (no es un comando externo o interno deconocido) ya intenté todo pero no funciona... agradecería enormemente tu ayuda
No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
You have no idea how much I had to browse to find this. THANK YOU!
I d like more of firebase+ next.js videos!!
This is a super helpful video. Next.js and Firebase don't have a good tutorial to understand how to integrate them together. All the information is in doc but it is very hard to find it when doing this all for the first time. The idea of creating client.ts and server.ts files to distinguish client-side and server-side configs is great.
Thank you so much, Miguel Vieira, for the incredibly clear and thorough explanation in this video! Your expertise made a complex topic like handling user roles in Next.js using Firebase seem much more manageable. Your effort in breaking down the concepts and providing practical examples is truly appreciated. It's evident that you put a lot of thought into making the content accessible for viewers like me. Kudos to your excellent teaching style and the valuable insights you shared. Looking forward to more tutorials from you!
It took me a while to grasp the concepts. Very well job Miguel.
Great content, thanks so much! QQ: if you are fetching data on the server, why using API Endpoints if you could just define some functions to be called from the server?
How can i deploy this sample app to vercel using the service account key?
i am getting errors when i try to do so
Dude, wtf... very good! I from brazil and understood everything, even though my English is low level.
Thanks. Saw other videos but they were doing things on the client side. One question related to nextjs. Is it okay copy the firebase/functions folder inside nextjs. Like can it be bundled to the frontend and increase security risks or bundle size?
Thanks for sharing this. It's helped me tremendously.
THANKS.. I waste a lot of time with next auth + credentials.. and was a madness..
I can't thank you enough man 🙏🙏🙏
Amazing vid. genuinely
Thanks.
Can you do one with Prisma and mongoDB where the main admin can promote the users to moderator or admin
I am stuck here 'NEXT_PUBLIC_APP_ENV' is not recognized as an internal or external command,
operable program or batch file. when I change the scripts.dev in package.json to "dev": "NEXT_PUBLIC_APP_ENV='emulator' next dev",
Hi, How can I implement this but still be able to use firestore realtime updates in my client components
well explained and useful, thanks sir
Hi Miguel, great tutorial. I just have a question (newish to next.js) when you wrap the children with the AuthProvider (which is client component) in the Root Layout doesn’t that make the whole app client component? From what I understand any children of client component become client component?
I was looking for this comment😢
I had the same thoughts.
No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
@@DanielWorldRocks No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
awesome content. Thanks man ❤❤
Bro is this same for react ?
Is it possible to use this approach to make calls to 'Callable' functions created in the Firebase functions code
Yes
Hola Miguel! Gracias por tu contenido. Una pregunta, ¿Cómo puedo utilizar el simulador de Firebase si mis "Environmental Variables" no son reconocidas. Sigo obteniendo este error donde "NEXT_PUBLIC_APP_ENV='emulator'", (no es un comando externo o interno deconocido) ya intenté todo pero no funciona... agradecería enormemente tu ayuda
try script this way
"dev": "set NEXT_PUBLIC_APP_ENV=emulator&& next dev",
Isn't using the Auth provider as 'use clien' makes all the children pages client side also ?
No it doesn’t . Only the component where you use it becomes a client component. The way provider works, it takes a children props in the root architecture and clients component on the other-hand are assigned not based on the architecture of your project rather on where it is being used.
@@babatundetaiwo5184 yeah, tried my self doing a React provider and is as you mentioned. Thanks!
Thank you Miguel, this is very helpful! Is this the safest way to handle auth with Firebase?
safest and easier next-auth but the documentation is crap and they changed many things bewteen v3 and v4 and v4 is poorly documented
Great video - Takes care of the emulator and the Cloud Firestor
The website is not working
How can I get the code?
Sorry about that. Should be working now
Can you please create a video on integrating Stripe to grant access to our pro features
You can check an example on my netflix’s clone video
@@timegamedevelop man, create a SaaS boilerplate with Next.js 14, Firestore/Firebase Auth, Stripe and some Email sending service and I'll buy it
HOW CAN WE DO THIS FOR SERVER ACTIONS?
what happens with the firebase rules? i need that.
Role are based on email string here! But, could be bettter to have a dinamic way to set if is pro or admin.
You can implement the same for pro as admin using custom auth claims.
Thinks man
Build a full stack application useing nextjs and firebase
Jesus Thank you