Newsletter

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'resend',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

Beehiiv

Create Beehiiv Account

Create a Beehiiv account at beehiiv.com.

Get API Key and Publication ID

Go to Settings > API to generate an API key.
Get your Publication ID from the URL or settings page.

Configure Environment Variables

Add the following to your .env file:

.env

BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id

Update Website Configuration

Update the website configuration to use Beehiiv for newsletter management:

src/config/website.ts

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'beehiiv',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Customization

Creating a Custom Provider

If you need to use a different newsletter service, you can create a custom provider:

Create a new file in the src/newsletter/provider directory
Implement the NewsletterProvider interface

src/newsletter/provider/custom-provider.ts

import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // Initialize your newsletter service provider
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // Subscribe user implementation
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // Unsubscribe user implementation
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // Check subscription status implementation
    return true;
  }
}

src/newsletter/index.ts

import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  beehiiv: () => new BeehiivNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};

Next Steps

Now that you understand how to use newsletter subscriptions in TanStarter, you might want to explore these related features:

Email

Configure email services

Authentication

Configure user authentication

Analytics

Configure analytics services

Storage

Configure storage services

TanStarter supports Resend and Beehiiv to manage newsletter subscriptions.

Setup

TanStarter supports Resend and Beehiiv as built-in providers.

Resend

Create Resend Account

Create a Resend account at resend.com, bind and verify your domain.

Get API Key

Go to Resend Dashboard > API Keys, and create an API key

Configure Environment Variables

Add the following to your .env file:

.env

RESEND_API_KEY=re_xxxxxxxxxxxx

Note: The RESEND_API_KEY is shared between the Email and Newsletter modules when using Resend.

Update Website Configuration

Update the website configuration to use Resend for newsletter management:

src/config/website.ts

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'resend',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

Beehiiv

Create Beehiiv Account

Create a Beehiiv account at beehiiv.com.

Get API Key and Publication ID

Go to Settings > API to generate an API key.
Get your Publication ID from the URL or settings page.

Configure Environment Variables

Add the following to your .env file:

.env

BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id

Update Website Configuration

Update the website configuration to use Beehiiv for newsletter management:

src/config/website.ts

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'beehiiv',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Create a new file in the src/newsletter/provider directory
Implement the NewsletterProvider interface

src/newsletter/provider/custom-provider.ts

import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // Initialize your newsletter service provider
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // Subscribe user implementation
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // Unsubscribe user implementation
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // Check subscription status implementation
    return true;
  }
}

src/newsletter/index.ts

import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  beehiiv: () => new BeehiivNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};

Environment Configuration

Email

Authentication

Analytics

Storage

Table of Contents

Newsletter

Environment Configuration

Email

Authentication

Analytics

Storage

Table of Contents