Middleware

Middleware

This module adds a route middleware that redirects users who are not logged in to /auth/login and forwards the originally requested URL as callbackRedirectUrl. After a successful callback, the user is redirected back to this original URL unless providers.<provider>.callbackRedirectUrl is explicitly configured. In that case, the configured callback redirect takes precedence.

Protect every page

With globalMiddlewareEnabled set to true (the default), the middleware runs on every page. To keep a single page public, disable the middleware in its page meta:

<script setup>
definePageMeta({
  oidcAuth: {
    enabled: false,
  },
})
</script>

Protect selected pages

If most of your pages are public, set globalMiddlewareEnabled to false and add the oidc-auth middleware to the pages that need a logged in user:

export default defineNuxtConfig({
  oidc: {
    middleware: {
      globalMiddlewareEnabled: false,
    },
  },
})

<script setup>
definePageMeta({
  middleware: 'oidc-auth',
})
</script>

Pages without oidc-auth stay public. While the global middleware is enabled, oidc-auth adds no second check, so pages can keep it when you switch modes. oidcAuth.enabled: false turns the check off in both modes. If you turn the whole module off with enabled: false, oidc-auth stays available and does nothing.

If your app already has its own middleware/oidc-auth.ts, Nuxt keeps your middleware and may log a build warning about the duplicate name. Rename your file to use the module's check.

Automatic redirects currently require server-rendered pages. For client-only routes (ssr: false), set redirect: false; otherwise the first navigation can redirect before the session has loaded, even for signed-in users.

Disable the redirect

Set redirect to false to let users who are not logged in open protected pages. Use loggedIn from useOidcAuth to decide what the page shows. The middleware also runs in the browser during client-side navigation, so the module copies the server's resolved flag to the public runtime config. Override it at runtime with NUXT_OIDC_MIDDLEWARE_REDIRECT=false. The copy happens while the server renders a page, so with ssr: false the browser keeps the build-time value unless you also set NUXT_PUBLIC_OIDC_MIDDLEWARE_REDIRECT=false.

Custom login and logout pages

The /auth/login route is only configured if you have defined a default provider. If you want to use a custom login page and keep your default provider or don't want to set a default provider at all, you can set customLoginPage to true in the middleware configuration.

If you set customLoginPage to true, you have to manually add a login page to your Nuxt app under /auth/login. You can use the login method from the useOidcAuth composable to redirect the user to the respective provider login page. Setting customLogoutPage to true will disable the /auth/logout route. This route, if a default provider is set, redirects to the default providers logout page (/auth/<provider>/logout). You have to manually add a logout page to your Nuxt app under /auth/logout and use the logout method from the useOidcAuth composable to logout the user or make sure that you always provide the optional provider parameter to the logout method.

<script setup>
const { logout, currentProvider } = useOidcAuth()
</script>

<template>
  <button @click="logout(currentProvider)">Logout</button>
</template>