https://github.com/OpenFrenchFries/supasveltekit
Where Svelte's elegance meets Supabase's might!
https://github.com/OpenFrenchFries/supasveltekit
authentication cloud database javascript opensource realtime supabase svelte sveltekit toolkit typescript
Last synced: 8 months ago
JSON representation
Where Svelte's elegance meets Supabase's might!
- Host: GitHub
- URL: https://github.com/OpenFrenchFries/supasveltekit
- Owner: OpenFrenchFries
- License: mit
- Created: 2023-08-25T22:30:49.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T15:21:21.000Z (over 1 year ago)
- Last Synced: 2024-12-18T15:32:48.177Z (over 1 year ago)
- Topics: authentication, cloud, database, javascript, opensource, realtime, supabase, svelte, sveltekit, toolkit, typescript
- Language: TypeScript
- Homepage:
- Size: 1.1 MB
- Stars: 41
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# SupaSvelteKit ⚡
> 🌟 Where Svelte's elegance meets Supabase's might! 🌟
SupaSvelteKit is a library designed to seamlessly integrate SvelteKit with Supabase, providing developers with a powerful toolkit to build dynamic web applications.
## 🎉 Features
- **Authentication** 🔐: Easily integrate Supabase authentication with SvelteKit.
- **Realtime** ⏱️: Simplified multi-user realtime updates with Svelte stores.
- **Storage** 📦: Manage your Supabase storage with Svelte components.
- ... and more to come! Stay tuned and feel free to suggest or contribute new features!
## 🛠 Installation
```bash
npm install supasveltekit
```
## 🚀 Quick Start
1. Initialize your Supabase client:
```src/lib/supabase.ts```
```ts
import { PUBLIC_SUPABASE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
import { createClient } from '@supabase/supabase-js';
export const supabaseUrl = PUBLIC_SUPABASE_URL;
export const supabaseKey = PUBLIC_SUPABASE_KEY;
export const supabase = createClient(supabaseUrl, supabaseKey);
```
2. Use SupaSvelteKit components in your SvelteKit app:
```src/routes/+page.svelte```
```svelte
import { supabase } from '$lib/supabase';
import { SupabaseApp, Authenticated, Unauthenticated, RealtimePresence, BucketFilesList } from 'supasveltekit';
Welcome, {session?.user?.identities?.[0]?.identity_data?.email}!
signOut()}>Sign Out
{#if error !== null}
{error}
{/if}
-
{file.name}
{#each bucketFiles as file}
{/each}
{#if error}
Error: {error.message}
{:else if !state}
Loading...
{:else}
Connected to channel {channel?.name}
Number of users: {state?.count}
updateStatus({ status: 'online' })}>Go online
updateStatus({ status: 'offline' })}>Go offline
{/if}
Sign in to continue
signIn()}>Sign In
```
## 📚 Documentation
For detailed documentation, usage guides, and API references, dive into [our documentation site](http://SupaSvelteKit.openfrenchfries.com/).
## 📖 Examples
Explore hands-on examples to get a feel for how SupaSvelteKit enhances your projects:
- [Basic Todo App](https://github.com/OpenFrenchFries/supasveltekit-example-todo)
- [Authentication Demo](https://github.com/orgs/OpenFrenchFries/repositories)
- ... and more examples coming soon! If you've built something cool with SupaSvelteKit, let us know!
## 💪 Contributing
Join the SupaSvelteKit journey! 🌍 Whether you're fixing bugs, suggesting enhancements, or enriching the documentation, every contribution counts. Dive into our [CONTRIBUTING.md](.github/CONTRIBUTING.md) to get started.
## 📜 License
Freedom with responsibility! SupaSvelteKit is [MIT licensed](LICENSE), ensuring open use with acknowledgment.
## 🙌 Acknowledgements
A big shoutout 📣:
- To the Svelte and Supabase communities for lighting the way with invaluable resources and support.
- To every coder, contributor, and coffee mug that's been part of this journey. ☕
---
Crafted with 🧡 by [OpenFrenchFries](https://github.com/OpenFrenchFries) and the amazing contributors. [Join us!](.github/CONTRIBUTING.md)