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.

npm install @indiebold/authkit

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'
    }
})

Props
Events
Styling
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

<template>
  <AuthFlow
    :socials="{
      providers: ['google', 'facebook'],
      callbackUrl: 'https://your-app.com/callback',
      showLabel: true,
      btnClass: 'custom-btn-class'
    }"
    :classNames="{
      btnPrimary: 'btn-primary',
      btnLoading: 'btn-loading',
      input: 'custom-input-class'
    }"
    :config="{
      showInputLabel: true,
      ui: 'login'
    }"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup lang="ts">
import { AuthFlow } from '@indiebold/authkit';

const handleSuccess = (data: any) => {
  console.log('Successful:', data);
};

const handleError = (error: string) => {
  console.error('Error:', error);
};
</script>

<style>
  /* 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');
</style>

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

<template>
  <PasswordRecovery
    :classNames="{
      btnPrimary: 'btn-primary',
      btnLoading: 'btn-loading',
      input: 'custom-input-class'
    }"
    :config="{
      showInputLabel: true,
      updatePasswordUrl: '/set-new-password'
    }"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup lang="ts">
import { PasswordRecovery } from '@indiebold/authkit';

const handleSuccess = (data: any) => {
  console.log('Successful:', data);
};

const handleError = (error: string) => {
  console.error('Error:', error);
};
</script>