Configuration Guide

After completing the Getting Started guide, configure your ClawPlate boilerplate for production use.

Environment Variables

Required Variables

bash

# Supabase Configuration
SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Application Configuration
NUXT_PUBLIC_APP_URL=http://localhost:3000
NUXT_PUBLIC_APP_NAME=ClawPlate

Authentication Variables

bash

# OAuth Providers (configure in Supabase Dashboard)
# GitHub OAuth App
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Google OAuth App
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Apple OAuth App
APPLE_CLIENT_ID=your_apple_client_id
APPLE_CLIENT_SECRET=your_apple_client_secret

# X (Twitter) OAuth App
X_CLIENT_ID=your_x_client_id
X_CLIENT_SECRET=your_x_client_secret

Payment Configuration

bash

# Stripe Configuration
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

# Stripe Product Configuration
STRIPE_PRODUCT_ID=prod_your_product_id
STRIPE_PRICE_ID=price_your_price_id

Email Configuration

bash

# Resend Configuration
RESEND_API_KEY=re_your_resend_api_key
RESEND_FROM_EMAIL=noreply@yourdomain.com
RESEND_FROM_NAME=Your App Name

GitHub Integration

bash

# GitHub Repository Access
GITHUB_TOKEN=ghp_your_github_token
GITHUB_REPO_NAME=your-private-repo
GITHUB_REPO_OWNER=your-github-username

Supabase Setup

1. Create Supabase Project

Go to Supabase Dashboard
Click "New Project"
Choose your organization
Enter project details:
- Name: Your app name
- Database Password: Generate a strong password
- Region: Choose closest to your users

2. Configure Authentication

Navigate to Authentication > Providers and enable:

GitHub Provider

Enable GitHub provider
Add your GitHub OAuth App credentials
Set redirect URL: https://yourdomain.com/auth/callback

Google Provider

Enable Google provider
Add your Google OAuth App credentials
Set redirect URL: https://yourdomain.com/auth/callback

Apple Provider

Enable Apple provider
Add your Apple OAuth App credentials
Set redirect URL: https://yourdomain.com/auth/callback

X (Twitter) Provider

Enable X provider
Add your X OAuth App credentials
Set redirect URL: https://yourdomain.com/auth/callback

3. Database Schema

Run the provided SQL scripts to set up your database:

sql

-- Enable RLS (Row Level Security)
ALTER TABLE auth.users ENABLE ROW LEVEL SECURITY;

-- Create profiles table
CREATE TABLE public.profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  email TEXT,
  full_name TEXT,
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS on profiles
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;

-- Create policy for profiles
CREATE POLICY "Users can view own profile" ON public.profiles
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Users can update own profile" ON public.profiles
  FOR UPDATE USING (auth.uid() = id);

CREATE POLICY "Users can insert own profile" ON public.profiles
  FOR INSERT WITH CHECK (auth.uid() = id);

Stripe Configuration

1. Create Stripe Account

Sign up at Stripe Dashboard
Complete account verification
Get your API keys from Developers > API Keys

2. Create Product and Price

bash

# Create a product
stripe products create --name="ClawPlate Boilerplate" --description="Complete SaaS boilerplate"

# Create a price
stripe prices create --product=prod_your_product_id --unit-amount=9900 --currency=eur --recurring-interval=month

3. Configure Webhooks

Go to Developers > Webhooks
Add endpoint: https://yourdomain.com/api/webhooks/stripe
Select events:
- checkout.session.completed
- invoice.payment_succeeded
- invoice.payment_failed
- customer.subscription.created
- customer.subscription.updated
- customer.subscription.deleted

GitHub Integration

1. Create GitHub OAuth App

Go to GitHub Settings > Developer settings > OAuth Apps
Click "New OAuth App"
Fill in details:
- Application name: Your app name
- Homepage URL: https://yourdomain.com
- Authorization callback URL: https://yourdomain.com/auth/callback

2. Create Personal Access Token

Go to GitHub Settings > Developer settings > Personal access tokens
Click "Generate new token (classic)"
Select scopes:
- repo (Full control of private repositories)
- admin:org (if using organization repos)
Copy the token and add to your .env

3. Create Private Repository

Create a new private repository
Add the repository name to your environment variables
The boilerplate will automatically invite users after purchase

Resend Email Setup

1. Create Resend Account

Sign up at Resend
Verify your domain
Get your API key from API Keys

2. Configure Domain

Add your domain in Resend dashboard
Configure DNS records as instructed
Verify domain ownership

3. Test Email Sending

typescript

// Test email configuration
const testEmail = async () => {
  const resend = new Resend(process.env.RESEND_API_KEY)
  
  const { data, error } = await resend.emails.send({
    from: 'noreply@yourdomain.com',
    to: ['test@example.com'],
    subject: 'Test Email',
    html: '<p>Email configuration successful!</p>'
  })
  
  if (error) {
    console.error('Email test failed:', error)
  } else {
    console.log('Email test successful:', data)
  }
}

Application Configuration

1. Update App Metadata

Edit nuxt.config.ts:

typescript

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Your App Name',
      meta: [
        { name: 'description', content: 'Your app description' },
        { name: 'keywords', content: 'saas, boilerplate, nuxt, vue' }
      ]
    }
  },
  
  runtimeConfig: {
    public: {
      appName: 'Your App Name',
      appUrl: process.env.NUXT_PUBLIC_APP_URL
    }
  }
})

2. Configure Internationalization

Update i18n/locales/en.json:

json

{
  "app": {
    "name": "Your App Name",
    "description": "Your app description"
  },
  "navigation": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  }
}

3. Customize Branding

Update your logo and colors:

css

/* assets/css/main.css */
:root {
  --primary-color: #your-primary-color;
  --secondary-color: #your-secondary-color;
  --accent-color: #your-accent-color;
}

Security Configuration

1. Environment Security

bash

# Never commit these to version control
.env.local
.env.production
*.key
*.pem

2. Supabase Security

Enable Row Level Security (RLS) on all tables
Create appropriate policies for data access
Use service role key only on server-side

3. Stripe Security

Use webhook signatures to verify requests
Store webhook secrets securely
Use test keys in development

Production Checklist

Before deploying to production:

[ ] All environment variables configured
[ ] Supabase project created and configured
[ ] OAuth providers enabled and tested
[ ] Stripe webhooks configured
[ ] GitHub integration tested
[ ] Email sending tested
[ ] Domain verified and SSL enabled
[ ] Database migrations run
[ ] Error monitoring configured
[ ] Analytics tracking setup

Troubleshooting

Common Issues

Supabase connection failed

Check SUPABASE_URL and SUPABASE_ANON_KEY
Verify project is active
Check network connectivity

OAuth not working

Verify OAuth app configuration
Check redirect URLs match exactly
Ensure OAuth app is approved

Stripe webhooks failing

Check webhook endpoint URL
Verify webhook secret
Check Stripe dashboard for errors

Email not sending

Verify Resend API key
Check domain verification
Review email templates

Debug Mode

Enable debug mode for troubleshooting:

bash

# Add to .env
DEBUG=true
NODE_ENV=development

Next Steps

After completing configuration, you can now leverage these powerful features:

🔐 Setup User Authentication

Your ClawPlate boilerplate comes with complete OAuth authentication ready to use:

Multi-provider support: GitHub, Google, Apple, X (Twitter)
Supabase integration: Secure session management and user storage
OAuthButtons component: Beautiful, provider-specific authentication buttons
Automatic user profiles: User data automatically synced to your database

vue

<!-- Simply add OAuth buttons to your login page -->
<OAuthButtons provider="github" @click="signInWithGitHub" />
<OAuthButtons provider="google" @click="signInWithGoogle" />

💳 Configure Stripe Payments

Complete payment infrastructure is already integrated:

Stripe Checkout: Professional payment forms with built-in security
Webhook automation: Automatic invoice generation and user management
PDF invoices: Professional invoices generated and sent automatically
Subscription management: Handle recurring payments and plan changes

typescript

// Create checkout session with one line
const { data } = await supabase.functions.invoke('create-checkout-session', {
  body: { priceId: 'price_1234567890' }
})

📧 Send Transactional Emails

Professional email automation powered by Resend:

Welcome emails: Automatic onboarding sequences
Payment confirmations: Invoice emails with PDF attachments
GitHub invitations: Automated repo access notifications
HTML templates: Beautiful, responsive email designs

typescript

// Send professional emails with templates
await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: [user.email],
  subject: 'Welcome to Your App!',
  html: createWelcomeEmailTemplate(user)
})

🎨 Customize Components

Modern UI component library built with Tailwind CSS:

Button variants: Primary, secondary, outline, ghost, glassmorphism
Toast notifications: Success, error, warning, info with animations
User dropdown: Profile management with smooth animations
Form components: OAuth buttons, input fields, modals
Dark mode: Automatic theme switching with system preference

vue

<!-- Use pre-built components with variants -->
<Button variant="primary" size="lg">Get Started</Button>
<Toast type="success" message="Payment successful!" />
<UserDropDown :user="currentUser" />

Configuration complete! Your ClawPlate boilerplate is now ready for production use.

Configuration Guide ​

Environment Variables ​

Required Variables ​

Authentication Variables ​

Payment Configuration ​

Email Configuration ​

GitHub Integration ​

Supabase Setup ​

1. Create Supabase Project ​

2. Configure Authentication ​

GitHub Provider ​

Google Provider ​

Apple Provider ​

X (Twitter) Provider ​

3. Database Schema ​

Stripe Configuration ​

1. Create Stripe Account ​

2. Create Product and Price ​

3. Configure Webhooks ​

GitHub Integration ​

1. Create GitHub OAuth App ​

2. Create Personal Access Token ​

3. Create Private Repository ​

Resend Email Setup ​

1. Create Resend Account ​

2. Configure Domain ​

3. Test Email Sending ​

Application Configuration ​

1. Update App Metadata ​

2. Configure Internationalization ​

3. Customize Branding ​

Security Configuration ​

1. Environment Security ​

2. Supabase Security ​

3. Stripe Security ​

Production Checklist ​

Troubleshooting ​

Common Issues ​

Debug Mode ​

Next Steps ​

🔐 Setup User Authentication ​

💳 Configure Stripe Payments ​

📧 Send Transactional Emails ​

🎨 Customize Components ​

Configuration Guide

Environment Variables

Required Variables

Authentication Variables

Payment Configuration

Email Configuration

GitHub Integration

Supabase Setup

1. Create Supabase Project

2. Configure Authentication

GitHub Provider

Google Provider

Apple Provider

X (Twitter) Provider

3. Database Schema

Stripe Configuration

1. Create Stripe Account

2. Create Product and Price

3. Configure Webhooks

GitHub Integration

1. Create GitHub OAuth App

2. Create Personal Access Token

3. Create Private Repository

Resend Email Setup

1. Create Resend Account

2. Configure Domain

3. Test Email Sending

Application Configuration

1. Update App Metadata

2. Configure Internationalization

3. Customize Branding

Security Configuration

1. Environment Security

2. Supabase Security

3. Stripe Security

Production Checklist

Troubleshooting

Common Issues

Debug Mode

Next Steps

🔐 Setup User Authentication

💳 Configure Stripe Payments

📧 Send Transactional Emails

🎨 Customize Components