Authentication

Shipped supports NextAuth 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, 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.

Sign-Up page /signup

Login Page /login

NextAuth Setup

Add this to your .env file:

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

The NEXTAUTH_SECRET is a random string of at least 10 characters, used to encrypt.

You can generate a secret using the Shipped Generator.

NextAuth Authentication methods

Authentication needs a database to store the user's authentication information. Configure a database if you haven't already.

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 to send transactional emails, and they provide an SMTP server as well.

But you can use MailChimp, Loops, AWS SES, SendGrid, or any other email provider.

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

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.

The value of MAILPACE_EMAIL_SERVERhas this format

smtp://username:[e-mail]:2525

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

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

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

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

Google might request you to verify your domain in Google Search Console. It requires you to configure a CNAME or TXT DNS record.

1. Open src/config/auth.ts and add this provider

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 to learn how to integrate other third-party sign-in methods.