Supabase Magic Link

Authenticate users with a password-less method

Shipped comes with support for Supabase Magic Link.

The Magic Link Authentication is a password-less authentication method, that involves sending an email to the user, with a link. When the user clicks on that link, they are redirected to the website, and an active authentication session is created under the hood.

It is very popular and it is used in favor of email & password authentication because it saves you from storing sensitive data.

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

SignUp / Login

Use this code in SignUp.tsx and Login.tsx

import toast from "react-hot-toast";
import { useSupabaseAuth } from "@/hooks/supabase/useSupabaseAuth";

/* ... */
const { onSignWithMagicLink } = useSupabaseAuth({
  onMagicLinkSignInSuccess: (data) => {
    toast.success(`Check your inbox for the magic link`);
  },
  onMagicLinkSignInError: (error) => {
    toast.error(error?.message || "An error occurred");
  },
});

const onEmailSignIn = async () => {
  setSigningInWithEmail(true);
  await onSignWithMagicLink(email, signInCallbackUrl);
  setSigningInWithEmail(false);
};

Dashboard

Replace useSession with useSupabaseSession in the dashboard route src/app/dashboard/page.tsx

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

/* ... */
const { session, status } = useSupabaseSession();

Hook useSupabaseAuth

The new react hook useSupabaseAuth is needed to start the Magic Link Authentication flow. It returns an object with:

onSignWithMagicLink: (email: string) => Promise<void>
onSignOut: () => Promise<void>

The hook also supports two optional arguments, to set the callback to manage the success and error events.

onMagicLinkSignInSuccess?: (data: any) => void;
onMagicLinkSignInError?: (error: any) => void;

The redirect link, after authentication, is defined in the config file in the variables signInCallbackUrl which is used in the supabase auth callback route src/app/supabase/auth/callback/route.ts.

Hook useSupabaseSession

The second hook included with Shipped is useSupabaseSession which is useful to get the current session on the client side and to know if the user is currently logged in or not. Its interface is compatible with the useSession hook of next-auth.

const { 
    status,  // "loading" | "authenticated" | "unauthenticated"
    session // Session | null 
} = useSupabaseSession()

Usage

Check the session

To know if the user is currently signed in (has an active session) use the hook useSupabaseSession this way:

const { session, status } = useSupabaseSession();

status can have three possible values:

• loading

• authenticated

• unauthenticated

If the user is authenticated the session object contains a user property with the email (session.user.email).

User Management

By default, a new user is created if not already present. Once the user is created, you can manage it from the Supabase Authentication dashboard.

Suapabase Auth