Passport

Configuration

How to configure Laravel Passport authentication in Nuxt Umbu

Nuxt Umbu integrates seamlessly with Laravel Passport to provide secure OAuth2 authentication for your Nuxt application.

This guide explains how to configure the Passport provider.

Initial setup

When using the Passport provider, two configurations are required:

baseURL → URL of your Laravel API
runtimeConfig.secret → OAuth client credentials used by Laravel Passport

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-umbu'],

    auth: {
        provider: 'passport'
    },

    runtimeConfig: {
        secret: {
            admin: {
                client_id: process.env.AUTH_CLIENT_ID || '',
                client_secret: process.env.AUTH_CLIENT_SECRET || '',
                grant_type:
                    (process.env.AUTH_GRANT_TYPE as 'password' | 'authorization_code') || 'password',
            },
            client: {
                client_id: process.env.AUTH_CLIENT_ID || '',
                client_secret: process.env.AUTH_CLIENT_SECRET || '',
                grant_type:
                    (process.env.AUTH_GRANT_TYPE as 'password' | 'authorization_code') || 'password',
            },
        },

        public: {
            baseURL: 'http://localhost:80', // Your Laravel API
        }
    }
})

Why these values are required

baseURL → used by Nuxt Umbu to communicate with the Laravel API.
client_id and client_secret → required by Laravel Passport to generate OAuth tokens.
grant_type → defines the authentication flow (password or authorization_code).

Available options

Below are the available authentication options when using the Passport provider.

Parameter	Description	Default
`provider`	Authentication provider	`passport`
`cookie.prefix`	Prefix applied to authentication cookies	`__Secure-`
`cookie.options`	Cookie configuration options	`{ httpOnly: true, secure: true }`
`strategies.<name>.redirect.login`	Redirect path after login	`undefined`
`strategies.<name>.redirect.logout`	Redirect path after logout	`undefined`
`strategies.<name>.user.property`	Property containing authenticated user data	`user`
`strategies.<name>.endpoints.login`	Login endpoint configuration	`{ url: '/login', method: 'post', alias: 'Custom name' }`
`strategies.<name>.endpoints.user`	Authenticated user endpoint	`{ url: '/api/user', method: 'get' }`
`strategies.<name>.endpoints.logout`	Custom name used internally for the request	`{ alias: 'Custom name' }`
`strategies.<name>.endpoints.2fa`	Two-factor authentication endpoint	`{ url: '/api/send-token-2fa', method: 'post', alias: 'Custom name' }`

For complete typings, check the source file: auth.d.ts.

Full Configuration Example

Below is a complete example using Passport with custom endpoints and redirects.

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-umbu'],

    auth: {
        cookie: {
            options: {
                httpOnly: true,
                secure: true,
                sameSite: 'lax',
                priority: 'high',
            },
            prefix: '__Secure-'
        },
        provider: 'passport',
        strategies: {
            client: {
                redirect: {
                    logout: "/",
                    login: "/"
                },
                user: {
                    property: "profile",
                },
                endpoints: {
                    login: {url: "/oauth/token", method: "post", alias: "auth token"},
                    user: {url: "/api/admin/profile", method: "get"},
                    "2fa": {url: '/api/admin/token_2fa', method: 'post'},
                },
            }
        }
    },

    runtimeConfig: {
        secret: {
            client: {
                client_id: process.env.AUTH_CLIENT_ID || '',
                client_secret: process.env.AUTH_CLIENT_SECRET || '',
                grant_type:
                    (process.env.AUTH_GRANT_TYPE as 'password' | 'authorization_code') || 'password',
            },
        },

        public: {
            baseURL: 'http://localhost:80', // Your Laravel API
        }
    }
})

Understanding the Flow

When using Passport, the authentication flow works as follows:

The application requests /Passport/csrf-cookie.
Laravel returns the XSRF-TOKEN cookie.
The client sends credentials to /login.
Laravel creates an authenticated session.
The app requests /api/profile (or the configured user endpoint).
The authenticated user data is stored in the application state.

All of this process is handled automatically by Nuxt Umbu.

Overriding Configuration

You can customize behavior inside the auth object:

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-umbu'],

    auth: {
        strategies: {
            client: {
                redirect: {
                    login: '/dashboard',
                    logout: '/'
                }
            }
        }
    }
})

Using Environment Variables

It is recommended to configure `baseURL using environment variables:

.env

NUXT_PUBLIC_BASE_URL=http://localhost:80

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-umbu'],

    runtimeConfig: {
        public: {
            baseURL: process.env.NUXT_PUBLIC_BASE_URL
        }
    }
})

Server Proxy

Planned internal server proxy for Sanctum SSR support