DEV Community

Cover image for Nuxt 3 SSR, Firebase 9. How to set firebase authentication and configure middleware to stay signed in with example
WebCraft Notes
WebCraft Notes

Posted on • Updated on • Originally published at

Nuxt 3 SSR, Firebase 9. How to set firebase authentication and configure middleware to stay signed in with example

Check this article in my web notes.


Nuxt.js, the beloved framework for Vue.js enthusiasts, has also woven itself into my toolkit as my preferred web development instrument. Through Nuxt 3, I've created a range of commercial and personal projects. Clearly, in the coding process, some tasks were hard to solve or find solutions. That is why I decided to share my experience and would be happy if someone found this useful.

In this post, we going to talk about the authentication process with Nuxt 3 and Firebase 9. And also about how to stay signed in and secure by using Firebase auth and Nuxt middleware in server-side rendering mode. So let’s start:

(Node js and npm last versions should be installed already)

Step 1: Create and configure new app.

If you don’t have Nuxt js app already, create one. Open project folder in your favorite code editor, VS Code for example, and in terminal type:

start new project nuxt js

If you want to create your project in the default folder then add “.” Instead of type your project name. It will offer to install nuxi type “y”, and install all initial dependencies.

After that let’s install Firebase. Visit the Firebase webpage and use the Get Started button, after a few easy steps, we will be offered to install and configure Firebase in our project. Use the terminal again:

install firebase into project

and then copy the suggested piece of code:

add firebase config

Inside our project create a folder firebase and firebase.client.js file with all firebase configs data. In my variant, it looks like this:

add firebase settings into project

Inside the firebase console choose Authentication as a product and add an authentication variant to your personal need. The easiest way by choosing Email.

Step 2: Add login page.

In your pages folder create login folder and index.vue file with Login component:

add login page to your project

Then you can launch your dev server, and visit /login route to check your page. Now we need to import firebase into component.

import firebase dependencies

Let update our login method and add sign in firebase functions.

login function

First, we added a simple visualization of password and username validation. Then when a user signs in to our app, we asynchronously pass the user's email address and password to signInWithEmailAndPassword. If signing in was successful, signInWithEmailAndPassword returns users' data which we can store in locale storage for example.

Great. Now we have a simple login page with it's functionality.

Step 3: Create Nuxt js middleware.

Nuxt provides a customizable route middleware framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route. It’s a perfect solution for us to check user credentials or user status.

Create a middleware folder in the main app folder and file with the next code:

project auth middleware

In this middleware, we first import the necessary Firebase components and set up route middleware that will execute each time a user enters any route. onAuthStateChanged is a Firebase observer on the Auth object. It will return the user if the user is still logged in, and in our case, it will also serve as a navigation guard, redirecting to the login page if not.

Do not forget to restart your app after middleware is added.

In conclusion, the use of route middleware, particularly in Nuxt server-side mode, is crucial. It ensures that every time you update a page or navigate to a different route, your application's state contains the necessary data. This isn't limited to just user status; it extends to checking for the presence of required data on a page. If the data isn't available, middleware can be employed to fetch it from the server or perform other necessary manipulations. By implementing route middleware effectively, you enhance both the functionality and reliability of your Nuxt.js applications.

Top comments (0)