# Authentication

**Shipped** supports [NextAuth](https://next-auth.js.org/) and Supabase to handle user authentication.

With NexAuth you can create two types of authentications, Magic Links and Social Authentication which includes using Google, Twitter, Facebook, LinkedIn, Slack, and 60+ more services to sign up your users.

With Supabase Auth you get Magic Link Auth, Email and Password Auth, and Social Authentication.

If you intend to use Supabase, follow [this guide](https://docs.shipped.club/features/supabase), for NextAuth continue reading.

## NextAuth

The authentication logic resides in `src/config/auth.ts`.\
In that file, you define the authentication providers to use.

### Sign-up and login pages

**Shipped** provides Sign-Up (/signup) and Login (/login) pages out of the box.\
Feel free to customize them according to your needs.

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FSedZBH6rPZFd38fKbJbR%2Fsign-up.png?alt=media&#x26;token=639940d2-b8a7-4cfb-9419-e77378c98643" alt=""><figcaption><p>Sign-Up page /signup</p></figcaption></figure>

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FfR08bfWIflY4Jtjg6hbi%2Flogin.png?alt=media&#x26;token=f20e8a25-d359-4a19-9b36-35354796517d" alt=""><figcaption><p>Login Page /login</p></figcaption></figure>

## NextAuth Setup

Add this to your `.env` file:

```
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="4348yhu34h3ui4ofjndfsdfeirh4b637u5sfd3"
```

{% hint style="info" %}
The NEXTAUTH\_SECRET is a random string of at least 10 characters, used to encrypt.

You can generate a secret using the [Shipped Generator](https://shipped.club/free-tools/secret-password-generator).
{% endhint %}

## NextAuth Authentication methods

{% hint style="info" %}
Authentication needs a database to store the user's authentication information. [Configure a database](https://docs.shipped.club/features/database) if you haven't already.
{% endhint %}

### NextAuth Magic Links

Magic Link Auth is a mechanism that sends an email to the user whenever they want to sign up or log into your product. You define for how long the link will be valid (24 hours or more).

To use this authentication method, you need an email SMTP server.

I use [MailPace](https://mailpace.com/) to send transactional emails, and they provide an SMTP server as well.

But you can use [MailChimp](https://docs.shipped.club/features/authentication/mailchimp), [Loops](https://docs.shipped.club/features/authentication/loops), [AWS SES](https://docs.shipped.club/features/authentication/aws-ses), [SendGrid](https://docs.shipped.club/features/authentication/sendgrid), or any other email provider.

Add this provider to the NextAuth configuration (`src/config/auth.ts`).

```typescript
EmailProvider({
    server: process.env.MAILPACE_EMAIL_SERVER || "",
    from: process.env.EMAIL_FROM || "",
    // maxAge: 24 * 60 * 60, // How long email links are valid for (default 24h)
}),
```

Remember to configure the environment variables `MAILPACE_EMAIL_SERVER` and `EMAIL_FROM` into the `.env` and Environment settings of your hosting service.

{% hint style="info" %}
The value of `MAILPACE_EMAIL_SERVER`has this format

`smtp://username:password@smtp.mailpace.com:2525`

and you can retrieve your values for username and password from MailPace in the tab **API Tokens** > **SMTP Server Details**
{% endhint %}

### NextAuth Google Auth

Google Sign-Up is one of the most popular authentication methods.

To enable it you need to:

1. Create a new project on [Google Cloud](https://console.cloud.google.com/)
2. Go to **APIS & Services** then **Credentials**
3. Click on **Configure Consent Screen**
4. Fill in all the info.
5. Add `userinfo.email` and `userinfo.profile` to scope
6. Submit
7. Go to **Credentials** and click "Create Credentials", then "OAuth Client ID"
8. Select "**Web Application**"
9. Add <http://localhost:3000> and <https://yoursitename.com> into the Authorized JavaScript Origins.
10. Add <http://localhost:3000/api/auth/callback/google> and <https://yoursitename.com/api/auth/callback/google> to Authorized redirect URLs.
11. Click Submit
12. Copy and paste the Client ID and Client Secret into the `.env` file:

```yaml
# for Google Sign up
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
```

13. Go to "OAuth Consent Screen" and click "Publish App".

Google might request you to verify your domain in [Google Search Console](https://search.google.com/search-console). It requires you to configure a CNAME or TXT DNS record.

14. Open `src/config/auth.ts` and add this provider

```typescript
GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID || "",
    clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
}),
```

### More authentication providers

NextAuth supports 60+ authentication providers.

Some examples:

* Atlassian
* Twitter / X
* Facebook
* Instagram
* Apple
* Amazon Cognito
* Discord
* GitHub
* GitLab
* Medium
* Salesforce
* Spotify
* Twitch
* Zoom

Check the [documentation](https://next-auth.js.org/providers/) to learn how to integrate other third-party sign-in methods.