@indiebold/authkit
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @indiebold/authkit

Weekly Downloads

0

Version

0.0.2

License

none

Unpacked Size

324 kB

Total Files

7

Last publish

Collaborators

  • anthonylan