Vue

Call provideAuth in your root component and use the useAuth composable to access auth state anywhere.

Setup

src/auth.ts

import { createAuthClient } from 'authfort-client';

export const auth = createAuthClient({
  baseUrl: '/auth',
  tokenMode: 'cookie',
});

import { createAuthClient } from 'authfort-client';

export const auth = createAuthClient({
  baseUrl: '/auth',
  tokenMode: 'cookie',
});

src/App.vue

<script setup>
import { provideAuth } from 'authfort-client/vue';
import { auth } from './auth';

provideAuth(auth);
</script>

<template>
  <router-view />
</template>

<script setup>
import { provideAuth } from 'authfort-client/vue';
import { auth } from './auth';

provideAuth(auth);
</script>

<template>
  <router-view />
</template>

provideAuth provides the client to all child components and automatically calls initialize() to check for an existing session. You do not need to call auth.initialize() manually.

useAuth Composable

<script setup>
import { useAuth } from 'authfort-client/vue';

const { state, user, isAuthenticated, isLoading, client } = useAuth();
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="isAuthenticated">
    <p>Hello {{ user.email }}</p>
    <p>Roles: {{ user.roles.join(', ') }}</p>
    <button @click="client.signOut()">Sign Out</button>
  </div>
  <div v-else>Not signed in</div>
</template>

<script setup>
import { useAuth } from 'authfort-client/vue';

const { state, user, isAuthenticated, isLoading, client } = useAuth();
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="isAuthenticated">
    <p>Hello {{ user.email }}</p>
    <p>Roles: {{ user.roles.join(', ') }}</p>
    <button @click="client.signOut()">Sign Out</button>
  </div>
  <div v-else>Not signed in</div>
</template>

Return Values

Field	Type	Description
state	Readonly<Ref<AuthState>>	'loading', 'authenticated', or 'unauthenticated'
user	Readonly<Ref<AuthUser | null>>	Current user
isAuthenticated	ComputedRef<boolean>	Whether the user is signed in
isLoading	ComputedRef<boolean>	Whether initialize() is running
client	AuthClient	The auth client instance

Login Form Example

<script setup>
import { ref } from 'vue';
import { useAuth } from 'authfort-client/vue';

const { client } = useAuth();
const email = ref('');
const password = ref('');
const error = ref('');

async function handleSubmit() {
  try {
    await client.signIn({ email: email.value, password: password.value });
  } catch (err) {
    error.value = err.message;
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" placeholder="Email" />
    <input type="password" v-model="password" placeholder="Password" />
    <button type="submit">Sign In</button>
    <p v-if="error">{{ error }}</p>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { useAuth } from 'authfort-client/vue';

const { client } = useAuth();
const email = ref('');
const password = ref('');
const error = ref('');

async function handleSubmit() {
  try {
    await client.signIn({ email: email.value, password: password.value });
  } catch (err) {
    error.value = err.message;
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" placeholder="Email" />
    <input type="password" v-model="password" placeholder="Password" />
    <button type="submit">Sign In</button>
    <p v-if="error">{{ error }}</p>
  </form>
</template>