https://github.com/ndrbrt/vue-auth-ui

Pre-built Auth UI for Vue
https://github.com/ndrbrt/vue-auth-ui

auth firebase pocketbase supabase ui-components vue

Last synced: about 2 months ago
JSON representation

Pre-built Auth UI for Vue

• Host: GitHub
• URL: https://github.com/ndrbrt/vue-auth-ui
• Owner: ndrbrt
• License: mit
• Created: 2022-11-10T15:26:43.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2022-11-15T16:24:50.000Z (almost 2 years ago)
• Last Synced: 2024-06-22T05:03:56.995Z (3 months ago)
• Topics: auth, firebase, pocketbase, supabase, ui-components, vue
• Language: Vue
• Homepage:
• Size: 82 KB
• Stars: 22
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Auth UI

Auth UI is a pre-built Vue component for authenticating users.



This started as a porting of [Supabase Auth UI](https://github.com/supabase/auth-ui) (React) to Vue. However, partly due to the fact that Vue encourages certain patterns, it ended up as a more generic Auth UI component that can be used with any authentication client and custom code.

That is because instead of passing the authentication client to the Auth UI component (like Supebase Auth UI), it's the Auth UI component itself that just emits proper events that can be mapped to a client functions, as you can see in the following example:

```html

import { createClient } from '@supabase/supabase-js'

import { Auth } from 'vue-auth-ui'

const supabase = createClient(

  'my-project-url',

  'my-anon-key'

)

   supabase.auth.signInWithPassword(creds)"

    @signUp="creds => supabase.auth.signUp(creds)"

    @signInWithOAuth="provider => supabase.auth.signInWithOAuth(provider)"

  />

```

## Installation

```bash

npm i vue-auth-ui

```

## Quick start

The easiest way to actually use the library is to import the Auth component and a theme:

```html

import { createClient } from '@supabase/supabase-js'

import { Auth, ThemeBold, type Appereance, css } from 'vue-auth-ui'

const supabase = createClient(

  'my-project-url',

  'my-anon-key'

)

const appearance: Appereance = {

  theme: ThemeBold,

  themeVariant: 'dark',

  // In addition to theme and variant you can specify other preferences.

  // More on that in the "customization" section.

  prependedClassName: 'my-custom-class',

  className: {

    button: css({

      variants: {

        color: {

          primary: {

            backgroundColor: 'blue'

          }

        }

      }

    })

  }

}

let myError: string | undefined

const signIn = async (creds: any) => {

  myError = undefined

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

  myError = error?.message

  // Custom logic, like `router.push('/')` etc.

}

   signIn(creds)"

    @signUp="creds => supabase.auth.signUp(creds)"

    @signInWithOAuth="provider => supabase.auth.signInWithOAuth(provider)"

  />

```

Alternatively, atomic components such as SignIn, SignUp, MagicLink, etc. can be used.  

Example of a page with MagicLink:

```html

import { createClient } from '@supabase/supabase-js'

import { MagicLink, Anchor, ThemeBold, type Appereance } from 'vue-auth-ui'

const supabase = createClient(

  'my-project-url',

  'my-anon-key'

)

const appearance: Appereance = {

  theme: ThemeBold,

  themeVariant: 'dark'

}

const signInWithOtp = async (email: {[key: string]: any}) => {

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

  // ...

}

  

  

  

    Sign in with password

  

```

## Customization

The customization is pretty much the same as that of Supabase Auth UI, except for **one difference**:  

> in Supabase Auth UI, a theme variant can be specified by passing a `theme` prop directly to the Auth component; in Vue Auth UI a theme variant can be passed within the `appearance` object, in the `themeVariant` property.

That being said, you can refer to Supabase Auth UI docs for more information on customization:  

[https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#customization](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#customization)