Skip to content

Latest commit

 

History

History
45 lines (38 loc) · 2.09 KB

README.md

File metadata and controls

45 lines (38 loc) · 2.09 KB

svelte-supabase-user-portal-template

This template repository can be used as a skeleton for developing a web app that has a user authentication and profile management.

Technology stack

  • SvelteKit
  • Supabase (Auth, Database) - Google SSO added
  • TailwindCSS + DaisyUI

Features

  • Login with Google
  • Backend database (Supabase) to store users and their additional information
  • Manage basic profile information

Installation

  • Create a file named .env in the root directory of the project. Put the below content into the file 
    PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_ANON_KEY=
  • Create a new Supabase project
  • Navigate to the Project Settings page in Supabase.
  • Select the API settings page.
  • Navigate to Project URL section and copy the URL.
  • Paste it into the .env file in front of the PUBLIC_SUPABASE_URL key. It should look like this. 
    PUBLIC_SUPABASE_URL=https://<example>.supabase.co
  • Navigate to Project API Keys section and copy the anon public key.
  • Paste it into the .env file in front of the PUBLIC_SUPABASE_URL key. It should look like this. 
    PUBLIC_SUPABASE_ANON_KEY=<anon-key>
  • Navigate to the SQL Editor section and select the User Management Starter SQL snippet
  • Run the snippet and make sure a table called profiles appear in the Table Editor section
  • Go to URL Configuration section
  • Fill in the Site URL to be the URL of the running svelte application (for eg: http://localhost:5173)
  • Add localhost:5173 and localhost as Redirect URLs
  • Open a Command Line/Terminal and navigate into the root directory of the project
  • Run npm install to install the dependencies
  • Run npm run dev. And open the link shown in the terminal from the browser http://localhost:5173
  • You should see a button called Login with Google. Upon clicking on it and authorizing, you will be redirected back to the app
  • You should see a form with your avatar image, email, Name, an Update button and a Logout button
  • Type something on the name input and click on Update button.
  • Finally, verify that the name got updated properly by reloading the page.