This library is in early development. Expect breaking changes.
API Reference

Components

Built‑in UI helpers.

<BetterAuthState>

Renders once session hydration is complete (ready === true) and exposes state via slots.

BetterAuthState is currently the only component provided. Additional components may be added in future versions.
components/AuthWrapper.vue
<BetterAuthState>
  <template #default="{ loggedIn, user, signOut }">
    <p v-if="loggedIn">Hi {{ user?.name }}</p>
    <button v-else @click="navigateTo('/login')">Sign in</button>
  </template>
  <template #placeholder>
    <p>Loading…</p>
  </template>
</BetterAuthState>

Slots

SlotPropsWhen
default{ loggedIn, user, session, signOut }After session hydration (ready === true)
placeholderWhile session is hydrating

Slot Props

PropTypeDescription
loggedInbooleantrue if user is authenticated
userAuthUser | nullCurrent user object or null
sessionAuthSession | nullCurrent session object or null
signOut() => Promise<void>Sign out the user
Need signIn / signUp? Use useUserSession() directly.