supabase Auth using sveltekit

This is a simplified app to help getting started with supabase using sveltekit.

Creating a project

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

Adding Supabase to it

Use this command to apply supabase to your sveltekit app. credits - svelteadd/supabase

npx apply supabase-community/svelte-supabase --no-ssh

Install npm and run

To create a production version of your app:

npm i
npm run dev

Setting up enviorment variables

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"

Making Login file

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}

To Logout user

  <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!!!