OAuth 2.0 Playground

Build OAuth authorization URLs and generate token exchange code for popular providers.

Provider

Google OAuth Documentation

Configuration

Client ID

Redirect URI

Response Type

State (CSRF protection)

Scopes

Additional scopes (space or comma separated)

Generated Authorization URL

https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&response_type=code&scope=&state=q2uja9obg8n

Open Authorization URL

Enter a Client ID to open the authorization URL.

Token Exchange Code

// Install: npm install axios
const axios = require('axios');

async function exchangeCodeForToken(authorizationCode) {
  try {
    const response = await axios.post('https://oauth2.googleapis.com/token', {
      grant_type: 'authorization_code',
      code: authorizationCode,
      redirect_uri: 'http://localhost:3000/callback',
      client_id: 'YOUR_CLIENT_ID',
      client_secret: 'YOUR_CLIENT_SECRET',
    }, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    });

    console.log('Access Token:', response.data.access_token);
    console.log('Token Type:', response.data.token_type);
    if (response.data.refresh_token) {
      console.log('Refresh Token:', response.data.refresh_token);
    }
    return response.data;
  } catch (error) {
    console.error('Token exchange failed:', error.response?.data || error.message);
  }
}

// After user is redirected back with ?code=AUTH_CODE
exchangeCodeForToken('PASTE_AUTH_CODE_HERE');

Replace PASTE_AUTH_CODE_HERE with the code from the callback URL and YOUR_CLIENT_SECRET with your actual secret. Never expose client secrets in client-side code.

OAuth 2.0 Authorization Code Flow

Authorization Request

Your app redirects the user to the provider's authorization URL with client_id, redirect_uri, scopes, and state.

User Grants Permission

The user logs in and approves the requested scopes on the provider's consent screen.

Authorization Code

The provider redirects back to your redirect_uri with an authorization code (and state for verification).

Token Exchange

Your server sends the authorization code + client_secret to the token endpoint to get an access token.

Access Protected Resources

Use the access token in API requests via the Authorization: Bearer header.

OAuth Documentation Links

Google OAuth 2.0 Docs GitHub OAuth 2.0 Docs Facebook OAuth 2.0 Docs Twitter (X) OAuth 2.0 Docs Discord OAuth 2.0 Docs LinkedIn OAuth 2.0 Docs

// Install: npm install axios const axios = require('axios'); async function exchangeCodeForToken(authorizationCode) { try { const response = await axios.post('https://oauth2.googleapis.com/token', { grant_type: 'authorization_code', code: authorizationCode, redirect_uri: 'http://localhost:3000/callback', client_id: 'YOUR_CLIENT_ID', client_secret: 'YOUR_CLIENT_SECRET', }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, }); console.log('Access Token:', response.data.access_token); console.log('Token Type:', response.data.token_type); if (response.data.refresh_token) { console.log('Refresh Token:', response.data.refresh_token); } return response.data; } catch (error) { console.error('Token exchange failed:', error.response?.data || error.message); } } // After user is redirected back with ?code=AUTH_CODE exchangeCodeForToken('PASTE_AUTH_CODE_HERE');