NextJS Firebase Auth Tutorial • How to Authenticate Users for Your App

Learn how to add user authentication to your project by using Firebase Authentication!
In this project I add Firebase Authentication to a NextJS serverless app, which interacts with a custom FastAPI Python backend.
Authentication is challenge, and there are many decisions to make. In this video, you'll learn one of the cheapest fastest ways to do it (for any project) and discover how it works behind the scenes.
🛠 Essential Links
🔗 Code: github.com/pixegami/nextjs-fi...
🔗 NextJS Shop Template: github.com/pixegami/nextjs-sh...
🔗 Python Backend: github.com/pixegami/jwt-echo
📚 Resources
🔗 Firebase: firebase.google.com
🔗 NVM: github.com/nvm-sh/nvm
🔗 NextJS: nextjs.org
🔗 JWT: jwt.io
💡 Learn More! (Related tutorials)
🔗 Build NextJS landing page: • NextJS and TailwindCSS...
🔗 Host FastAPI on AWS Lambda: • Deploy FastAPI on AWS ...
📽 Chapters
00:00 Introduction
00:54 Project preview
01:42 Prerequisites
03:34 Exploring the project
04:08 Setting up Firebase
06:48 Adding user authentication
08:13 Signing In
09:21 Redirecting users automatically
11:04 Signing Out
12:22 How does our backend authorize users?
13:22 What are JSON Web Tokens (JWT)?
14:38 How are JWT verified?
15:58 Attaching JWT to a HTTP request
17:02 Verifying the token from the backend
20:19 Wrapping up
#firebase #auth #pixegami

[@SrijitGhosh1605]

loved your tutorial. This was the 3rd video I saw on the topic and the last one I'll need. Keep up the great work.

[@pixegami]

Glad it helped!

[@karimsensei]

at last someone who explained it perfect! everything is working fine, many thanks !

[@pixegami]

Glad to hear that!

[@Felipera_]

10x better than any docs google ever put out.

[@pixegami]

Thanks! I also find some documentation a bit dry, so I make tutorials the way *I'd* like to learn for myself.

[@Felipera_]

@@pixegami they make a tool like firebase where you can get setup in 10 minutes but to get there you need to read the docs for 3 hours lmao

[@lol-hz9mc]

Thank you sir, It helped a lot!!

[@rickships1333]

dude you are awesome, thx for the good content! pls keep it up

[@pixegami]

I appreciate it!

[@PauloHenriqueConeglian]

Very nice and straight to the point tutorial! Just want to point that if you try to refresh the dashboard page after logged in, you are going to get an error. The easy fix, at least the one that worked for me, was to import the FirebaseApp component and then initFirebase() inside de dashboard component. Great work!

[@pixegami]

Thanks for that tip!

[@kousheralam]

Your video is qualityful and you are a good teacher. ❤❤

[@pixegami]

Thanks!

[@user-xv9bn2fe5c]

Man u saved my life! I was very stressed implementing authentication😑😑. Thanks a lot!

[@pixegami]

Glad it helped!

[@mestalion8735]

Amazing, thank you!

[@pixegami]

Glad you liked it!

[@devkunjadia3792]

love this tutorial

[@skverskk]

Nice tutorial, especially discussing the TokenId verification flow. Would you consider doing a Firebase Auth with Email/Password as a provider? Thanks

[@pixegami]

You're welcome! I don't have plans to do email/password tutorial videos at the moment - although it could be an interesting idea. What would make you choose to do your own email/password over integrating with a third party OAuth? I get the use case for bigger projects or companies, but for small projects and prototyping, I'm not sure if it's worth the extra work.

[@skverskk]

@@pixegami There’s so little Firebase Admin SDK out there. Interested in Firebase Token management on the Server with protecting routes, etc.

[@stamend28]

Yeah, that's cool to use Google authentication than the one which requires an email and a password. At least for the user. This one's helped me.

[@pixegami]

Yeah, I think it's fine for most customers to use Google login. Signing in with a custom email for a small site is usually a hassle anyway. And it's easier for us as developers not having to maintain a user database.

[@stamend28]

@@pixegami Good for both then

[@spacecoder0526]

Can you make a tutorial for Next JS with next auth+Prisma+Postgresql + Stripe? I really want to learn about it.

[@ron-almog]

Hey, are you using copilot? or some other "assistant"? those predictions are exactly what you're going to type 2 sec later. very cool.

[@pixegami]

Yup! I'm using GitHub Copilot.

[@juanchogonzalez11]

Thank you.

[@pixegami]

You're welcome!

[@nizarhaidar5225]

hi love. your content. how does your shell look so good? is it the default version?

[@pixegami]

Thanks! I have some themes for the terminal. For MacOS (which is the one I'm using now), here's the video: kzbin.info/www/bejne/q5jannuVrd-eeaM Here's an older one for Ubuntu: kzbin.info/www/bejne/i6e8ZpR8fbOie9k

[@roccccat]

I've seen your Tutorial to generative art recently and wanted to ask if It would be ok to use your Code to make NFT's and sell them.

[@pixegami]

Go ahead!

[@ahmedhussein8177]

Awesome tutorial, could you please share your zsh setup, thanks :)

[@pixegami]

Yup! I actually have video/code about it here: kzbin.info/www/bejne/i6e8ZpR8fbOie9k

[@kousheralam]

Bhai, could you please taught us how to implement the backend script on expressjs. and describe the process of it ?

[@pixegami]

I don't have a lot of experience with ExpressJs yet so a video on that isn't in my radar at the moment.

[@satyamsrivastava1301]

lovely tutorial, also can you give the themes, font and icon packs you used in vs code.

[@pixegami]

Thank you! The theme I used is "Monokai Pro". I don't think I'm using any icon packs though... Or maybe I installed them a long time ago and forgot.

[@satyamsrivastava1301]

Thanks again ❤️

[@viniciuspollo3832]

good video , add Next-auth, services, process.env, deploy vercel, sessionProvider ,

[@pixegami]

Yup, there's a lot of ground to cover with Auth!

[@BuzzFashUpdate]

How do I use it with Nextjs middleware in the app dir.

[@pixegami]

I'm not sure, I didn't get that far - but since Firebase is so widely used with NextJS I'm sure it's possible. I asked ChatGPT and it came up with some examples, but I didn't try it myself.

[@kousheralam]

1000 like

[@Phuni.]

Your github project see,s to be the wrong one

[@pixegami]

Thanks for pointing it out! I forgot to push my changes. Here's the updated repo: github.com/pixegami/nextjs-firebase-auth

[@karthikm.1804]

2048 game with python

[@pixegami]

Good idea :) I'll write it down.