A simple SvelteKit app that uses Supabase for authentication via GitHub authentication.
- Sign in with GitHub
- Sign out
- Display user information
- Update user information
- SvelteKit: A framework for building web applications with Svelte
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript
- Supabase: An open-source Firebase alternative
- shadcn-svelte: A Tailwind CSS component library for Svelte, based on shadcn
- Tailwind CSS: A utility-first CSS framework
- Iconify: A unified icon framework using icons from icones.js
- Zod: A TypeScript-first schema declaration and validation library
- docker: https://docs.docker.com/desktop/insta...
- supabase cli: https://supabase.com/docs/guides/cli/...
- Clone the repo
git clone https://github.com/engageintellect/sveltekit-supabase
cd sveltekit-supabase
- Install dependencies
pnpm i
- Create a
.env.local
based on.env.example
and fill in your own credentials
cp .env.example .env.local
- Start your supabase server with
supabase start
Note: You need to have the Supabase CLI installed to run the above command.
-
Supabase console will be available at
http://localhost:54323
-
Start your app
pnpm run dev
- Navigate to localhost:5173 to see your app running.
The easiest way to deploy this app is to use Vercel. You can deploy this app with the following steps:
-
Create a new project in the Supabase dashboard
-
Login to supabase using the console
supabase login
- Link your project to the supabase cli
supabase link --project-ref <YOUR_PROJECT_ID>
- Deploy your database
supabase db push
- Create a new project on Vercel
- Connect your GitHub repository
- Add a new github OAuth app in the Github developer settings
- Configure your environment variables, make sure you are using updated values from your newly-created Supabase project and Github OAuth app
- Deploy
Contributions are welcome! Please feel free to submit a PR or open an issue.
Shout out to Davis Media for building the base template for this project! 🤙