This is a simplified app to help getting started with supabase using sveltekit.
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in my-app
npm create svelte@latest my-app
cd myapp
Use this command to apply supabase to your sveltekit app. credits - svelteadd/supabase
npx apply supabase-community/svelte-supabase --no-ssh
To create a production version of your app:
npm i
npm run dev
Goto .env file in your project
Now goto supabase -> your project
In the left sidebar goto project settings and then API and copy and paste your
Project url in "VITE_SUPABASE_URL", Anon public key in "VITE_SUPABASE_ANON_KEY", Servicerole secret in "SUPABASE_PRIVATE_KEY", JWT secret in "SUPABASE_JWT_SECRET"
Make a login.svelte in src/lib Now add the following code there.
[!Note]
While local development disable email conformation in Auth -> Providers -> Email -> Confirm email, also you can disable row level security. However you can enable it later for deploying or other purposes.
<script>
import supabase from "$lib/db";
import { goto } from "$app/navigation";
let email = "";
let password = "";
//to show login and signup button according to usecase
let newUser = true;
function handleUser(){
newUser = false;
}
function handlenewUser(){
newUser = true;
}
//SignUp and LogIn functions
const signUp = async () => {
let { data, error } = await supabase.auth.signUp({
email: email,
password: password,
});
// to redirect to home page
goto('/')
};
const signIn = async () => {
let { data, error } = await supabase.auth.signIn({
email: email,
password: password
})
//to redirect to home page
goto("/");
};
</script>
<div class="input-field">
<label for="text">Name</label>
<input type="email" placeholder="enter email" bind:value={email}>
<label for="email">Email:
<input type="email" placeholder="enter email" bind:value={email}>
</label>
<label for="password">Password:
<input type="password" placeholder="enter password" bind:value={password}>
</label>
{#if password.length < 6}
<p>Password must be 6 characters long</p>
{/if}
{#if newUser}
<div><button on:click={() => handleUser()}>Already have an account? LogIn</button></div>
<button on:click={signUp}>SignUp</button>
{/if}
{#if !newUser}
<div><button on:click={() => handlenewUser()}>Don't have an account? SignUp</button></div>
<button on:click={signIn}>LogIn</button>
{/if}
</div>
Also if you want to display userdata in any page first create a stores.js file in src/slib and you can use this code.
import { writable } from "svelte/store";
// Create the writable store
export const user = writable(false);
Now use this code in any page to get userdata something like this
<script>
import Login from "../lib/login.svelte";
import { user } from "$lib/stores";
import supabase from "$lib/db";
import { onMount } from "svelte";
let isLoggedIn = false;
//to check if the user is loggedin or not
const updateUserStatus = (session) => {
if (session?.user) {
user.set(session.user);
isLoggedIn = true;
} else {
user.set(null);
isLoggedIn = false;
}
};
onMount(() => {
const session = supabase.auth.session();
updateUserStatus(session);
supabase.auth.onAuthStateChange((_, session) => {
updateUserStatus(session);
});
});
</script>
{#if isLoggedIn}
Hii {$user.email}!
{:else}
<Login />
{/if}
<script>
const logout = async () => {
{
await supabase.auth.signOut();
}
goto("/");
};
</script>
<button on:click={() => logout()}>Logout</button>
You can deploy it in vercel for free and make sure to paste enviorment variables(variables insdie .env file) in vercel while deploying it.
Hope it helps!!!