Composables

<script setup lang="ts">
const { isSignedIn, isLoaded, userId, sessionId, orgId, orgRole, orgSlug } = useAuth()
</script>

<template>
  <div v-if="!isLoaded">Loading...</div>
  <div v-else-if="!isSignedIn">Please sign in</div>
  <div v-else>Hello {{ userId }}</div>
</template>

<script setup lang="ts">
const { isLoaded, isSignedIn, user } = useUser()
</script>

<template>
  <div v-if="isLoaded && isSignedIn">
    <img :src="user.imageUrl" :alt="user.fullName" />
    <p>{{ user.firstName }} {{ user.lastName }}</p>
    <p>{{ user.emailAddresses[0]?.emailAddress }}</p>
  </div>
</template>

<script setup lang="ts">
const clerk = useClerk()

function handleSignOut() {
  clerk.signOut()
}

function openProfile() {
  clerk.openUserProfile()
}
</script>

<script setup lang="ts">
const { signIn, setActive } = useSignIn()

async function handleLogin(email: string, password: string) {
  const result = await signIn.create({
    identifier: email,
    password,
  })

  if (result.status === 'complete') {
    await setActive({ session: result.createdSessionId })
    navigateTo('/dashboard')
  }
}
</script>

<script setup lang="ts">
const { isSignedIn, userId } = useAuth()
// In script: isSignedIn.value, userId.value
</script>

<template>
  <!-- In template: no .value needed -->
  <div v-if="isSignedIn">{{ userId }}</div>
</template>