Supabase Email & Password

Shipped supports Supabase Email and Password authentication.

It is an authentication method that requires the user to provide a valid email and create a password (at least 6 characters in length).

When the credentials are provided, Supabase sends a confirmation email to the inbox of the user.

The email contains a link. When the user clicks on that link, the account is correctly confirmed, and the user can use the credentials to log in to your website.

If you need Supabase Auth, move to the supabase branch of the Shipped git repository.

All the code changes described below are already applied there.

Use this command in the terminal to move to the branch:

git checkout supabase

Add Email and Password auth

To use Email and Password authentication using Supabase, you need to apply a couple of changes.

1. Update the file src/app/signup/page.tsx

Replace:

import SignUp from "@/components/pages/SignUp/SignUp";

return <SignUp />;

with:

import SignUpWithEmailPassword from "@/components/pages/SignUp/SignUpWithEmailPassword";

return <SignUpWithEmailPassword />;

1. Update the file src/app/login/page.tsx

Replace:

import Login from "@/components/pages/Login/Login";

return <Login />;

with:

import LoginWithEmailPassword from "@/components/pages/Login/LoginWithEmailPassword";

return <LoginWithEmailPassword />;

The configuration is complete. You now have both the signup and login pages with email and password prompts, plus the Google sign-in by default.

Authenticated users

To identify logged-in users in a client component ("use client" on top of the component file), use this code:

client component

"use client"

import { useSupabaseSession } from "@/hooks/supabase/useSupabaseSession";

const ClientComponentExample = () => {
    const { session, status } = useSupabaseSession();
}