Vue Auth Sanctum

A Vue 3 plugin for authentication using Laravel Sanctum.

Installation

To install the package, run the following command:

  npm install vue-auth-sanctum

Configuration

Add the plugin in your main.ts or main.js file, and provide the required options.

import { createApp } from 'vue';
import App from './App.vue';
import { vueAuthSanctum } from 'vue-auth-sanctum';

const authConfig = {
  apiURL: 'http://localhost:8000',
  mode: 'cookie', // Optional: 'cookie' or 'token'
  endpoints: {
    csrf: '/sanctum/csrf-cookie',
    login: '/login',
    logout: '/logout',
    user: '/api/user',
  },
  csrf: {
    cookie: 'XSRF-TOKEN',
    header: 'X-XSRF-TOKEN',
  }
};

const app = createApp(App);
app.use(vueAuthSanctum, authConfig);
app.mount('#app');

useSanctumAuth

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.

views/Login.vue

  import {ref} from 'vue';
  import { useSanctumAuth } from 'vue-auth-sanctum';

  const { login } = useSanctumAuth();

  const userCredentials = ref({
      email: '[email protected]',
      password: '123123',
  });

  await login(userCredentials.value);

useSanctumUser

This composable provides access to the current authenticated user. It supports generic types, so you can get the user as any class you want.

views/Dashboard.vue

  import { useSanctumUser } from 'vue-auth-sanctum';
  
  const user = useSanctumUser();