https://github.com/supabase-community/supabase-ui-svelte

Supabase authentication UI for Svelte
https://github.com/supabase-community/supabase-ui-svelte

auth javascript login magiclink oauth supabase svelte

Last synced: 4 months ago
JSON representation

Supabase authentication UI for Svelte

• Host: GitHub
• URL: https://github.com/supabase-community/supabase-ui-svelte
• Owner: supabase-community
• Created: 2021-02-20T09:14:33.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-19T03:30:56.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T04:15:53.548Z (4 months ago)
• Topics: auth, javascript, login, magiclink, oauth, supabase, svelte
• Language: Svelte
• Homepage: https://supabase-ui-svelte.vercel.app
• Size: 417 KB
• Stars: 132
• Watchers: 5
• Forks: 23
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## supabase-ui-svelte

UI components for Supabase authentication using Svelte. Inspired by the [React version](https://github.com/supabase/ui).

# Supported Features

- Login via OAUTH providers: Google, Facebook, Twitter, Github, Azure, Gitlab, Bitbucket, Discord

- Login and signup via email/password

- Login via magic link

- Password recovery

- Password reset

# Storybook

View the components in action:

[supabase-ui-svelte.vercel.app](https://supabase-ui-svelte.vercel.app/?path=/story/auth-auth--default)

# Setup

Install the npm package:

```bash

yarn install -D supabase-ui-svelte

```

Import the component:

```js

import Auth from 'supabase-ui-svelte'

```

Create a supabase client:

```js

import { createClient } from '@supabase/supabase-js'

// get keys via the settings page at https://app.supabase.io

const supabaseClient = createClient('', '')

```

Add the component anywhere on your page:

```js

```

# Props

## `supabaseClient`

Required. This is the supabase client object. Call `createClient()` to get it.

## `view`

A `string` that sets which view to display.

Can be one of `sign_in` | `sign_up` | `magic_link` | `forgotten_password`. Default is `sign_in`.

## `providers`

An array of `string`. Can be any combination of `['facebook', 'google', 'twitter', 'github', 'gitlab', 'bitbucket', 'azure', 'discord']`. When left empty, the social login option is not displayed.

Default is an empty array.

## `socialButtonSize`

A `string` that specifies the size of the social buttons. Can be one of `tiny` | `small` | `medium` | `large` | `xlarge`.

Default is `medium`.

## `socialLayout`

A `string` that specifies the layout direction of the social buttons. Valid options are `horizontal` or `vertical`.

Default is `vertical`.

## `socialColors`

A `boolean` that indicates whether the social buttons should use the brand's colors.

Default is `false`.

## `class`

A `string` of CSS classes to add to the outermost container.

Default is empty.

## `style`

A `string` of CSS attributes to add to the outermost container.

Default is empty.

# License

MIT