Workspace settingsWorkspace settings shows the workspace name, timezone, and join notification after hosted sign-in.
Clone starters/vue. SDK reference: Vue.
This screen answers who the caller is in the browser. It does not protect a server route and it does not grant a permission. Protect APIs with a backend SDK, then apply authorization.
What you need
| Requirement | Detail |
|---|---|
| Public key | pk_... from the console |
| Environment | Copy .env.example to .env and set VITE_AUTHDOG_PUBLIC_KEY |
| Secret key | Never put sk_... in the app |
| Return URL | Account portal back to this app. Local: http://localhost:5173 |
Run
npm install
npm run devOpen http://localhost:5173. Click Sign in and finish the hosted Account portal. You should see workspace Northwind, timezone Europe/Paris, and the join-notification checkbox, plus Signed in as and an email from userinfo.
Provider and settings
<!-- src/App.vue -->
<script setup lang="ts">
import { AuthdogProvider } from "@authdog/vue/client"
import Home from "./Home.vue"
</script>
<template>
<AuthdogProvider>
<Home />
</AuthdogProvider>
</template><!-- src/Home.vue -->
<script setup lang="ts">
import { onMounted } from "vue"
import { useUser, useSignIn, useSignOut } from "@authdog/vue"
const publicKey = import.meta.env.VITE_AUTHDOG_PUBLIC_KEY as string
const { user, isLoading, fetchUser } = useUser()
const { signIn } = useSignIn()
const { signOut } = useSignOut()
const settings = {
name: "Northwind",
timezone: "Europe/Paris",
notifyOnJoin: true,
}
onMounted(() => {
if (publicKey) fetchUser(publicKey)
})
</script>
<template>
<p v-if="isLoading">Loading…</p>
<template v-else-if="user">
<p>Name <input :value="settings.name" readonly /></p>
<p>Timezone <input :value="settings.timezone" readonly /></p>
<p>
<input type="checkbox" :checked="settings.notifyOnJoin" disabled />
Email when a member joins
</p>
<button @click="signOut()">Sign out</button>
</template>
<button v-else @click="signIn(publicKey)">Sign in</button>
</template>The provider stores ?token= after a JWT-shape check only. fetchUser() validates it through userinfo. The fields are local UI. They are not saved, and they are not an authorization check. There is no Nuxt module in this example.