Handling Registration

We’ll handle registering a user using Supabase’s auth system.

In register.html, Make sure to use type="module" when connecting to the script:

<script type="module" src="js/register.js"></script>

We need email and password inputs inside a form:

<form>
  <input name="email" type="email" required />
  <input name="password" type="password" required minlength="6" />
  <button>Submit</button>
</form>

In js/register.js:

import { supabase } from "./supabase.js";

const registerForm = document.querySelector("form");

registerForm.addEventListener("submit", async function (e) {
  e.preventDefault();

  const form = e.target;
  const email = form.email.value.trim();
  const password = form.password.value;

  try {
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      // handler error
    }

    if (data.user) {
      // display a message to the user or redirect
    }
  } catch (error) {
    // handler error
  }
});

Key Concepts

• the Supabase client we configured earlier is imported.
• supabase.auth.signUp() creates a new user account and automatically sends a confirmation email.
• The response contains data.user (the user object) and error (if something went wrong).
• Supabase handles all the complexity of user creation, email verification, and password hashing.

Register a user and then go to the Authentication section of Supabase. You will see the new user in the table with the text “Waiting for verification” in the Last sign in at column.

Click the link in the confirmation email that Supabase automatically sends and reload the Authentication section. The Last sign in at column will now have a date.

The link will redirect you to the front-end app’s home page, where you will be logged in.