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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shipped.club/features/authentication/supabase-auth/supabase-magic-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.