OAuth Setup Guide

This guide explains how to set up GitHub and Google OAuth for social login in your Raypx application.

GitHub OAuth Setup

1. Create a GitHub OAuth App

Go to GitHub Developer Settings
Click "New OAuth App" or "Register a new application"
Fill in the application details:
- Application name: Raypx (or your app name)
- Homepage URL: http://localhost:3000 (for development)
- Authorization callback URL: http://localhost:3000/api/auth/callback/github
Click "Register application"
You'll receive a Client ID
Click "Generate a new client secret" to get your Client Secret

2. Add GitHub Credentials to `.env`

.env

AUTH_GITHUB_ID="your_github_client_id"
AUTH_GITHUB_SECRET="your_github_client_secret"

3. Production Setup

For production, create another OAuth App with production URLs:

Homepage URL: https://yourdomain.com
Authorization callback URL: https://yourdomain.com/api/auth/callback/github

Google OAuth Setup

1. Create a Google OAuth Client

Go to Google Cloud Console
Create a new project or select an existing one
Enable the Google+ API:
- Go to APIs & Services > Library
- Search for "Google+ API" and enable it
Go to APIs & Services > Credentials
Click "Create Credentials" > "OAuth client ID"
Configure the OAuth consent screen (if not already done):
- Choose External for user type
- Fill in the required fields (app name, user support email, etc.)
Create OAuth client ID:
- Application type: Web application
- Name: Raypx (or your app name)
- Authorized JavaScript origins: http://localhost:3000
- Authorized redirect URIs: http://localhost:3000/api/auth/callback/google
Click "Create"
You'll receive a Client ID and Client Secret

2. Add Google Credentials to `.env`

.env

AUTH_GOOGLE_ID="your_google_client_id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="your_google_client_secret"

3. Production Setup

For production, add your production URLs to the OAuth client:

Authorized JavaScript origins: https://yourdomain.com
Authorized redirect URIs: https://yourdomain.com/api/auth/callback/google

Complete Configuration

Your .env file should include all authentication settings:

.env

# Core Authentication
AUTH_SECRET="your-secret-key-min-32-chars"
VITE_AUTH_URL="http://localhost:3000"

# GitHub OAuth
AUTH_GITHUB_ID="your_github_client_id"
AUTH_GITHUB_SECRET="your_github_client_secret"

# Google OAuth
AUTH_GOOGLE_ID="your_google_client_id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="your_google_client_secret"

Note: Generate AUTH_SECRET using openssl rand -base64 32

Start the development server:
```
pnpm dev
```
Navigate to the sign-in page: http://localhost:3000/sign-in
Click on "Sign in with GitHub" or "Sign in with Google"
Complete the OAuth flow in the popup window
After successful authentication, you should be redirected back to the app with an active session

Troubleshooting

"Redirect URI mismatch" Error

GitHub: Ensure the callback URL in your GitHub OAuth app matches exactly:

http://localhost:3000/api/auth/callback/github

Google: Verify the redirect URI is added to authorized redirect URIs:

http://localhost:3000/api/auth/callback/google

"OAuth App Not Found"

Verify that your AUTH_GITHUB_ID and AUTH_GOOGLE_ID are correct
Make sure there are no extra spaces in your .env file
Ensure environment variables are properly formatted (no spaces around =)

Ensure reactStartCookies() plugin is enabled in the auth configuration
Check that conflicting session plugins (lastLoginMethod(), oneTap()) are disabled
Refer to the Better Auth documentation for TanStack Start integration

Security Best Practices

Security Best Practices

Never commit your .env file to version control

Add .env to your .gitignore file

Use different OAuth apps for development and production environments

Rotate your secrets regularly

Keep your AUTH_SECRET secure and random (minimum 32 characters)

Use HTTPS in production for all OAuth callbacks

OAuth Setup Guide

On this page