Skip to main content

Customize Login Page

A comprehensive guide to creating a professional authentication experience with ShipNowKit's flexible templates and OAuth providers.

📑 Selecting A Template

ShipNowKit provides two professionally designed authentication templates in the app/_templates directory:

  • NotionLike
  • ShipNowLike

To get started, copy your preferred template to your app directory:

# For NotionLike template
cp -r app/_templates/notion/signin app/

⚙️ Configuring Authentication Options

Configure Sign-in Methods

Edit app/signin/page.tsx to customize your authentication options. Here's an example using the NotionLike template:

app/signin/page.tsx
const defaultConfig: LoginFormConfig = {
title: "Think it. Make it.", // Your welcome message
subtitle: "Create your account", // Subtitle text
supportEmail: true, // Enable magic link authentication
authButtons: [
{
icon: "/social-icons/google.svg",
text: "Continue with Google",
provider: "google"
},
{
icon: "/social-icons/github.svg",
text: "Continue with Github",
provider: "github",
}
]
};

ShipNowKit supports the following OAuth providers:

ProviderDescriptionProvider Value
GoogleGoogle OAuth 2.0"google"
GitHubGitHub OAuth"github"
FacebookFacebook Login"facebook"
AppleSign in with Apple"apple"
TwitterTwitter OAuth 2.0"twitter"
LinkedInLinkedIn OAuth 2.0"linkedin"
DiscordDiscord OAuth 2.0"discord"
SlackSlack OAuth 2.0"slack"

Use these provider values in the provider field of your authButtons configuration.

💡 Tip: Find social media icons in the /public/social-icons directory

image.png

Setting Up OAuth Providers

Step 1: Basic Authentication Configuration

Configure Next Auth (v5) in your .env file:

AUTH_DEBUG=false
AUTH_SECRET="your-random-secret-string" # Generate a secure random string

Step 2: OAuth Provider Credentials

Add credentials for your chosen OAuth providers (see .env.example for specific environment variable names):

## GitHub
AUTH_GITHUB_ID=your_github_id
AUTH_GITHUB_SECRET=your_github_secret

## Google
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Add other provider credentials as needed

Step 3: Magic Link Configuration (Optional)

If you've enabled email authentication (supportEmail: true), configure email settings:

[email protected]
MAGIC_LINK_EMAIL_SUBJECT="Welcome to Your App"
RESEND_API_KEY=re_your_resend_api_key # Required for email delivery

🔒 Customizing Privacy Policies

Your authentication page includes links to privacy policy and terms of service. Customize these pages at:

  • Privacy Policy: app/policies/privacy-policy/page.tsx
  • Terms of Service: app/policies/terms-of-use/page.tsx