Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anthonylan/indiebold-authkit
Pre-built, unstyled Vue components for user authentication, built on top of Supabase's APIs
https://github.com/anthonylan/indiebold-authkit
reusable-components supabase supabase-auth user-authentication vue-auth
Last synced: 19 days ago
JSON representation
Pre-built, unstyled Vue components for user authentication, built on top of Supabase's APIs
- Host: GitHub
- URL: https://github.com/anthonylan/indiebold-authkit
- Owner: anthonylan
- Created: 2024-11-13T14:33:38.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T14:50:57.000Z (3 months ago)
- Last Synced: 2025-01-17T09:54:18.869Z (23 days ago)
- Topics: reusable-components, supabase, supabase-auth, user-authentication, vue-auth
- Language: Vue
- Homepage:
- Size: 63.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IndieBold AuthKit Vue Component powered by Supabase
This component provides a social login and email authentication functionality. It allows users to authenticate using different social providers (e.g., Google, Facebook) or through email/password authentication.
```sh
npm install @indiebold/authkit
```
```javascript
import { createApp } from 'vue'
import AuthKit from '@indiebold/authkit'
const app = createApp(App);
app.use(AuthKit, {
supabase: {
url: 'your_supabase_url',
key: 'your_supabase_key'
}
})
```
## Table of Contents
1. [Props](#props)
2. [Events](#events)
3. [Styling](#styling)
4. [Usage](#usage)
---
## Props
### `socials` (optional)
An object that defines the social login settings.
- **`providers`** (array): A list of social login providers (e.g., `['google', 'facebook']`).
- **`callbackUrl`** (string): URL to redirect to after successful authentication.
- **`showLabel`** (boolean, optional): Determines if the provider name should be displayed alongside the icon (default: `false`).
- **`btnClass`** (string, optional): A custom CSS class for the login buttons.
- **`fluid`** (boolean, optional): If `true`, the buttons will stack vertically (default: `false`).
### `classNames` (optional)
An object to apply custom CSS classes to specific elements.
- **`btnPrimary`** (string, optional): A class for the primary submit button.
- **`btnLoading`** (string, optional): A class to apply when the component is loading.
- **`input`** (string, optional): A class for the input fields.
### `config` (optional)
An object to customize input labels and the UI type (either 'login' or 'signup').
- **`showInputLabel`** (boolean): Controls whether input labels are displayed (default: `true`).
- **`ui`** (string): The UI mode ('login' or 'signup').
---
## Events
- **`success`**: Emitted when the authentication is successful.
- **`error`**: Emitted when an error occurs during authentication.
---
## Styling
The component uses inline styles for layout and button design. You can override these styles by passing custom classes via the `classNames` prop.
---
## Usage
### Example
```vue
import { AuthFlow } from '@indiebold/authkit';
const handleSuccess = (data: any) => {
console.log('Successful:', data);
};
const handleError = (error: string) => {
console.error('Error:', error);
};
/* Import fontawesome if you intend to use social logins */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
```
# Password Recovery & Reset Component
This Vue component handles the user flow for password recovery and resetting. It includes two forms: one for resetting the password via email and another for updating the password once the user has received a reset link.
## Props
### `classNames`
An object to customize the CSS class names for various elements.
- **btnPrimary** *(optional)*: The class for the primary button.
- **btnLoading** *(optional)*: The class for the button in a loading state.
- **input** *(optional)*: The class for input fields.
### `config`
An object containing configuration options.
- **updatePasswordUrl**: The URL to which the user will be redirected to update their password.
- **showInputLabel** *(optional, default: `true`)*: Whether to display input labels.
## Usage
```vue
import { PasswordRecovery } from '@indiebold/authkit';
const handleSuccess = (data: any) => {
console.log('Successful:', data);
};
const handleError = (error: string) => {
console.error('Error:', error);
};
```