LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironmentsDeployment
Configuration

Integrations

CloudflareDatabaseStorageAuthenticationEmail
Payment
AINewsletterNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase

Showcases

MkImage
X (Twitter)

Authentication

Learn how to set up and use authentication with Better Auth in TanStarter

TanStarter uses Better Auth for authentication, a TypeScript-native authentication library.

Setup

Environment Variables

Generate a random secret and add it to your environment variables file:

openssl rand -base64 32
.env
BETTER_AUTH_SECRET=your_generated_secret

Website Configuration

In most cases, the default configuration works fine. If you need to change it, modify the auth config in src/config/website.ts:

export const websiteConfig: WebsiteConfig = {
  // ...
  auth: {
    enable: true,
    enableGoogleLogin: true,     // Enable Google login
    enableCredentialLogin: true, // Enable email/password login
    enableDeleteAccount: true,   // Allow users to delete their account
  },
  // ...
};
OptionTypeDefaultDescription
enablebooleantrueEnable/disable authentication
enableGoogleLoginbooleantrueEnable Google OAuth login
enableCredentialLoginbooleanfalseEnable email/password login
enableDeleteAccountbooleantrueAllow users to delete their account

Google OAuth (Optional)

If Google login is enabled, you need to configure Google OAuth:

  1. Go to Google Cloud Console
  2. Create a new project
  3. Go to APIs & Services > Credentials
  4. Click Create Credentials > OAuth client ID
  5. Configure the consent screen if prompted
  6. Select Web application as the application type
  7. Add http://localhost:3000 and https://your-domain.com to Authorized JavaScript origins
  8. Add http://localhost:3000/api/auth/callback/google and https://your-domain.com/api/auth/callback/google to Authorized redirect URIs
  9. Copy the Client ID and Client Secret to your environment variables file:
.env
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

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

Authentication Architecture

The authentication system in TanStarter consists of the following components:

auth.ts
client.ts
types.ts

Auth Routes

TanStarter provides the following authentication routes:

RouteDescription
/auth/loginLogin page
/auth/registerRegistration page
/auth/forgot-passwordPassword reset request
/auth/reset-passwordPassword reset form
/auth/errorError page

References

  • Better Auth Documentation
  • TanStack Start Auth Guide
  • Google OAuth Setup

Next Steps

Now that you understand how authentication works in TanStarter, you might want to explore these related features:

Email

Configure email services

Payment

Configure Stripe payments

Database

Configure database

Deployment

Deploy to Cloudflare Workers

Table of Contents

Setup
Environment Variables
Website Configuration
Google OAuth (Optional)
Authentication Architecture
Auth Routes
References
Next Steps