Supabase UI Svelte

Overview

Supabase-UI-Svelte is a set of UI components specifically designed for Supabase authentication using the Svelte framework. Inspired by the React version, it offers various features such as login via OAUTH providers, email/password login and signup, password recovery and reset, as well as a Storybook for viewing the components in action. It aims to provide an easy and convenient way to integrate Supabase authentication into your Svelte applications.

Features

• Login via OAUTH providers: Supports authentication via popular OAUTH providers including Google, Facebook, Twitter, Github, Azure, Gitlab, Bitbucket, and Discord.
• Email/Password login and signup: Allows users to sign in and sign up using their email and password.
• Password recovery: Provides a password recovery functionality for users who may have forgotten their password.
• Password reset: Enables users to reset their password in case they need to change it.
• Storybook: Offers a Storybook for viewing the components in action, providing a convenient way to preview and interact with the UI components.

Installation

To install the Supabase-UI-Svelte package, you can follow these steps:

1. Install the npm package:

   npm install supabase-ui-svelte
   

2. Import the component in your Svelte file:

   import { ComponentName } from 'supabase-ui-svelte';
   

3. Create a Supabase client:

   import { createClient } from '@supabase/supabase-js';
   
   const supabaseUrl = 'https://your-supabase-url.supabase.co';
   const supabaseKey = 'your-supabase-api-key';
   
   const supabaseClient = createClient(supabaseUrl, supabaseKey);
   

4. Add the component anywhere on your page:

   <ComponentName
     supabaseClient={supabaseClient}
     view="sign_in"
     providers={['google', 'facebook', 'twitter']}
   />
   

Please note that the code snippets provided above are just examples and should be adjusted according to your specific implementation.

Summary

Supabase-UI-Svelte is a powerful tool for integrating Supabase authentication into your Svelte applications. With its support for various login methods, password recovery, and a convenient Storybook for previewing the components, it provides an efficient and user-friendly solution for managing user authentication. By following the installation guide, you can quickly get started with Supabase-UI-Svelte and enhance the authentication experience in your Svelte projects.