---
title: "auth0/client"
description: "Vue login component for use with Auth0 — generated TypeScript API reference for nuxt-convex-module/auth0/client."
canonical_url: "https://nuxt-convex-module.dev/api-reference/reference/auth0/client"
---
# auth0/client

Vue login component for use with Auth0.

A Vue/Nuxt port of `convex/react-auth0`. The provider is exposed both as the
[provideConvexAuthFromAuth0](#provideconvexauthfromauth0) composable and the thin
[ConvexProviderWithAuth0](#convexproviderwithauth0) component wrapper; both adapt
`@auth0/auth0-vue`'s `useAuth0()` into the generic Convex auth provider
([provideConvexAuth](https://nuxt-convex-module.dev/api-reference/reference/client#provideconvexauth)) — no new auth core, just the SDK shim.

## Interfaces

### ConvexProviderWithAuth0Options

Defined in: [src/runtime/auth0/vue/index.ts:23](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/auth0/vue/index.ts#L23)

Options for [provideConvexAuthFromAuth0](#provideconvexauthfromauth0) / `<ConvexProviderWithAuth0>`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="client">
        
      </a>
      
       <code>
        client?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#iconvexvueclient">
        <code>
          IConvexVueClient
        </code>
      </a>
    </td>
    
    <td>
      Convex client to authenticate. Defaults to the client <code>
        useConvex()
      </code>
      
       returns.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/auth0/vue/index.ts#L25" rel="nofollow">
        src/runtime/auth0/vue/index.ts:25
      </a>
    </td>
  </tr>
</tbody>
</table>

## Variables

### ConvexProviderWithAuth0

```ts
const ConvexProviderWithAuth0: DefineComponent<ExtractPropTypes<{
  client: {
     type: PropType<IConvexVueClient>;
     default: undefined;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  client: {
     type: PropType<IConvexVueClient>;
     default: undefined;
  };
}>, {
}>, {
  client: IConvexVueClient;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/auth0/vue/index.ts:68](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/auth0/vue/index.ts#L68)

A wrapper Vue component which provides a [ConvexVueClient](https://nuxt-convex-module.dev/api-reference/reference/client#convexvueclient)
authenticated with Auth0 — the component form of
[provideConvexAuthFromAuth0](#provideconvexauthfromauth0). Renders its default slot once Convex
auth is wired.

It must be wrapped by a configured Auth0 plugin from `@auth0/auth0-vue`.

See [Convex Auth0](https://docs.convex.dev/auth/auth0) on how to set up
Convex with Auth0.

## Functions

### provideConvexAuthFromAuth0()

```ts
function provideConvexAuthFromAuth0(options?): ConvexAuthState;
```

Defined in: [src/runtime/auth0/vue/index.ts:48](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/auth0/vue/index.ts#L48)

The composable form of [ConvexProviderWithAuth0](#convexproviderwithauth0) — provides a
[ConvexVueClient](https://nuxt-convex-module.dev/api-reference/reference/client#convexvueclient) authenticated with Auth0.

It must be called in an app wrapped by a configured Auth0 plugin from
`@auth0/auth0-vue`.

See [Convex Auth0](https://docs.convex.dev/auth/auth0) on how to set up
Convex with Auth0.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#convexproviderwithauth0options">
        <code>
          ConvexProviderWithAuth0Options
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`ConvexAuthState`](https://nuxt-convex-module.dev/api-reference/reference/client#convexauthstate)

#### Example

```vue
<script setup lang="ts">
import { provideConvexAuthFromAuth0 } from 'nuxt-convex-module/auth0/client'
provideConvexAuthFromAuth0()
</script>
```


## Sitemap

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