Supa Kit Auth UI Vue

The UserContextProvider component allows you to pass the Supabase user and session data down the component tree. This is useful for child components that need to access authentication state without passing props manually.

<!-- Parent Component -->
<template>
  <UserContextProvider :supabaseClient="supabaseClient">
    <Profile />
  </UserContextProvider>
</template>

<!-- Child Component (Profile.vue) -->
<template>
  {{ user.email }}
</template>

<script lang="ts" setup>
  import { 
    injectStrict, 
    UserContextProviderInjection, 
    UserContextProviderKey 
  } from '@supa-kit/auth-ui-vue'

  const { user } = injectStrict<UserContextProviderInjection>(UserContextProviderKey)
</script>

Use the appearance.style prop to apply inline CSS styles to specific elements. Supported elements are: "button", "container", "anchor", "divider", "label", "input", "loader", and "message".

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      style: {
        button: { background: 'red', color: 'white' },
        anchor: { color: 'blue' }
      }
    }"
  />
</template>

You can customize specific colors and properties of a theme by using the appearance.variables prop. This allows you to override specific tokens within a theme variation (e.g., default).

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
      variables: {
        default: {
          colors: {
            brand: 'red',
            brandAccent: 'darkred'
          }
        }
      }
    }"
  />
</template>

Predefined themes typically include a default and a dark variation. Use the theme prop on the Auth component to switch between them. If no value is passed, it defaults to "default".

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
    }"
    theme="dark"
  />
</template>

Localize or change the text used in the Auth UI by providing a localization.variables object to the Auth component. This allows you to overwrite specific labels used in different views (e.g., sign_in).

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :localization="{
      variables: {
        sign_in: {
          email_label: 'Your email address',
          password_label: 'Your strong password'
        }
      }
    }"
  />
</template>

To use the Auth UI components in a standard Vue 3 project, install the library along with its required peer dependencies: @supabase/supabase-js and @supabase/auth-ui-shared.

pnpm install @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D
# or
yarn add @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D

You can apply a predefined theme to the Auth component by importing a theme from @supabase/auth-ui-shared and passing it to the appearance.theme prop. Currently, only ThemeSupa is available.

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
    }"
  />
</template>

<script setup lang="ts">
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'
  import { Auth } from '@supa-kit/auth-ui-vue'

  const supabaseClient = createClient('<URL>', '<KEY>')
</script>

To create a completely custom theme, define an object containing theme variations (like default, dark, or custom names like evenDarker) and pass it to the appearance.theme prop. Each variation should follow the structure of theme tokens (e.g., colors).

<template>
  <Auth
    theme="default"
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: customTheme
    }"
  />
</template>

<script setup lang="ts">
  const customTheme = {
    default: {
      colors: {
        brand: 'hsl(153 60.0% 53.0%)',
        brandAccent: 'hsl(154 54.8% 45.1%)',
        brandButtonText: 'white'
      }
    },
    dark: {
      colors: {
        brandButtonText: 'white',
        defaultButtonBackground: '#2e2e2e',
        defaultButtonBackgroundHover: '#3e3e3e'
      }
    }
  }
</script>

For Nuxt 3, it is recommended to use the @nuxtjs/supabase module. This allows you to access the Supabase client seamlessly via useSupabaseClient().

pnpm install @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D
# or
yarn add @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D

You can inject custom CSS classes into specific Auth UI elements using the appearance.className object. Supported elements include: "button", "container", "anchor", "divider", "label", "input", "loader", and "message".

Set appearance.extend to true if you want to extend existing styles instead of overriding them.

<template>
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      extend: false,
      className: {
        anchor: 'my-awesome-anchor',
        button: 'my-awesome-button'
      }
    }"
  />
</template>

You can install @supa-kit/auth-ui-vue as a global Vue plugin. This registers the Auth component globally, allowing you to use it anywhere in your application without local imports.

import { createApp } from 'vue'
import AuthUI from '@supa-kit/auth-ui-vue'

const app = createApp(App)
app.use(AuthUI)
app.mount('#app')