Middleware

auth

Route middleware to protect authenticated routes

The umbu:auth middleware protects routes by validating user authentication. It automatically handles session validation, token expiration, and redirects unauthenticated users to the login page.

Overview

The umbu:auth middleware is a route middleware that runs before navigation to protected routes. It validates the user's authentication state and ensures they have a valid session or token.

Provider-Specific Behavior

Sanctum Provider

For Sanctum, the auth middleware:

Validates the Laravel session cookie
Validates the XSRF token
Sets XSRF headers for subsequent requests
Handles server-side and client-side validation differently

Passport Provider

For Passport, the auth middleware:

Validates the access token
Checks token expiration
Validates strategy consistency
Handles server-side and client-side validation differently

Usage

Basic Usage

// pages/dashboard.vue
definePageMeta({
  middleware: ['umbu:auth']
})

With Layout

// pages/admin/users.vue
definePageMeta({
  middleware: ['umbu:auth'],
  layout: 'admin'
})

In Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    globalMiddleware: true // Apply auth middleware globally
  }
})

How It Works

Server-Side Validation

On the server, the middleware:

Extracts the session or token from the request
Validates the session/token hasn't expired
For Sanctum: Sets XSRF headers for the response
If validation fails: Logs out and redirects to login

Client-Side Validation

On the client, the middleware:

Extracts the session or token from cookies/localStorage
Validates the session/token hasn't expired
Checks strategy consistency (Passport only)
Validates user auth state
If validation fails: Logs out and redirects to login

Validation Logic

Sanctum Validation

// Server-side
const session = useCookie('laravel-session').value
const xsrf = useCookie('XSRF-TOKEN').value

if (!validateSession(strategyName, session, xsrf, true)) {
  return await handleLogout(strategyName, redirectPath, 'auth')
}

// Client-side
if (!validateSession(strategyName, null, xsrf, false)) {
  return await handleLogout(strategyName, redirectPath, 'auth')
}

Passport Validation

// Server-side
const { strategy, token, expires } = extractServerAuthData($auth, 'token')

if (!validateSession(strategy, token, expires)) {
  return await handleLogout(strategy, redirectPath, 'auth')
}

// Client-side
const { strategy, token, expires } = extractClientAuthData($auth, 'token')

if (!validateSession(strategy, token, expires) ||
    !validateStrategyConsistency($auth, store, strategy)) {
  return await handleLogout(strategy, redirectPath, 'auth')
}

Redirect Behavior

When authentication fails, the middleware:

Logs out the current session
Redirects to the configured login path
Stores the intended destination for post-login redirect

The redirect path is configured in your auth setup:

// nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      home: '/dashboard',
      callback: '/callback'
    }
  }
})

Examples

Protecting Dashboard

// pages/dashboard/index.vue
<script setup>
definePageMeta({
  middleware: ['umbu:auth']
})
</script>

<template>
  <div>
    <h1>Dashboard</h1>
    <!-- Protected content -->
  </div>
</template>

Protecting Admin Routes

// pages/admin/index.vue
<script setup>
definePageMeta({
  middleware: ['umbu:auth'],
  layout: 'admin'
})
</script>

<template>
  <div>
    <h1>Admin Panel</h1>
    <!-- Protected admin content -->
  </div>
</template>

Combining with Other Middleware

// pages/profile/index.vue
<script setup>
definePageMeta({
  middleware: ['umbu:auth', 'verified'] // Multiple middleware
})
</script>

Error Handling

The middleware automatically handles authentication errors:

401 Unauthorized: Logs out and redirects
Expired token: Logs out and redirects
Invalid session: Logs out and redirects
Strategy mismatch: Logs out and redirects (Passport)

Notes

The umbu:auth middleware is automatically registered by the module
No manual import required
Works with both Sanctum and Passport providers
Validation logic differs between providers
Automatic logout on validation failure

Middleware

Route middleware for protecting application routes in Nuxt Umbu

two-factor

Route middleware to protect 2FA-enabled routes