Brian Mwangi

Back to articles

Implement authentication using Supabase

-- 2 min read

An image of a laptop on a laptop keyboard.

When using a website, some information might only be available to people that match a certain criteria, e.g a student in an institution. In order to access this information, one needs to prove they are who they say they are, usually by providing a username and password. This process is called authentication.

How do I do it?

Authentication is fairly easy to implement using Supabase. Supabase is a service that provides a hosted database (postgres), authentication, amongst other services. It handles all the heavy lifting and provides you with client a library that you can use in your favourite programming language. This client library provides a simple api for authentication and interacting with your database .

Project setup

We will be using Remix framework in these examples. Let's set up our project. Initialize a Remix app with the following command:

npx create-remix@latest

Setting up Supabase in a Remix application is a straightforward process. Follow the steps here to create a Supabase client.

Signup

The first step in an authentication flow is signing up users. Let's set up a sign up page with a form to capture the user's details.

// /routes/signup.jsx
export default function Signup() {
  return (
    <main>
      <h1>Signup</h1>
      <form method="post">
        <fieldset>
          <label>
            Email:
            <input type ="email" name="email" />
          </label>
          <label>
              Password:
              <input type="password" name="password" />
          </label>
          <button type="submit">Sign up</button>
        </fieldset>
      </form>
    </main>
  );
}

When a user submits the form, we get access to the data they submitted in the action function in the signup route.

// routes/signup.jsx
import { createClient } from "../.server/supabase";

export async function action({ request }) {
  let formData = await request.formData();
  let email = formData.get('email');
  let password = formData.get('password');

  // Sign up using Supabase
  let { supabase, headers } = createClient(request);
  let { data, error } = await supabase.auth.signUp({ email, password });

  return null;
}

// Rest of your code

The user will get an email that they should click to verify their email.

That was quite easy, now let's see how to log in a user.

Login

To log in a user we just need a form to collect their user name and password and check it against Supabase to see if they are a valid user. Let's create our login page with a form and an action function to handle the form submission.

// /routes/login.jsx
import { redirect } from '@remix-run/react';
import { createClient } from "../.server/supabase";

export async function action({ request }) {
  let formData = await request.formData();
  let email = formData.get('email');
  let password = formData.get('password');

  // Log in with Supabase
  let { data, error } = await supabase.auth.signInWithPassword({ email, password });
  
  return redirect('/');
}

export default function Signup() {
  return (
    <main>
      <h1>Login</h1>
      <form method="post">
        <fieldset>
          <label>
            Email:
            <input type ="email" name="email" />
          </label>
          <label>
              Password:
              <input type="password" name="password" />
          </label>
          <button type="submit">Log in</button>
        </fieldset>
      </form>
    </main>
  );
}

All we need to do is pass the email and password that the user provided to Supabase using the function signInWithPassword()

That's it 👋🏾

WhatsApp icon