Sanctum

Configuration

How to configure Laravel Sanctum authentication in Nuxt Umbu

Nuxt Umbu integrates seamlessly with Laravel Sanctum to provide secure, cookie-based authentication for your Nuxt application.

This guide explains how to configure the Sanctum provider.

Initial setup

The only required configuration is the baseURL, which points to your Laravel API.

nuxt.config.ts

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

    auth:{
        provider: 'sanctum'
    },
    
    runtimeConfig: {
        public: {
            baseURL: 'http://localhost:80', // Your Laravel API
        }
    },
})

Available options

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

Parameter	Description	Default
`csrf`	Endpoint used to retrieve CSRF cookie	`/sanctum/csrf-cookie`
`provider`	Authentication provider	`sanctum`
`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' }`
`strategies.<name>.endpoints.user`	Authenticated user endpoint	`{ url: '/api/user', method: 'get' }`
`strategies.<name>.endpoints.logout`	Logout endpoint	`{ url: '/logout', method: 'post' }`
`strategies.<name>.endpoints.2fa`	Two-factor authentication endpoint	`undefined`

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

Full Configuration Example

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

nuxt.config.ts

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

    auth: {
        csrf: '/sanctum/csrf-cookie',
        provider: 'sanctum',
        strategies: {
            client:{
                redirect: {
                    logout: "/auth",
                    login: "/auth"
                },
                user: {
                    property: "profile",
                },
                endpoints: {
                    login: {url: "/login", method: "post"},
                    user: {url: "/api/profile", method: "get"},
                    "2fa": {url: "/api/token-2fa", method: "post"},
                    logout: {url: "/api/logout", method: "post"}
                },
            }
        }
    },

    runtimeConfig: {
        public: {
            baseURL: 'http://localhost:80',
        },
    },
})

Understanding the Flow

When using Sanctum, the authentication flow works as follows:

The application requests /sanctum/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
        }
    }
})

Installation

How to add nuxt-umbu to your Nuxt application!

Cookie Authentication

Set up cookie CSRF authentication for Sanctum