Composables

useSanctumAuth

How to use useSanctumAuth composable to work with state

Usage

Composable provides 2 computed properties and 4 methods:

  • user - currently authenticated user (basically the same as useSanctumUser)
  • isAuthenticated - a boolean flag indicating whether the user is authenticated or not
  • login - method for logging in the user
  • logout - method for logging out the user
  • refreshIdentity - method for manually re-fetching current authenticated user data

To authenticate a user you should pass the credentials payload as an argument to the login method. The payload should contain all fields required by your Laravel Sanctum backend.

const { login } = useSanctumAuth();

const userCredentials = {
  email: "user@mail.com",
  password: "123123",
}

await login(userCredentials)

If the login operation was successful, the user property will be updated with the current user information returned by the Laravel API.

If you do not want to update the user property automatically (e.g. for 2FA authentication), you can disable identity fetching by passing optional argument to login method:

// user identity will not be loaded after successful response
await login(userCredentials, false)

By default, methods will use the following Laravel endpoints:

  • /login to authenticate the user
  • /logout to log out the user
  • /api/user to get the current user information
  • /sanctum/csrf-cookie to get the CSRF token cookie

To change the default endpoints, please check the Configuration section.

Additional fetch options

If you want to pass additional header or change HTTP method for either login or logout calls, you can pass optional options: SanctumFetchOptions argument.

For example, to log out the user with DELETE method instead of default POST:

const { logout } = useSanctumAuth()

await logout({ method: "DELETE" })

Use the same approach when you need to pass additional params to login call:

const { login } = useSanctumAuth()

const userCredentials = {
  email: "user@mail.com",
  password: "123123",
}

await login(
    userCredentials, 
    false, 
    { headers: { "X-Custom-Header": "header_value" } }
)