Build a User Management App with Svelte

<$Partial path="quickstart_intro.mdx" />

If you get stuck while working through this guide, you can find the full example on GitHub.

<$Partial path="project_setup.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} />

Building the app

Start building the Svelte app from scratch.

Initialize a Svelte app

You can use the Vite Svelte TypeScript Template to initialize an app called supabase-svelte:

npm create vite@latest supabase-svelte -- --template svelte-ts
cd supabase-svelte
npm install

Install the only additional dependency: supabase-js

npm install @supabase/supabase-js

Finally, save the environment variables in a .env. All you need are the API URL and the key that you copied earlier.

<$CodeTabs>

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY

</$CodeTabs>

Now you have the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed on the browser, and that's fine since you have Row Level Security enabled on the Database.

<$CodeSample path="/user-management/svelte-user-management/src/supabaseClient.ts" meta="name=src/supabaseClient.ts" />

App styling (optional)

Optionally, update the CSS file src/app.css to make the app look better. You can find the full contents of this file in the example repository.

Set up a login component

Set up a Svelte component to manage logins and sign ups. It uses Magic Links, so users can sign in with their email without using passwords.

<$CodeSample path="/user-management/svelte-user-management/src/lib/Auth.svelte" meta="name=src/lib/Auth.svelte" />

Account page

After a user is signed in, allow them to edit their profile details and manage their account. Create a new component for that called Account.svelte.

<$CodeSample path="/user-management/svelte-user-management/src/lib/Account.svelte" lines={[[1, 4], [6, 79], [81, -1]]} meta="src/lib/Account.svelte" />

Profile photos

Next, add a way for users to upload a profile photo. Supabase configures every project with Storage for managing large files like photos and videos.

Create an upload widget

Start by creating a new component:

<$CodeSample path="/user-management/svelte-user-management/src/lib/Avatar.svelte" lines={[[1, -1]]} meta="name=src/lib/Avatar.svelte" />

Update the account component

With the Avatar component created, update src/lib/Account.svelte to include it:

<$CodeSample path="/user-management/svelte-user-management/src/lib/Account.svelte" lines={[[1, -1]]} meta="name=src/lib/Account.svelte" />

Launch!

With all the components in place, update App.svelte:

<$CodeSample path="/user-management/svelte-user-management/src/App.svelte" meta="name=src/App.svelte" />

Once that's done, run this in a terminal window:

npm run dev

And then open the browser to localhost:5173 and you should see the completed app.

Svelte uses Vite and the default port is 5173, Supabase uses port 3000. To change the redirection port for Supabase go to: Authentication > URL Configuration and change the Site URL to http://localhost:5173/

At this stage you have a fully functional application!