Build a simple web app with Sapper using Supabase for authentication
This tutorial covers building a basic authentication for your Sapper application by using Supabase, the open-source Firebase alternative.
You might’ve stumbled upon Sapper or Svelte. Sapper is a framework for building web applications with Svelte.
Supabase on the other hand is a backend service quite similar to Firebase. In fact, it’s a open-source alternative to it.
👉 Source code: https://github.com/msyyn/sapper-supabase-starter
Getting started with Supabase and Sapper
Prior starting to develop, you will need to open a free Supabase account. Head over to https://supabase.io and complete registration flow.
Once you’ve created an account, you will need to create a new project.
After creating a project, Supabase will take a few minutes to build our database and API. While our dashboard is waiting to be built, let’s create a new sapper project by running the following command in a folder of choice:
# create a default sapper app
npx degit "sveltejs/sapper-template#rollup" my-app# navigate to your app folder
cd my-app# install dependencies
npm install
Now that we have a default Sapper application and a Supabase project setup, let’s install supabase-js to our application. This will allow our application to communicate with our Supabase project:
npm i @supabase/supabase-jsWe will also need to install additional JSON plugin for Rollup:
npm i --D @rollup/plugin-jsonAnd then configurate Rollup to use it. Open your rollup.config.js found at the base of your application folder and import our plugin at the beginning of the file:
import json from '@rollup/plugin-json';Then within the plugins array inside client and server objects, add the following line:
json({compact: true})I added it between resolve() and commonjs().
Adding Supabase to Sapper
Once we are done with the basics, let’s continue by adding new folder called config within our Sapper project’s src folder. After that, we create two new files under it, settings.js and supabase.js
This is how the app structure should look like:
Let’s start with building the supabase.js file. We are going to import createClient fucntion from supabase-js. This function allows us to create a client between our application and the supabase project.
Then we are going to import our supabase settings from the settings.js, which we are building next up.
Your supabase.js should look like this:
import { createClient } from ‘@supabase/supabase-js’;import { supabaseConfig } from ‘./settings’;export const supabase = createClient(supabaseConfig.url, supabaseConfig.key, supabaseConfig.options);
Now over to the settings.js file. Here is what we are putting inside that:
export const supabaseConfig = {url: ‘https://your-project-unique-url.supabase.co',key: `anon-public-key`options: []};
These values can be found in our Supabase project’s settings. Let’s head over to the Supabase dashboard and navigate under Settings → API. You can leave the options array blank for now.
Finally, let’s head over to _layout.svelte file and import the supabase client we constructed inside the existing script tag:
<script>
import supabase import { supabase } from ‘../config/supabase’;
</script>Building register and login views
This is where things get fun! We will want to have two views, login and register. Let’s head over to Nav.svelte and add links to these pages prior creating the actual views:
Now that we have the navigation sorted out, let’s create basic registration and login views by creating register.svelte and login.svelte under routes folder.
Our forms are going to look pretty basic, and don’t have that much logic built on them for any sort of email & password validations.
Here is my register.svelte structure:
https://gist.github.com/msyyn/537352c856868c35157b1edbcd196205
Now, if we submit our registration form and head over to our Supabase dashboard and the Authentication section, we should see new user appearing:
Our login.svelte will use basic functionality from register.svelte, with small adjustments:
Building additional logic
Now we can register users, and log in with those. But that’s not all we need. Here is what else we should implement:
- We want login/register only to show for users that are not logged-in
- We want to show “My account” page for logged-in users
- We want to show “Log out” link for logged-in users
This should be fairly simple actually. Let’s go ahead and edit the Nav.svelte towards this:
Now we have everything we need. Logged in user sees relevant links and so do logged out users — and everything works!
Expect… That we still need to build the account page! Let’s add new route, account.svelte, with following content:
Aaand that’s it! 👏👏
We now have working skeleton for building Supabase powered Sapper applications.
👉 Source code: https://github.com/msyyn/sapper-supabase-starter
