Composables

useAuthConfig

Access authentication configuration

useAuthConfig is a composable that provides access to the authentication configuration defined in your nuxt.config.ts.

Usage

const authConfig = useAuthConfig();

Return Value

Returns the authentication configuration object with the following properties:

Common Properties

Property	Type	Description
`provider`	`'sanctum' \| 'passport'`	The authentication provider being used
`csrf`	`string`	CSRF endpoint URL (Sanctum only)
`twoFactorAuth`	`boolean`	Whether two-factor authentication is enabled
`strategies`	`Record<string, StrategyConfig>`	Strategy configurations

Strategy Properties

Each strategy in strategies can contain:

Property	Type	Description
`redirect.login`	`string`	Redirect path after successful login
`redirect.logout`	`string`	Redirect path after logout
`endpoints.login`	`EndpointConfig`	Login endpoint configuration
`endpoints.logout`	`EndpointConfig`	Logout endpoint configuration
`endpoints.user`	`EndpointConfig`	User endpoint configuration
`endpoints.twoFactor`	`EndpointConfig`	Two-factor endpoint configuration

Examples

Check Provider

const authConfig = useAuthConfig();

if (authConfig.provider === 'sanctum') {
  console.log('Using Sanctum authentication');
}

Check Two-Factor Auth

const authConfig = useAuthConfig();

if (authConfig.twoFactorAuth) {
  console.log('Two-factor authentication is enabled');
}

Access Strategy Configuration

const authConfig = useAuthConfig();

const clientStrategy = authConfig.strategies.client;
console.log(clientStrategy.redirect.login); // e.g., '/dashboard'

Get CSRF Endpoint

const authConfig = useAuthConfig();

const csrfEndpoint = authConfig.csrf; // e.g., '/sanctum/csrf-cookie'

Complete Example

<script setup>
const authConfig = useAuthConfig();

const providerName = computed(() => {
  return authConfig.provider === 'sanctum' ? 'Sanctum' : 'Passport';
});

const hasTwoFactor = computed(() => authConfig.twoFactorAuth);

const loginRedirect = computed(() => {
  return authConfig.strategies.client?.redirect.login || '/';
});
</script>

<template>
  <div>
    <p>Provider: {{ providerName }}</p>
    <p>Two-Factor Auth: {{ hasTwoFactor ? 'Enabled' : 'Disabled' }}</p>
    <p>Login Redirect: {{ loginRedirect }}</p>
  </div>
</template>

Notes

useAuthConfig is reactive to client-side runtime changes, such as runtime overrides or environment variable updates
Changes made in nuxt.config.ts require a rebuild or restart to take effect
The configuration is derived from runtimeConfig.public['nuxt-umbu']
This composable is useful for conditionally rendering UI based on auth configuration

$autx

Universal API client for authenticated requests

useAuthStore

Access authentication state