authfyio-vue

Vue 3 composables — provide once near the root, then call useAuth() / useUser() / useSession() in any component. Auto-refresh runs while the provider is mounted.

Copy this quickstart guide as a prompt for LLMs to implement Authfyio in your application.

Install

npm install authfyio-vue

Provide + use

src/App.vue (setup)

<script setup lang="ts">
import { provideAuthfyio, useAuth, useUser } from 'authfyio-vue';

provideAuthfyio({ baseUrl: "https://api.authfyio.com" });

const auth = useAuth();            // ComputedRef<AuthObject>
const { user, isLoaded } = useUser();
</script>

<template>
  <template v-if="auth.isSignedIn">
    <p>Hi {{ user?.email }}</p>
  </template>
  <template v-else>
    <a href="/sign-in">Sign in</a>
  </template>
</template>

Exports

provideAuthfyio({ baseUrl, autoRefresh, refreshSkewSeconds }) — call once.
useAuth() — ComputedRef with isSignedIn, userId, orgId, getToken().
useSession() — raw session Ref (signed_in / signed_out).
useUser() — lazy fetch of the current user record.
useAuthfyio() — escape hatch with baseUrl + refresh().

Building a form? POST credentials to {baseUrl}/v1/auth/sign-in/email-password with credentials: 'include'. The next useUser() tick picks up the newly-set cookie automatically.

← Previous

authfyio-react

authfyio-nuxt