Problem
Cloudflare Pages generates unique preview URLs (e.g., abc123.creatortoolhub.pages.dev) for each deployment, which breaks Google OAuth authentication because redirect URIs must be pre-registered.
Solution: Use Branch-Based Aliases
Cloudflare Pages creates stable branch aliases that don't change:
main.creatortoolhub.pages.dev → Always points to main branch
staging.creatortoolhub.pages.dev → Always points to staging branch
develop.creatortoolhub.pages.dev → Always points to develop branch
Implementation Steps
1. Create a staging branch
git checkout main
git checkout -b staging
git push -u origin staging
2. Register OAuth redirect URIs in Google Cloud Console
Add these to your OAuth 2.0 Client credentials:
Authorized JavaScript origins:
https://staging.creatortoolhub.pages.dev
https://main.creatortoolhub.pages.dev
Authorized redirect URIs:
https://staging.creatortoolhub.pages.dev/api/auth/callback
https://main.creatortoolhub.pages.dev/api/auth/callback
3. Configure Cloudflare Pages Environment Variables
In Cloudflare Dashboard → Pages → CreatorToolHub → Settings → Environment Variables:
For Preview environment:
| Variable |
Value |
NEXTAUTH_URL |
https://staging.creatortoolhub.pages.dev |
NEXT_PUBLIC_SITE_URL |
https://staging.creatortoolhub.pages.dev |
GOOGLE_CLIENT_ID |
(same as production) |
GOOGLE_CLIENT_SECRET |
(same as production) |
AUTUMN_SECRET_KEY |
(same as production or test key) |
4. Update Autumn webhook URLs (if applicable)
If using Autumn webhooks, add the staging domain to allowed webhook endpoints.
Testing Workflow
- Push changes to
staging branch
- Wait for Cloudflare Pages deployment
- Visit
https://staging.creatortoolhub.pages.dev
- Test full OAuth flow (sign in → callback → session)
- Test Autumn billing flow (checkout → webhook → credits)
Benefits
- ✅ Stable, predictable URLs for OAuth configuration
- ✅ No changes to application code required
- ✅ Works with any OAuth provider (Google, GitHub, etc.)
- ✅ Autumn billing can be tested in isolation
- ✅ Easy to add more branch aliases as needed
Labels
infrastructure
authentication
testing
Problem
Cloudflare Pages generates unique preview URLs (e.g.,
abc123.creatortoolhub.pages.dev) for each deployment, which breaks Google OAuth authentication because redirect URIs must be pre-registered.Solution: Use Branch-Based Aliases
Cloudflare Pages creates stable branch aliases that don't change:
main.creatortoolhub.pages.dev→ Always points to main branchstaging.creatortoolhub.pages.dev→ Always points to staging branchdevelop.creatortoolhub.pages.dev→ Always points to develop branchImplementation Steps
1. Create a
stagingbranch2. Register OAuth redirect URIs in Google Cloud Console
Add these to your OAuth 2.0 Client credentials:
Authorized JavaScript origins:
https://staging.creatortoolhub.pages.devhttps://main.creatortoolhub.pages.devAuthorized redirect URIs:
https://staging.creatortoolhub.pages.dev/api/auth/callbackhttps://main.creatortoolhub.pages.dev/api/auth/callback3. Configure Cloudflare Pages Environment Variables
In Cloudflare Dashboard → Pages → CreatorToolHub → Settings → Environment Variables:
For Preview environment:
NEXTAUTH_URLhttps://staging.creatortoolhub.pages.devNEXT_PUBLIC_SITE_URLhttps://staging.creatortoolhub.pages.devGOOGLE_CLIENT_IDGOOGLE_CLIENT_SECRETAUTUMN_SECRET_KEY4. Update Autumn webhook URLs (if applicable)
If using Autumn webhooks, add the staging domain to allowed webhook endpoints.
Testing Workflow
stagingbranchhttps://staging.creatortoolhub.pages.devBenefits
Labels
infrastructureauthenticationtesting