@supa-kit/auth-ui-vue

Auth UI Vue

Pre-built auth widgets to get started in minutes.

Preview

https://user-images.githubusercontent.com/6118824/260960744-03a20835-76bc-4541-87ac-2e23277b7200.mp4

Introduction

auth-ui-vue is a pre-built, customizable Vue component for authenticating users base on supabase

Customizable authentication UI component with custom themes and extensible styles to match your brand and aesthetic.

Table of Contents

• Auth UI Vue
  • Preview
  • Introduction
  • Table of Contents
  • Usage
    • For Vue 3
    • For Nuxt 3
  • Set up Auth UI
    • Social Providers
    • Options
    • Supported Views
    • Anonymous Sign-ins
  • Customization
    • Predefined themes
    • Switch theme variations
    • Override themes
    • Create your own theme
    • Custom CSS classes
    • Custom inline CSS
    • Custom lables (i18n)
  • Auth Helpers
    • UserContextProvider
    • useSupabaseUser
  • Inspiration
  • License

Usage

For Vue 3

To start using the library in Vue 3, install these in your project:

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

<!-- App.vue -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa
    }"
  />
  ...
</template>

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

For Nuxt 3

To begin, install the Supabase module for Nuxt. The auth-ui-vue integration is seamless with this module.

Or, You can choose to use it in the same way as in Vue 3.

Here's a example work with @nuxtjs/supabase:

First install these in your project:

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

Add @nuxtjs/supabase to the modules section of nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase']
})

Add SUPABASE_URL and SUPABASE_KEY to the .env:

SUPABASE_URL="<INSERT PROJECT URL>"
SUPABASE_KEY="<INSERT PROJECT ANON API KEY>"

Now, you can access the supabase client everywhere inside your vue components.

<!-- App.vue -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa
    }"
  />
  ...
</template>

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

  const supabaseClient = useSupabaseClient()
</script>

Set up Auth UI

Social Providers

The Auth component also supports login with official social providers.

<!-- App.vue -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
    }"
    :providers="['google', 'facebook', 'twitter']"
  />
  ...
</template>

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

Options

Options are available via queryParams:

<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :providers="['google']"
    :queryParams="{
      access_type: 'offline',
      prompt: 'consent',
      hd: 'domain.com'
    }"
    onlyThirdPartyProviders
  />
  ...
</tempalte>

Supported Views

The Auth component is currently shipped with the following views:

• Email Login
• Magic Link login
• Social Login
• Update password
• Forgotten password
• Anonymous Sign-ins

<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :providers="['google']"
    v-model:view="authView"
    :redirectTo="redirectTo"
  />
  ...
</tempalte>

<script setup lang="ts">
const authView = ref('sign_in')

const redirectTo = computed(() => {
  return authView.value === 'forgotten_password' ? FORGOTTEN_PASSWORD_URL : REDIRECT_TO_URL
})
</script>

Anonymous Sign-ins

The Auth component is currently support Anonymous user login. For this you need to create an anonymous user

const { data, error } = await supabase.auth.signInAnonymously()

Enable manual linking in supabase

Currently works for magic link and social login. If you use password login, you need user to update password after he

Customization

There are several ways to customize Auth UI:

• Use one of the predefined themes that comes with Auth UI
• Extend a theme by overriding the variable tokens in a theme
• Create your own theme
• Use your own CSS classes
• Use inline styles
• Use your own labels

Predefined themes

Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a default variation, and a dark variation. You can switch between these themes using the theme prop. Import the theme you want to use and pass it to the appearance.theme prop.

<!-- App.vue -->
<!-- {/* Apply predefined theme */} -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
    }"
  />
  ...
</template>

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

Currently there is only one predefined theme available, but we plan to add more.

Switch theme variations

Auth UI comes with two theme variations: default and dark. You can switch between these themes with the theme prop.

<!-- App.vue -->
<!-- {/* Set theme to dark */} -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: ThemeSupa,
    }"
    theme="dark"
  />
  ...
</template>

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

If you don't pass a value to theme it uses the "default" theme. You can pass "dark" to the theme prop to switch to the dark theme. If your theme has other variations, use the name of the variation in this prop.

Override themes

Auth UI themes can be overridden using variable tokens. See the list of variable tokens.

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

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

If you created your own theme, you may not need to override any of the them.

Create your own theme

You can create your own theme by following the same structure within a appearance.theme property. See the list of tokens within a theme.

<!-- App.vue -->
<template>
  ...
  <Auth
    theme="default"
    :supabaseClient="supabaseClient"
    :appearance="{
      theme: customTheme
    }"
  />
  ...
</template>

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

  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'
        //..
      }
    },
    // You can also add more theme variations with different names.
    evenDarker: {
      colors: {
        brandButtonText: 'white',
        defaultButtonBackground: '#1e1e1e',
        defaultButtonBackgroundHover: '#2e2e2e'
        //..
      }
    }
  }

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

You can swich between different variations of your theme with the "theme" prop.

Custom CSS classes

You can use custom CSS classes for the following elements: "button", "container", "anchor", "divider", "label", "input", "loader", "message".

<!-- App.vue -->
<!-- // If you want to extend the default styles instead of overriding it, set "extend" to true -->
<template>
  ...
  <Auth
    :supabaseClient="supabaseClient"
    :appearance="{
      extend: false,
      className: {
        anchor: 'my-awesome-anchor',
        button: 'my-awesome-button',
        //..
      }
    }"
  />
  ...
</template>

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

Custom inline CSS

You can use custom CSS inline styles for the following elements: "button", "container", "anchor", "divider", "label", "input", "loader", "message".

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

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

Custom lables (i18n)

You can use custom labels with localization.variables. See the list of labels that can be overwritten.

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

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

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

Auth Helpers

UserContextProvider

auth-ui-vue provides UserContextProvider to passing the supabase user and session data into the component tree.

This will be useful when the sub-components need to access the user data at any time in the project.

<!-- App.vue (parent component) -->
<template>
  <UserContextProvider :supabaseClient="supabaseClient">
    <Profile />
  </UserContextProvider>
</template>

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

  import Profile from '@/components/Profile.vue'

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

<!-- Profile.vue (children component) -->
<template>
  <!-- Read the supabase user data -->
  {{ user.email }}
</template>

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

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

useSupabaseUser

Once logged in, you can access supabase user everywhere inside your vue components.

Or you can protect your authenticated routes by watching the user's state, here is an example:

<template>
  <!-- Access the supabase user data -->
  {{ supabaseUser.email }}
</template>

<script lang="ts" setup>
  import { createClient } from '@supabase/supabase-js'

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
  const { supabaseUser } = useSupabaseUser(supabaseClient)

  watch(
    () => supabaseUser.value,
    (user) => {
      if (!user) {
        return router.push('/login')
      }
    },
    { immediate: true }
  )
</script>

Inspiration

• @supabase/auth-ui-react - Pre-built Auth UI for React.

License

MIT @xiaoluoboding