Authentication

<script setup lang="ts">
const { signIn, signOut, isAuthenticated, user } = useConvexAuth()

async function signInWithEmail(email: string, password: string) {
  const { data, error } = await signIn.email({
    email,
    password,
  })

  if (error) {
    console.error('Sign in failed:', error.message)
  } else {
    navigateTo('/dashboard')
  }
}

async function handleSignOut() {
  await signOut()
  navigateTo('/')
}
</script>

<script setup lang="ts">
const { signIn } = useConvexAuth()

const email = ref('')
const password = ref('')
const error = ref<string | null>(null)
const loading = ref(false)

async function handleSignIn() {
  error.value = null
  loading.value = true

  try {
    const { error: authError } = await signIn.email({
      email: email.value,
      password: password.value,
    })

    if (authError) {
      error.value = authError.message
    } else {
      navigateTo('/dashboard')
    }
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <form @submit.prevent="handleSignIn">
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button :disabled="loading">
      {{ loading ? 'Signing in...' : 'Sign In' }}
    </button>
    <p v-if="error" class="error">{{ error }}</p>
  </form>
</template>

<script setup lang="ts">
const { signIn } = useConvexAuth()

async function signInWithGoogle() {
  await signIn.social({
    provider: 'google',
    callbackURL: '/dashboard',
  })
}

async function signInWithGitHub() {
  await signIn.social({
    provider: 'github',
    callbackURL: '/dashboard',
  })
}
</script>

<template>
  <div class="oauth-buttons">
    <button @click="signInWithGoogle">Continue with Google</button>
    <button @click="signInWithGitHub">Continue with GitHub</button>
  </div>
</template>

<script setup lang="ts">
const { signUp } = useConvexAuth()

const name = ref('')
const email = ref('')
const password = ref('')
const error = ref<string | null>(null)

async function handleSignUp() {
  const { error: authError } = await signUp.email({
    name: name.value,
    email: email.value,
    password: password.value,
  })

  if (authError) {
    error.value = authError.message
  } else {
    navigateTo('/dashboard')
  }
}
</script>

<template>
  <form @submit.prevent="handleSignUp">
    <input v-model="name" placeholder="Name" />
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button>Create Account</button>
    <p v-if="error" class="error">{{ error }}</p>
  </form>
</template>

<script setup lang="ts">
const { isAuthenticated, user, signOut } = useConvexAuth()

async function handleSignOut() {
  await signOut()
  navigateTo('/')
}
</script>

<template>
  <div v-if="isAuthenticated" class="user-menu">
    <span>{{ user?.name }}</span>
    <button @click="handleSignOut">Sign Out</button>
  </div>
</template>

<template>
  <ConvexAuthLoading>
    <div class="loading">Checking authentication...</div>
  </ConvexAuthLoading>

  <ConvexAuthenticated>
    <Dashboard />
  </ConvexAuthenticated>

  <ConvexUnauthenticated>
    <LoginPrompt />
  </ConvexUnauthenticated>
</template>

<template>
  <ConvexAuthLoading>
    <div class="auth-loading">
      <Spinner />
      <p>Loading...</p>
    </div>
  </ConvexAuthLoading>
</template>

<template>
  <ConvexAuthenticated>
    <nav class="user-nav">
      <NuxtLink to="/dashboard">Dashboard</NuxtLink>
      <NuxtLink to="/settings">Settings</NuxtLink>
      <UserMenu />
    </nav>
  </ConvexAuthenticated>
</template>

<template>
  <ConvexUnauthenticated>
    <div class="guest-nav">
      <NuxtLink to="/auth/signin">Sign In</NuxtLink>
      <NuxtLink to="/auth/signup">Sign Up</NuxtLink>
    </div>
  </ConvexUnauthenticated>
</template>

<template>
  <ConvexAuthError v-slot="{ retry, error }">
    <div class="auth-error">
      <p>{{ error || 'Authentication failed. Please try again.' }}</p>
      <button @click="retry">Retry</button>
    </div>
  </ConvexAuthError>
</template>

<template>
  <header class="app-header">
    <NuxtLink to="/" class="logo">MyApp</NuxtLink>

    <nav>
      <ConvexAuthLoading>
        <div class="skeleton-avatar" />
      </ConvexAuthLoading>

      <ConvexAuthenticated>
        <NuxtLink to="/dashboard">Dashboard</NuxtLink>
        <UserDropdown />
      </ConvexAuthenticated>

      <ConvexUnauthenticated>
        <NuxtLink to="/auth/signin">Sign In</NuxtLink>
        <NuxtLink to="/auth/signup" class="btn-primary"> Get Started </NuxtLink>
      </ConvexUnauthenticated>
    </nav>
  </header>
</template>

<script setup lang="ts">
const { isAuthenticated, isPending } = useConvexAuth()

// Redirect if not authenticated
watch(
  () => ({
    isAuthenticated: isAuthenticated.value,
    isPending: isPending.value,
  }),
  ({ isAuthenticated, isPending }) => {
    if (!isPending && !isAuthenticated) {
      navigateTo('/auth/signin')
    }
  },
  { immediate: true },
)
</script>

<template>
  <div v-if="isPending">Loading...</div>
  <div v-else-if="isAuthenticated">
    <Dashboard />
  </div>
</template>

<script setup lang="ts">
const { isAuthenticated } = useConvexAuth()

// Only fetch when authenticated
const { data: profile } = await useConvexQuery(
  api.users.getProfile,
  computed(() => (isAuthenticated.value ? {} : 'skip')),
)
</script>

<template>
  <div class="comments-section">
    <h2>Comments</h2>

    <!-- Anyone can read comments -->
    <CommentList :postId="postId" />

    <!-- Only authenticated users can post -->
    <ConvexAuthenticated>
      <CommentForm :postId="postId" />
    </ConvexAuthenticated>

    <ConvexUnauthenticated>
      <p class="signin-prompt">
        <NuxtLink to="/auth/signin">Sign in</NuxtLink>
        to leave a comment.
      </p>
    </ConvexUnauthenticated>
  </div>
</template>

<template>
  <ClientOnly>
    <ConvexAuthLoading>
      <SkeletonHeader />
    </ConvexAuthLoading>

    <ConvexAuthenticated>
      <AuthenticatedHeader />
    </ConvexAuthenticated>

    <ConvexUnauthenticated>
      <GuestHeader />
    </ConvexUnauthenticated>

    <template #fallback>
      <SkeletonHeader />
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const { user } = useConvexAuth()
</script>

<template>
  <ConvexAuthenticated>
    <div class="welcome">
      <img v-if="user?.image" :src="user.image" :alt="user.name" class="avatar" />
      <div>
        <p class="greeting">Welcome back,</p>
        <p class="name">{{ user?.name }}</p>
      </div>
    </div>
  </ConvexAuthenticated>
</template>

<!-- Using components -->
<template>
  <ConvexAuthenticated>
    <Dashboard />
  </ConvexAuthenticated>
</template>

<!-- Equivalent with composable -->
<script setup>
const { isAuthenticated, isPending } = useConvexAuth()
</script>
<template>
  <Dashboard v-if="!isPending && isAuthenticated" />
</template>

interface ConvexUser {
  id: string
  name: string
  email: string
  emailVerified?: boolean
  image?: string
  createdAt?: string
  updatedAt?: string
}

<script setup lang="ts">
const authClient = useExtendedAuthClient()
const session = authClient.useSession()

// Typed from Better Auth additionalFields (not from Convex JWT claims)
const orgId = computed(() => session.value.data?.user.organizationId)
const marketingOptIn = computed(() => session.value.data?.user.marketingOptIn)
</script>

<script setup lang="ts">
const { user, refreshAuth } = useConvexAuth()

const role = computed(() => user.value?.role)

async function refreshClaims() {
  await refreshAuth()
}
</script>

<template>
  <p>JWT role claim: {{ role || '(no claim)' }}</p>
  <button @click="refreshClaims">Refresh Auth Claims</button>
</template>