Now we’ll build our posts application using vanilla HTML and JavaScript.

If we were using a library like React, we would:

  • Install Supabase via npm: npm install @supabase/supabase-js.
  • Store settings in an .env file.
  • Import Supabase as a module.

Since we’re using vanilla JavaScript to keep things simple, we will:

  • Use the Supabase CDN.
  • Store settings as consts.

We are going to use a very simplified architecture for the sake of brevity. In a real application, you must implement proper error handling - including displaying errors to users - and loading states whilst async operations are in progress.

The code examples below are abbreviated to focus on key concepts. The full example is in this repo.

Application Architecture

This is the simple app we will build:

  • A registration form (register.html). The registered user will automatically be emailed a link to confirm their email address.
  • The link will both confirm the email and redirect to the home page of the site (index.html).
  • On the home page, we will check if a user is logged in. If not logged in, we will redirect to the login page (login.html).
  • If logged in, we will display a list of the user’s posts and a form to create a new post.
  • The home page will also have a logout button. Clicking this will log the user out and redirect them to the login page.

All back-end functionality will be implemented using the Supabase client library.

Organisation

Create a new folder called supabase-example.

Our files:

supabase-example/
├── index.html
├── register.html
├── login.html
└── js/
    ├── supabase.js
    ├── register.js
    ├── login.js
    ├── posts.js
    ├── auth.js

Setting up the Supabase library

In js/supabase.js:

import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm";

const supabaseUrl = "your-url";
const supabaseKey = "your-anon-key";

export const supabase = createClient(supabaseUrl, supabaseKey);

Key Concepts

  • The +esm suffix tells JSDelivr CDN to serve the ES module version that works with import/export syntax.
  • createClient() initialises the connection to your specific Supabase project.
  • The client needs your project URL and the anon/public key (never use the service role key in front-end code).
  • We will use this exported client in all our other js files.
Tags: