Authentication

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

<template>
  <div v-if="isPending">Checking auth...</div>
  <div v-else-if="isAuthenticated">Welcome, {{ user?.name }}!</div>
  <div v-else>
    <NuxtLink to="/auth/signin">Sign In</NuxtLink>
  </div>
</template>

1. Browser Request
   Cookie: session_token=xxx
          |
          v
2. SSR Plugin (server)
   - Read session cookie
   - Exchange for JWT via Better Auth
   - Fetch user data
   - Store in state for hydration
          |
          v
3. HTML Response
   - Contains pre-populated auth state
          |
          v
4. Client Hydration
   - Receives auth state (no flash!)
   - Initializes ConvexClient with token
   - Starts WebSocket subscription

1. Browser loads page (no SSR)
          |
          v
2. Client Plugin
   - Detects CSR-only mode
   - Fetches token from /api/auth/convex/token
   - Extracts user from JWT
   - Initializes ConvexClient with token

<script setup lang="ts">
const authClient = useAuthClient();

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

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

const { signOut } = useConvexAuth();

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

<script setup lang="ts">
const authClient = useExtendedAuthClient();
const { signOut } = useConvexAuth();

async function loadUsers() {
  const result = await authClient.admin.listUsers({
    query: { limit: 10 },
  });
  console.log(result);
}

async function handleSignOut() {
  // Prefer Convex-aware logout so local auth state updates immediately.
  await signOut();
  navigateTo("/");
}
</script>

<script setup lang="ts">
const authClient = useAuthClient();

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 authClient.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 authClient = useAuthClient();

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

async function signInWithGitHub() {
  await authClient.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 authClient = useAuthClient();

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

async function handleSignUp() {
  const { error: authError } = await authClient.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>
  <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 } = 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>