Handling user roles is not that simple on Next.js using Firebase.

Here's a super easy guide on how to handle users and user roles in a Next.js app using Firebase. This video covers a bunch of cool stuff, like setting up the project, creating pages, adding a navbar, getting items from an API, fetching items from Firestore as an admin, setting up sign-in with Google, creating user roles, routing pages based on roles, and fetching data based on roles. Oh, and it also shows you how to use Firebase emulators for testing locally. Plus, it gives you code snippets and step-by-step instructions for everything. Enjoy!
Code: miguelvieira.io/projects/RW6r...
Website: miguelvieira.io
Facebook: / miguelvieiracode
Instagram: / miguelvieiracode
Twitter: / miguelvieiradev
TikTok: / uc7fny1_f5yetq--egioprda
LinkedIn: / miguelvieiracode
00:00 Intro
01:17 Setup
06:20 Create pages
07:57 Create a navbar
09:46 Fetch items from API
14:08 Fetch items from firestore
24:01 Sign in
31:45 User roles
39:13 Role based page routing
45:58 Role based data fetching
51:23 Conclusion

[@user-ub8ic8dj3m]

You have no idea how much I had to browse to find this. THANK YOU!

[@evenngmusic8868]

I d like more of firebase+ next.js videos!!

[@noormuhammad888]

It took me a while to grasp the concepts. Very well job Miguel.

[@teetanrobotics5363]

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!

[@MikeBritton]

Thanks for sharing this. It's helped me tremendously.

[@hiraneranda4604]

awesome content. Thanks man ❤❤

[@cwu202]

well explained and useful, thanks sir

[@emanuelc1025]

THANKS.. I waste a lot of time with next auth + credentials.. and was a madness..

[@AmitDiggaoo7]

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?

[@animeshorts8404]

Thanks.
Can you do one with Prisma and mongoDB where the main admin can promote the users to moderator or admin

[@artbrare]

Hi, How can I implement this but still be able to use firestore realtime updates in my client components

[@edit_Pro_1]

Thinks man

[@Pierrot24382]

Thank you Miguel, this is very helpful! Is this the safest way to handle auth with Firebase?

[@eltrolado5764]

safest and easier next-auth but the documentation is crap and they changed many things bewteen v3 and v4 and v4 is poorly documented

[@davidlintin]

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?

[@amosdaniel237]

I was looking for this comment😢
I had the same thoughts.

[@noormuhammad888]

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.

[@noormuhammad888]

@@amosdaniel237 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.

[@kushailsingh8400]

HOW CAN WE DO THIS FOR SERVER ACTIONS?

[@srubio604]

what happens with the firebase rules? i need that.

[@MarcosMaganaWisdomica]

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

[@mogo6798]

try script this way
"dev": "set NEXT_PUBLIC_APP_ENV=emulator&& next dev",

[@emanuelc1025]

Role are based on email string here! But, could be bettter to have a dinamic way to set if is pro or admin.

[@davidlintin]

You can implement the same for pro as admin using custom auth claims.

[@gilbertonuzuruike1735]

Is it possible to use this approach to make calls to 'Callable' functions created in the Firebase functions code

[@miguelvieiracode]

Yes

[@ManishShrestha-yz1ye]

Can you please create a video on integrating Stripe to grant access to our pro features

[@miguelvieiracode]

You can check an example on my netflix’s clone video

[@panosjapan7]

@@miguelvieiracode man, create a SaaS boilerplate with Next.js 14, Firestore/Firebase Auth, Stripe and some Email sending service and I'll buy it

[@benjaoliva3383]

Isn't using the Auth provider as 'use clien' makes all the children pages client side also ?

[@babatundetaiwo5184]

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.

[@benjaoliva3383]

@@babatundetaiwo5184 yeah, tried my self doing a React provider and is as you mentioned. Thanks!

[@evenngmusic8868]

Jesus Thank you