LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
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

Website Configuration

Configure authentication options in src/config/website.ts:

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

Environment Variables

Generate a random secret and add it to your .env file:

openssl rand -base64 32
.env
BETTER_AUTH_SECRET=your_generated_secret

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 .env 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
Website Configuration
Environment Variables
Google OAuth (Optional)
Authentication Architecture
Auth Routes
References
Next Steps