How to Use Nuxt 3 Middleware for Authentication and Permissions

Nuxt 3 is a powerful framework for building Vue.js applications, offering a streamlined way to manage routing, server-side rendering (SSR), and middleware. One of its key features is middleware, which allows developers to control access to pages and perform tasks such as authentication and permission checks.

In this article, we'll explore how to implement authentication and permissions using Nuxt 3 middleware effectively.

Enjoy!

🤔 What is Middleware in Nuxt 3?

Middleware in Nuxt 3 is a function that runs before rendering a page or layout. It can be used for various purposes, such as authentication, logging, or modifying requests. Middleware can be applied globally, per layout, or on specific pages.

You can read more about it here.

🟢 Setting Up Authentication Middleware

To protect specific routes and ensure only authenticated users can access them, you can create an authentication middleware.

In your Nuxt 3 project, navigate to the middleware directory and create a new file called auth.ts:

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useAuthStore(); // Or any other auth technique

  if (!auth.isAuthenticated) {
    return navigateTo('/login');
  }
});

This middleware checks if the user is logged in by accessing the authentication state from a Pinia store. If the user is not logged in, they are redirected to the login page.

You can apply this middleware to specific pages by adding it to the middleware property in the page component:

<script setup>
definePageMeta({
  middleware: 'auth'
});
</script>

Alternatively, you can apply it globally by naming it auth.global.ts and placing it in the middleware folder.

🟢 Implementing Role-Based Access Control (RBAC)

In addition to authentication, you might want to restrict access based on user roles (e.g., admin, editor, user). Here’s how you can create a role-based permission middleware.

Create a new file role.ts inside the middleware folder:

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useAuthStore();
  const adminRoutes = ['/admin', '/dashboard'];

  if (adminRoutes.includes(to.path) && auth.userRole !== 'admin') {
    return navigateTo('/forbidden');
  }
});

This middleware checks if the user has the required role to access certain routes. If not, they are redirected to a “Forbidden” page.

Use the middleware in specific pages that require role-based access:

<script setup>
definePageMeta({
  middleware: 'role'
});
</script>

To ensure both authentication and authorization checks are performed, you can apply multiple middleware functions to a page:

<script setup>
definePageMeta({
  middleware: ['auth', 'role']
});
</script>

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Nuxt 3 middleware provides a simple yet powerful way to handle authentication and permissions in your application. By leveraging middleware, you can enforce user authentication, implement role-based access control, and ensure secure navigation within your Nuxt 3 app.

By following these steps, you can build a secure and scalable authentication system tailored to your application's needs.

Take care and see you next time!

And happy coding as always 🖥️

Comments

[emwadde]

This method of authentication checks are run on the client side. This does not protect the server routes in any way

[Jakub Andrzejewski]

There are several areas that we need to protect while implementing auth and permissions. In my article, I tackled this part but what you are saying is a great idea for the next article. Thanks!