Build OAuth authorization URLs and generate token exchange code for popular providers.
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=gqd1hibvxfv
Enter a Client ID to open the authorization URL.
// 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 Playground helps you assemble a valid OAuth 2.0 authorization request URL and see the matching token-exchange code, all in your browser. You fill in fields like authorization endpoint, token endpoint, client ID, redirect URI, scopes, response type, and state, and the tool builds the encoded /authorize URL plus ready-to-copy snippets for the POST that swaps an authorization code for an access token.
It is aimed at backend and frontend developers integrating providers such as Google, GitHub, Microsoft, or any spec-compliant identity server. Instead of memorizing which query parameters go where, you get correct URL encoding, the Authorization Code and Client Credentials grant shapes, and a copyable curl or fetch example for the /token request.
The Authorization Code grant runs in two stages. First, the browser is sent to the authorization endpoint with query parameters: response_type=code, client_id, redirect_uri, scope, and state. The user authenticates and consents, and the provider redirects to your redirect_uri with ?code=AUTH_CODE&state=... appended. The state value you sent must match what comes back; it protects against CSRF.
Second, your server exchanges the code for tokens by POSTing to the token endpoint with grant_type=authorization_code, code, redirect_uri, client_id, and client_secret, using Content-Type application/x-www-form-urlencoded. The response is JSON containing access_token, token_type (usually Bearer), expires_in seconds, and often refresh_token and id_token.
PKCE (RFC 7636) hardens public clients like SPAs and mobile apps that cannot keep a secret. You create a random code_verifier, derive code_challenge = BASE64URL(SHA-256(code_verifier)), send the challenge with code_challenge_method=S256 in the authorize step, then prove possession by sending the original verifier during token exchange.
No. OAuth Playground runs entirely in your browser and is free to use. It builds URLs and code snippets locally, and any secret you paste stays on your machine unless you actually send the request to your provider.
Authorization Code is for acting on behalf of a user who logs in and consents, and it involves a browser redirect. Client Credentials is for machine-to-machine access with no user, where your app authenticates with just its client ID and secret against the token endpoint.
The state value is an opaque random string you send in the authorize request and verify when the provider redirects back. It prevents cross-site request forgery by ensuring the callback corresponds to a request your app actually initiated.
Use PKCE for any public client that cannot safely store a client secret, such as single-page apps, native mobile apps, and desktop apps. Most providers now recommend PKCE even for confidential clients as an extra layer of protection.
You copy the generated authorize URL and open it in a browser; the provider handles login and redirects to your own redirect URI. This tool does not intercept the callback, so you read the returned code from your redirect URI and paste it into the token-exchange snippet.
Any OAuth 2.0 or OpenID Connect compliant provider, including Google, GitHub, Microsoft Entra ID, Okta, Auth0, and self-hosted servers like Keycloak. You just supply that provider's authorization and token endpoint URLs.
It is the lifetime of the access token in seconds from the time it was issued, for example 3600 for one hour. After it expires you either restart the flow or use the refresh_token, when provided, to obtain a new access token.