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

{% 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 %}

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

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

return <SignUp />;
```

with:

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

return <SignUpWithEmailPassword />;
```

2. Update the file `src/app/login/page.tsx`

Replace:

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

return <Login />;
```

with:

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

{% code title="client component" %}

```jsx
"use client"

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

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

{% endcode %}