OAuth Integration

How OAuth Works

typescriptFor GitHub and Twitter modules, the SDK uses popup-based OAuth:

1. User Initiates: User clicks verify

2. Popup Opens: Centered popup window opens

3. Authorization: User authorizes in OAuth provider

4. Token Exchange: Backend exchanges code for access token

5. Token Transfer: Popup sends token to SDK via postMessage

6. Verification: SDK uses token to call attestation API

7. Cleanup: Popup closes automatically

Security Features:

• CSRF protection via state parameter

• PKCE for Twitter OAuth 2.0

• HttpOnly cookies for token storage

• Origin validation (ready for production)

• 5-minute timeout protection

Step 1: Create OAuth App

1. Go to GitHub Settings → Developer Settings → OAuth Apps

2. Click "New OAuth App"

3. Fill in details:

   • Application name: Your App Name

   • Homepage URL: Your app URL

   • Authorization callback URL: `https://your function useUntracedModal(): UseUntracedModalReturn

Step 2: Configure Environment

Add to .env.local:

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Step 3: Test

const { open } = useUntracedModal();
open('zk-github', { minCommits: 10 });

Twitter Setup

Step 1: Create Twitter App

1. Go to Twitter Developer Portal

2. Create new App

3. Enable OAuth 2.0

4. Set callback URL: https://yourdomain.com/api/auth/twitter/callback

5. Enable PKCE

6. Set scopes: tweet.read, users.read, offline.access

Step 2: Configure Environment

Add to .env.local:

TWITTER_CLIENT_ID=your_twitter_client_id
TWITTER_CLIENT_SECRET=your_twitter_client_secret

Step 3: Test

const { open } = useUntracedModal();
open('zk-twitter', { verificationType: 'account' });