Check this article in my web notes.
Introduction:
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:
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 firebase.google.com 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:
and then copy the suggested piece of code:
Inside our project create a folder firebase and firebase.client.js file with all firebase configs data. In my variant, it looks like this:
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:
Then you can launch your dev server, and visit /login route to check your page. Now we need to import firebase into component.
Let update our login method and add sign in firebase functions.
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 auth.global.js file with the next code:
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)