Workspace settings shows the workspace name, timezone, and join notification after hosted sign-in.

Clone [starters/vue](https://github.com/authdog/samples/tree/main/starters/vue). SDK reference: [Vue](/docs/frameworks/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](/docs/backend), then apply [authorization](/docs/concepts/authorization).

## What you need

| Requirement | Detail |
| --- | --- |
| Public key | `pk_...` from the [console](https://console.authdog.com) |
| 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

```bash
npm install
npm run dev
```

Open 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

```vue
<!-- src/App.vue -->
<script setup lang="ts">
import { AuthdogProvider } from "@authdog/vue/client"
import Home from "./Home.vue"
</script>

<template>
  <AuthdogProvider>
    <Home />
  </AuthdogProvider>
</template>
```

```vue
<!-- 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.