Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T16:24:50.000Z (about 2 years ago)
- Last Synced: 2024-09-28T11:02:11.803Z (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)