---
title: "Auth0"
description: "The Vue port of convex/react-auth0 — provideConvexAuthFromAuth0 and ConvexProviderWithAuth0, adapting Auth0 sessions into Convex auth state."
canonical_url: "https://nuxt-convex-module.dev/components/auth0"
---
# Auth0

> The Vue port of convex/react-auth0 — provideConvexAuthFromAuth0 and ConvexProviderWithAuth0, adapting Auth0 sessions into Convex auth state.

A Vue port of `convex/react-auth0`: a thin shim that adapts [Auth0](https://auth0.com)'s `useAuth0()` into the provider-agnostic [Convex auth state](https://nuxt-convex-module.dev/guide/auth-state). No new auth core — just the SDK adapter.

<upstream-baseline entry="convex/react-auth0" source="convex">

Matches upstream convex@1.46.0 (convex/react-auth0).

</upstream-baseline>

## Install

<pm-install packages="@auth0/auth0-vue">

```bash [pnpm]
pnpm add @auth0/auth0-vue
```

```bash [npm]
npm i @auth0/auth0-vue
```

```bash [yarn]
yarn add @auth0/auth0-vue
```

```bash [bun]
bun add @auth0/auth0-vue
```

</pm-install>

The adapter auto-enables on the next dev run.

## Configure

Register `@auth0/auth0-vue`'s plugin as Auth0 documents, then set `convex.auth0: false` in `nuxt.config.ts` only if you want to force the adapter off. Nothing else is required on the Nuxt side.

Convex-side setup (the Auth0 provider entry in `auth.config.ts`) is unchanged from [Convex's Auth0 guide](https://docs.convex.dev/auth/auth0).

<note>

Under [`nuxt-security`](https://nuxt-convex-module.dev/getting-started/security), add Auth0's origins to `connect-src` yourself — the module's CSP only knows your Convex deployment. See [adding your own origins](https://nuxt-convex-module.dev/getting-started/security#adding-your-own-origins).

</note>

## Use

Call the composable in a top-level component, inside an app wrapped by the configured Auth0 plugin:

```vue [app.vue]
<script setup lang="ts">
// A Vue port of `<ConvexProviderWithAuth0>`.
provideConvexAuthFromAuth0()
</script>

<template>
  <Authenticated>Signed in with Auth0</Authenticated>
  <Unauthenticated>Sign in</Unauthenticated>
</template>
```

The adapter reads Auth0's `useAuth0()` and authenticates Convex with the Auth0 `id_token`.

### `<ConvexProviderWithAuth0>`

The drop-in component form:

```vue [app.vue]
<template>
  <ConvexProviderWithAuth0>
    <NuxtPage />
  </ConvexProviderWithAuth0>
</template>
```

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Purpose
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        client
      </code>
    </td>
    
    <td>
      <code>
        IConvexVueClient
      </code>
    </td>
    
    <td>
      the injected client
    </td>
    
    <td>
      Override the Convex client the auth state is wired into.
    </td>
  </tr>
</tbody>
</table>

## Reference

Full signatures: [`auth0/client`](https://nuxt-convex-module.dev/api-reference/reference/auth0/client). Types via `nuxt-convex-module/auth0/client` (alias `nuxt-convex-module/auth0/vue`), which is self-contained and also works in a [plain Vue](https://nuxt-convex-module.dev/guide/plain-vue) app. Upstream: [Convex + Auth0](https://docs.convex.dev/auth/auth0).

---

- [convex/react-auth0](https://github.com/get-convex/convex-js/tree/main/src/react-auth0)
- [Convex × Auth0 docs](https://docs.convex.dev/auth/auth0)


## Sitemap

See the full [sitemap](https://nuxt-convex-module.dev/sitemap.md) for all pages.