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

Table of Contents

1. Props
2. Events
3. Styling
4. 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>