Auth Components

Reference for the four global components that render canonical auth states.

The module registers these components globally in every build. They contain no product authorization logic.

`ConvexAuthenticated`

Renders its default slot only when useConvexAuth().status is authenticated.

vue

<ConvexAuthenticated>
  <AccountMenu />
</ConvexAuthenticated>

`ConvexUnauthenticated`

Renders its default slot for anonymous and disabled.

vue

<ConvexUnauthenticated>
  <NuxtLink to="/auth">Sign in</NuxtLink>
</ConvexUnauthenticated>

`ConvexAuthLoading`

Renders its default slot only during initial loading state.

vue

<ConvexAuthLoading>
  <AccountSkeleton />
</ConvexAuthLoading>

Background auth work does not necessarily change status to loading. Read isPending when operation progress matters.

`ConvexAuthError`

Renders only when initial auth resolution has no usable identity and status is error.

vue

<ConvexAuthError v-slot="{ error, retry }">
  <p>{{ error?.message ?? 'Authentication failed' }}</p>
  <button @click="retry">Reload and retry</button>
</ConvexAuthError>

Slot props:

Prop	Type	Meaning
`error`	`ConvexCallError \| null`	Current auth error
`retry`	`() => void`	Reload the page to restart auth initialization

Components or composable

Use components for simple mutually exclusive rendering. Use useConvexAuth() when state affects arguments, navigation, operation progress, or combined conditions.

Neither approach secures backend data. Convex functions enforce access.

Report an issue