Build a simple web app with Sapper using Supabase for authentication

Getting started with Supabase and Sapper

# 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
npm i @supabase/supabase-js
npm i --D @rollup/plugin-json
import json from '@rollup/plugin-json';
json({compact: true})

Adding Supabase to Sapper

Create config/settings.js and config/supabase.js
import { createClient } from ‘@supabase/supabase-js’;import { supabaseConfig } from ‘./settings’;export const supabase = createClient(supabaseConfig.url, supabaseConfig.key, supabaseConfig.options);
export const supabaseConfig = {url: ‘https://your-project-unique-url.supabase.co',key: `anon-public-key`options: []};
Grab the API key and URL and put them into the settings.js
<script>
import supabase import { supabase } from ‘../config/supabase’;
</script>

Building register and login views

Building additional logic

Aaand that’s it! 👏👏

--

--

--

I build complex things on the web and share my findings to help others learn too.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LGMVIP — WEB DEVELOPMENT INTERNSHIP EXPERIENCE

Learning Javascript as a C++ Developer

setState() — Why and How it’s used in React.js

Add the CSS animation to tooltip

How to add CSS styles on JavaScript console (2021)

Introduction to Apache Cordova Development : Architecture & Benefits

Next.js Firebase v9: Delete a To-Do

Top 10 Node.js Frontend Frameworks To boost Up Your Development Projects

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mika S.

Mika S.

I build complex things on the web and share my findings to help others learn too.

More from Medium

My Experience of Building a Music Web Application Using Firebase at JENGA School.

How I added animation to my generated Flutter website using Parabeac

What is Flutter and why we chose it as our primary technology?

8 Front End Web Tools to Improve Your Development Skills

8 Front End Web Tools to Improve Your Development Skills