> For the complete documentation index, see [llms.txt](https://docs.shipped.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shipped.club/features/authentication/supabase-auth/supabase-magic-link.md).

# Supabase Magic Link

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.

{% hint style="info" %}
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`
{% endhint %}

### SignUp / Login

Use this code in `SignUp.tsx` and `Login.tsx`

```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`

```typescript
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:

```typescript
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.

```typescript
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`.

```typescript
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:

```typescript
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.

<figure><img src="/files/g1OsyX2qOGmq5Dv6t5mD" alt=""><figcaption><p>Suapabase Auth</p></figcaption></figure>