> MASTER_BLUEPRINT // PRODUCTION_AUTH_GATEWAY

HOW TO HOST YOUR OWN WEB APP WITH USER LOGIN

Live-First Approach: Complete Step-by-Step Blueprint to Deployment, Domain Setup, Supabase & Google OAuth.

VERCEL SUPABASE GOOGLE OAUTH OWN DOMAIN

The Live-First Master Workflow

Most web applications fail before launch because developers build complex authentication logic on localhost before getting an online URL. The Live-First Approach flips this: you deploy your baseline site immediately, map your custom domain, and then wire up Google OAuth & Supabase RLS directly against your production domain.

STEP 01

Claude & GitHub Setup

Initialize Claude Code AI builder in your terminal and link your GitHub repository.

STEP 02

1-Pager Baseline

Use Claude to generate your app's 1-pager baseline and host it live on Vercel!

STEP 03

Domain & DNS Setup

Finish server-side chores (connect your custom domain and configure DNS records).

STEP 04

Supabase + Google Login

Integrate Supabase RLS and Google OAuth 2.0 login gateway directly on your live domain.

PHASE 1

Claude & GitHub Repository Setup

1. Open your terminal or development environment.
2. Install and initialize Claude Code as your autonomous AI pair programmer.
3. Create a new private repository on GitHub (e.g., my-awesome-app) and connect your local repository.
4. Copy and give the following initialization prompt to Claude:

// PHASE 1 PROMPT: CLAUDE & GITHUB SETUP

// Copy & Paste Prompt for Claude Code:
Please set up a new project workspace. Initialize Git tracking, check Node.js v18+ environment, configure package.json, and link the local git branch 'main' to my GitHub remote repository.

PHASE 2

Create 1-Pager Baseline Website

Before adding database or login authentication logic, ask Claude (or your AI builder) to create a clean 1-pager baseline website with your App Name, tagline, and a brief description of what your app does.

Ensure the baseline includes a hero section, responsive layout structure, and essential static assets so it is immediately ready for online deployment on Vercel.

PHASE 3

Supabase Project Creation & RLS Configuration

1. Navigate to Supabase.com and sign up or log in.
2. Create a new Supabase project under your organization.
3. Set a strong Postgres database password and store it safely in your password vault.
4. Enable Row Level Security (RLS) on your public tables to prevent unauthorized data reads/writes.
5. Run your initial migration SQL script in the Supabase SQL Editor.
6. Note down your API credentials from settings:

// SUPABASE API CREDENTIALS

// API Keys Settings URL:
https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/api-keys

// Extract Credentials:
Project URL          = https://<YOUR_PROJECT_ID>.supabase.co
Publishable Anon Key = sb_publishable_<YOUR_ANON_KEY_HERE>

PHASE 4

GitHub Repository & Vercel Deployment

1. Open Git Desktop (or terminal) and push your local commits to GitHub.
2. Log in to Vercel, import your GitHub repository, and configure environment variables:

// VERCEL ENV CONFIGURATION

// Vercel Environment Variables Configuration:
NEXT_PUBLIC_SUPABASE_URL      = https://<YOUR_PROJECT_ID>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = sb_publishable_<YOUR_ANON_KEY_HERE>

3. Click Deploy to push your 1-pager baseline live on Vercel!

PHASE 5

Custom Domain Connection & DNS Records Setup

Connecting your custom domain early is critical so that Google OAuth callback URLs match your final live domain.

Step-by-Step Registrar Setup:
1. Open your Vercel Project → Settings → Domains.
2. Enter your root domain (e.g., yourdomainname.com) and click Add.
3. Log in to your Domain Registrar (Cloudflare, Namecheap, GoDaddy, Porkbun, Google Domains/Squarespace).
4. Navigate to your domain's DNS Management / DNS Zone Editor and create the following two records:

// DNS MANAGEMENT RECORDS

// RECORD 1: APEX / ROOT DOMAIN (yourdomainname.com)
Type:         A
Name / Host:  @ (or leave blank if root)
Value / IP:   76.76.21.21 (Vercel Anycast IP)
TTL:          Auto (or 3600)

// RECORD 2: WWW SUBDOMAIN (www.yourdomainname.com)
Type:         CNAME
Name / Host:  www
Value / Target: cname.vercel-dns.com
TTL:          Auto (or 3600)

Verification Checklist:
• Return to Vercel Domains tab → click Refresh / Check DNS.
• Once Vercel displays Valid Configuration (green checkmark), Vercel will automatically provision a free SSL/TLS Certificate.
• Test accessing https://yourdomainname.com and https://www.yourdomainname.com in your browser. Your baseline site is now live on your own domain!

PHASE 6

Google Cloud Console OAuth 2.0 Credentials

1. Navigate to Google Cloud Console.
2. Create a new Google Cloud Project.
3. Configure the OAuth Consent Screen → Select External User Type → Fill in your App Name and Support Email.
4. Go to Credentials → Click Create Credentials → Select OAuth Client ID.
5. Application Type: Web Application.
6. Under Authorized Redirect URIs, enter your Supabase Auth Callback URL:

// OAUTH REDIRECT URI

// Supabase Authorized OAuth Redirect URI:
https://<YOUR_PROJECT_ID>.supabase.co/auth/v1/callback

7. Click Create and download/copy your Client ID and Client Secret.

PHASE 7

Supabase Provider Setup & Domain Authorizations

1. Open your Supabase Dashboard → Auth → Providers → Select Google.
2. Toggle Enable Google Provider ON.
3. Paste your Google Client ID and Google Client Secret.
4. Go to Supabase Auth → URL Configuration:
• Set Site URL to: https://yourdomainname.com
• Add to Redirect URLs: https://yourdomainname.com/** and https://www.yourdomainname.com/**
5. Return to Google Cloud Console Credentials → Edit your OAuth Client → Add your custom domain to Authorized JavaScript Origins:

// AUTHORIZED JAVASCRIPT ORIGINS

// Google Cloud Console Authorized JavaScript Origins:
https://yourdomainname.com
https://www.yourdomainname.com

< RETURN TO MAIN PORTAL >