# @grantscout/auth-ui-svelte

> Supabase Auth UI is a collection of pre built UI components that work seamlessly with @supabase/auth-helpers.

Latest version **0.3.0** (published 2024-08-05) · 0 weekly downloads

## Install

```sh
npm install @grantscout/auth-ui-svelte
pnpm add @grantscout/auth-ui-svelte
yarn add @grantscout/auth-ui-svelte
bun add @grantscout/auth-ui-svelte
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2024-08-05 |
| First published | 2024-08-05 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 77.4 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | grantscout |

## Links

- npm: https://www.npmjs.com/package/@grantscout/auth-ui-svelte
- npm.io page: https://npm.io/package/@grantscout/auth-ui-svelte

## Dependencies (3)

- [svelte](https://npm.io/package/svelte.md) ^3.55.1
- [@stitches/core](https://npm.io/package/@stitches/core.md) ^1.2.8
- [@supabase/auth-ui-shared](https://npm.io/package/@supabase/auth-ui-shared.md) ^0.1.8

## Recent versions

- 0.3.0 (latest) — 2024-08-05

## README

# Supabase Auth UI Svelte 

Supabase Auth UI is a collection of pre built UI components that work seamlessly with @supabase/auth-helpers.

The main purpose of these components is to allow developers to get working on their apps quickly, but also be able to use their own style/css.

Auth UI is kept deliberately separate from @supabase/auth-helpers so that developers can migrate away from pre-built UI components as their UI system naturally matures.

## How to use?

In order to make use of the Auth UI Svelte you'll need to have a few things ready first. Let's talk about those things step by step:

#### Install Supabase and the Svelte Supabase-auth-ui

First let us install Supabase into our Svelte project.

```bash
npm install @supabase/supabase-js @supabase/auth-ui-svelte
# or
pnpm add @supabase/supabase-js @supabase/auth-ui-svelte
# or
yarn add @supabase/supabase-js @supabase/auth-ui-svelte
```

#### Create you Supabase client

Let's create our Supabase client 

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

const supabase = createClient(
  '<INSERT PROJECT URL>',
  '<INSERT PROJECT ANON API KEY>'
)
```

#### Passing your Supabase client to the Auth component as a prop

```js
<script lang="ts">
    import { createClient } from '@supabase/supabase-js'
    import { Auth } from '@supabase/auth-ui-svelte'

    const supabase = createClient(
        '<INSERT PROJECT URL>',
        '<INSERT PROJECT ANON API KEY>'
    )
</script>

<Auth supabaseClient={supabase} />
```

And voila we're done! This will give you the bare minimum of what you'll need to get started with supabase-auth-ui. In order to add styling to your Auth component checkout our full documentation [here](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#customization)

---
_Source: https://npm.io/package/@grantscout/auth-ui-svelte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._