Getting Started

OAuth Authentication Setup

Enable Google and GitHub OAuth for seamless user registration and login. This guide covers complete OAuth integration for both providers.

Overview

ContentSellify supports OAuth 2.0 authentication with Google and GitHub, allowing users to:

  • ✓Register and log in without creating passwords
  • ✓Link multiple authentication providers to one account
  • ✓Improve security with industry-standard OAuth flows
  • ✓Reduce friction in the registration process

🔄 How OAuth Works

👤

1. User Clicks Login

User chooses Google or GitHub

🔀

2. Redirect to Provider

User authenticates with provider

🎫

3. Authorization Code

Provider returns auth code

✅

4. Create Session

User logged in successfully

1. Google OAuth Setup

1.1 Create Google Cloud Project

  1. 1
  2. 2

    Click Select a project → New Project

  3. 3

    Enter project name (e.g., "ContentSellify") and click Create

1.2 Configure OAuth Consent Screen

  1. 1

    Navigate to APIs & Services → OAuth consent screen

  2. 2

    Select External user type and click Create

  3. 3

    Fill in required fields:

    • • App name: ContentSellify
    • • User support email: Your email
    • • Developer contact: Your email
  4. 4

    Click Save and Continue through remaining screens

1.3 Create OAuth Credentials

  1. 1

    Go to APIs & Services → Credentials

  2. 2

    Click Create Credentials → OAuth client ID

  3. 3

    Select Web application as application type

  4. 4

    Add Authorized redirect URIs:

    http://localhost:3000/api/auth/google/callback
    https://yourdomain.com/api/auth/google/callback
  5. 5

    Click Create and copy your Client ID and Client Secret

1.4 Add to Environment Variables

Add these to your server/.env file:

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_CALLBACK_URL=http://localhost:3000/api/auth/google/callback

2. GitHub OAuth Setup

2.1 Register OAuth App on GitHub

  1. 1
  2. 2

    Click OAuth Apps → New OAuth App

  3. 3

    Fill in application details:

    • • Application name: ContentSellify
    • • Homepage URL: http://localhost:3000
    • • Authorization callback URL: http://localhost:3000/api/auth/github/callback
  4. 4

    Click Register application

2.2 Generate Client Secret

  1. 1

    On the OAuth App page, copy your Client ID

  2. 2

    Click Generate a new client secret

  3. 3

    Copy the generated secret immediately (you won't be able to see it again)

⚠️Important: Save your client secret securely. GitHub won't show it again.

2.3 Add to Environment Variables

Add these to your server/.env file:

GITHUB_CLIENT_ID=your_github_client_id_here
GITHUB_CLIENT_SECRET=your_github_client_secret_here
GITHUB_CALLBACK_URL=http://localhost:3000/api/auth/github/callback

3. Complete Environment Variables

Your final server/.env should include:

# OAuth - Google
GOOGLE_CLIENT_ID=1234567890-abcdefghijklmnop.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-abc123def456
GOOGLE_CALLBACK_URL=http://localhost:3000/api/auth/google/callback

# OAuth - GitHub
GITHUB_CLIENT_ID=Iv1.abcd1234efgh5678
GITHUB_CLIENT_SECRET=abcdef1234567890abcdef1234567890abcdef12
GITHUB_CALLBACK_URL=http://localhost:3000/api/auth/github/callback

# JWT Secret (generate a strong random string)
JWT_SECRET=your_super_secret_jwt_key_here

# Session Secret (generate a strong random string)
SESSION_SECRET=your_super_secret_session_key_here

🧪 Testing OAuth Integration

  1. 1.

    Start your application:

    npm run dev
  2. 2.Navigate to the login page: http://localhost:3000/login
  3. 3.Click "Continue with Google" or "Continue with GitHub"
  4. 4.Authorize the application when prompted
  5. 5.Verify you're redirected back and logged in successfully

🚀 Production Deployment

Before deploying to production:

1. Update OAuth Apps with Production URLs

Add your production domain to authorized redirect URIs:

https://yourdomain.com/api/auth/google/callback
https://yourdomain.com/api/auth/github/callback

2. Update Environment Variables

Update callback URLs in production .env:

GOOGLE_CALLBACK_URL=https://yourdomain.com/api/auth/google/callback
GITHUB_CALLBACK_URL=https://yourdomain.com/api/auth/github/callback

3. Verify OAuth Apps

  • Google: Complete app verification (mandatory for scaling beyond 100 users)
  • Add privacy policy and terms of service URLs
  • Test OAuth flow on production domain before launch

🔧 Troubleshooting

Invalid Redirect URI Error

Problem: "redirect_uri_mismatch" error during OAuth flow

Solution:

  • Verify redirect URI in OAuth app matches exactly (including protocol and port)
  • Check for trailing slashes (http://localhost:3000/ vs http://localhost:3000)
  • Ensure environment variable matches OAuth app callback URL
  • Clear browser cache and try again
OAuth App Not Approved (Google)

Problem: "This app isn't verified" warning on Google login

Solution:

  • During development, click "Advanced" → "Go to [App] (unsafe)"
  • Add test users in Google Cloud Console (OAuth consent screen → Test users)
  • For production, submit app for verification via Google Cloud Console
  • Verification typically takes 2-4 weeks
User Already Exists Error

Problem: User tries OAuth but email is already registered

Solution:

  • Implement account linking to merge OAuth with existing account
  • Show message: "Email already registered. Please log in with password"
  • Allow users to link OAuth providers in account settings
Session Not Persisting

Problem: User logged out immediately after OAuth login

Solution:

  • Verify JWT_SECRET and SESSION_SECRET are set in environment
  • Check cookie settings (httpOnly, secure, sameSite)
  • Ensure cookies are enabled in browser
  • Check if session store (Redis/MongoDB) is configured correctly

🛡️ Security Best Practices

  • 🔒Never commit secrets: Keep OAuth client secrets out of version control
  • 🔒Validate state parameter: Prevent CSRF attacks by verifying state tokens
  • 🔒Use HTTPS in production: Always use secure connections for OAuth flows
  • 🔒Rotate secrets regularly: Update OAuth secrets periodically for security
  • 🔒Minimal scopes: Only request necessary user permissions

Next Steps

🚀

Complete Quick Start

Finish setting up your development environment

Learn more →
🔐

Authentication API

Learn about JWT tokens and session management

Learn more →
👥

User Management

Admin guide for managing user accounts

Learn more →
🛡️

Security Guide

Best practices for securing your application

Learn more →

Need Help with OAuth?

Having trouble setting up OAuth authentication? Our support team can help.

Contact SupportView Troubleshooting Guide