Nuxt 3 Secrets for Easy Firebase Authentication

Discover the power of Nuxt 3 and Vue 3 with Firebase in this informative video. Learn how to set up Firebase authentication and deploy your app with Netlify and Git. Let's unravel the mystery behind Nuxt 3 and take your web development skills to the next level!

This tutorial will show you step by step how to create a Nuxt 3 Auth / Vue 3 project with Firebase email and password authentication. You will learn how to connect your Nuxt 3/Visual Studio code project to a GitHub repo and deploy your app with continuous deployment on Netlify.

What's in the box:

00:00 - Nuxt3/Firebase Auth example
01:35 - Setup Firebase project
03:38 - Create Nuxt 3 app
06:17 - Initialize Firebase App in Nuxt 3 plugin
10:55 - Setup Firebase API key with .env file
15:37 - Setup Nuxt runtime config & Setup GitHub repo
17:50 - Install Bulma CSS
20:58 - Add Firebase Auth functions part 1
24:28 - Add Firebase Auth functions part 2
27:17 - Test CreateUser function part 1
29:51 - Enable Firebase Authentication for Email & Password
31:20 - Test CreateUser function part 2
32:14 - Test CreateUser function part 3
33:48 - Test SignIn and SignOut functions
39:07 - Add and test Sign In and Sign Out buttons
42:50 - Commit code to GitHub repo
44:51 - Add user credentials to app template for testing
47:07 - Setup and install continuous deployment on Netlify
49:27 - Add Firebase API key to Netlify Environment variables
54:14 - Change site name on Netlify
55:16 - Add client-only tag and initialize Firebase AuthStateChanged observable
58:13 - Add and test global Firebase User State variable
1:04:00 - Setup firebaseUser state in app template
1:09:42 - Add and test route middleware as route guards
1:13:44 - Create auth guards and provide Firebase auth globally
1:21:37 - Commit code to GitHub and test on Netlify site
1:23:22 - Test new Firebase page with Register and Sign in forms
1:24:31 - Explain Register and Signup forms
1:33:02 - Commit code to GitHub and test on Netlify site
1:46:13 - Add computed property for sign in/register form button toggle
1:48:11 - Clean up & commit code to GitHub and test on Netlify site
1:53:18 - Add userCookie on client and server with middleware
2:03:10 - Add API endpoint to fetch current user
2:04:54 - Commit code to GitHub and test on Netlify site
2:08:03 - Update API endpoint for current user
2:08:42 - Create secret message API to test server middleware
2:14:19 - Commit code to GitHub and test on Netlify site
2:15:36 - Add Auth api and connect to Firebase Auth change observable
2:23:39 - Commit code to GitHub and test on Netlify site
2:25:36 - Wrap up!

[CarlTopham]

Fantastic intro to Nuxt and firebase Auth. I feel like a now have a good handle on this. Just a few notes: There are a few methods on `h3` that have been removed on the latest versions so the API functions need to be changed to use `defineEventHandler` and the req/res pulled from the `event.node` and the user added to the `event.context` instead. Also as other people have said, this isn't secure (apart from having API keys in the frontend code, so just worth making sure this is for your own demos and not production code 😎 That said, the point is to upskill you in the tech itself, and for that this video is excellent - in-depth and broad enough to make it well worth the 2 1/2 hours (+ coding time) of watching. Thanks

[jl-czgt]

This is extremely helpful. I like the way you go through the documentation and explain everything.

[pstoa]

Thorough implementation of Firebase auth showcasing Nuxt 3 features. Great job! Hopefully, there are more Nuxt 3 videos to come!

[pjmanning]

Great video! Would love to see an add-on video with firestore composables.

[willvanderleij]

This is great. Not only learning how to pop firebase into next but also learned how to use middleware, plugins and routes along the way. Very useful indeed.

[amirtorabi]

Compeletly enough for starting to use firebase in Nuxtjs 3. I hope to see more videos such this

[SpudzMcNaste]

This video was helpful in getting me started, but it should be pointed out that server side auth check that's done here is not secure. In both methods shown (sending the cookie or a fetch request) you'd be trusting whatever the client sends. This would make it easy for a user to make the server think they're logged in when they're not or impersonate another user

[luichyluichy]

Given we are using cookie tokens: According to Firebase documentation after version 4.0 the "onAuthStateChanged" observer only triggers on "sign in" and "sign out" events no more on "token expiry". The observer "onIdTokenChanged" does trigger with sign-in, sign-out, and token refresh events.

Hope it helps! Amazing tutorial!

[danielwatson]

Awesome tutorial, I failed at the cookie part, h3 wasn't liking useCookie. But the standard auth was super thanks

[papajohnsuk]

Thank you 😊😊way better way than what I was doing. Subbed

[JackySupit]

Wow you save my days sir. thank you so much for this great video. thank you for sharing it. God bless you.

[Zookenatorenator]

Thanks so much! this really helped get us started in our transition to Nuxt 3!! Quick question... can the query be tweaked to return one specific document in the collection if we pass the doc ID?

[dguedry]

This is an excellent tutorial. Kudos and thank you!

[dylansproule]

Any ideas on removing the flicker on load?

[ivenjansen]

Great video thanks! Btw to get fast refresh working properly on Windows, create a file called vite.config.js and add the following:

export default defineConfig({
server: {
watch: {
usePolling: true,
},
},
})

[BalaSakthi]

Thanks for your esay tutorial. I tried this works good but when we signed in the secret page is visible when i refresh this page it navigate to index page eventhough i signed in, why can we fix it?

[danielwatson]

can some one explain a little bit deeper the problem and solution Corey had at 32:42, in having to use the onMounted hook due to the plugin being on the client side. I thought setup would pick this up, as I guess he did by trying that first

[jackyangara]

I have an issue with $auth being undefined at point 1:17:50, which I think you are experiencing too. (I think, )
If you look at it, you are signed in but cannot access the /secret page. I logged out the $auth in authMiddleware, it says undefined.
The lifecycle of the app hits the middleware first before initializing the firebase.

I'm currently experiencing this issue, do you have any solution for it?

[agamurat]

can you please show firebase phone authentication in Nuxt js, i was stuck when creating app verifier in phone auth

[danny]

Just added an issue on the github repo. When I write /secret right away from the url box the middleware will not work as expected.