Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rechaff) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReChaff Drop-in Authentication

ReChaff provides a lightweight, fully customizable drop-in authentication system for Supabase. With minimal setup, developers can add sign-in and sign-up forms to their apps, complete with social OAuth buttons and default styling.

1. Setup

Install Supabase in your app if you haven’t already:

npm install @supabase/supabase-js

Create a Supabase client:

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://xyzcompany.supabase.co', 'publishable-or-anon-key')

2. Install Rechaff

You can use Rechaff in two ways: via npm (recommended) or via a CDN import.

Option A — Install via npm

npm install rechaff

import { createAuthComponents } from 'rechaff';

// Initialize auth components
const { SignIn, SignUp } = createAuthComponents(supabase);

Option B — Import directly from CDN

import { createAuthComponents } from "https://cdn.jsdelivr.net/gh/LaB-CH3/rechaff@refs/heads/main/dist/Auth.js";

// Initialize auth components
const { SignIn, SignUp } = createAuthComponents(supabase);

3. Using the Components

Sign-up and sign-in components share the same configuration options. You can optionally provide your own CSS classes—whether custom or TailwindCSS. ReChaff also supports Remix Icons, so if you already have it in your project, Rechaff will automatically apply the icons where needed—no additional setup is required.

A quick example

 <SignUp :config="{ assets:{ redirectUrl: 'https://your-app.com/dashboard' } }" />

  <sign-up
      :config="{
        elements: {
            formButtonPrimary: 'your-org-button org-red-button',
            providersButton: 'your-org-secondary-button org-gray-button',
            formInputs: 'your-org-input org-red-input'
        },
        layout: {
            socialButtonsPlacement: 'bottom', 
            socialButtonsVariant: 'iconButton' 
        },
        assets:{
            logoLinkUrl: 'https://your-site.com',
            logoImageUrl: 'https://your-site.com/logo.svg',
            redirectUrl: 'https://your-app.com/dashboard',
            title: 'Create account',
            subtitle: 'Start your 30-day free trial. Cancel anytime'
        },
        providers: ['Google', 'Github', 'Discord']
    }" />

  <sign-in
      :config="{
        elements: {
            formButtonPrimary: 'your-org-button org-red-button',
            providersButton: 'your-org-secondary-button org-gray-button',
            formInputs: 'your-org-input org-red-input'
        },
        layout: {
            socialButtonsPlacement: 'top', 
            socialButtonsVariant: 'blockButton' 
        },
        assets:{
            logoLinkUrl: 'https://your-site.com',
            logoImageUrl: 'https://your-site.com/logo.svg',
            redirectUrl: 'https://your-app.com/dashboard',
            title: 'Welcome back!',
            subtitle: 'Please provider your details to continue'
        },
        providers: ['Google', 'Discord']
    }" />

✅ Note: If your custom classes don’t override ReChaff’s default classes, add !important to your styles. For example:

   ...
    formButtonPrimary: '!your-org-button !org-red-button'
   ....

4. Configuration Options

config
├── elements
│   ├── formButtonPrimary   # CSS classes for main submit button
│   ├── providersButton     # CSS classes for OAuth provider buttons
│   └── formInputs          # CSS classes for input fields
├── layout
│   ├── socialButtonsPlacement  # 'top' | 'bottom'
│   └── socialButtonsVariant    # 'iconButton' | 'blockButton'
├── assets
│   ├── logoLinkUrl       # URL for logo link
│   ├── logoImageUrl      # Path to logo image
│   ├── redirectUrl       # URL to redirect after success
│   ├── title             # Form header text
│   └── subtitle          # Form subtitle text
└── providers             # Array of OAuth providers, e.g., ['Google', 'Github', 'Discord']

rechaff