How OAuth Works

OAuth is a protocol that allows third-party applications to access user data without sharing passwords. It's the backbone of secure authorization used by platforms like Google, Twitter, and Facebook.

🔐 What Is OAuth?

OAuth (Open Authorization) enables users to approve an app to act on their behalf without giving away their credentials. For example, you can allow a scheduling app to access your Google Calendar.

🔁 Step 1: Authorization Request

Redirect the user to the authorization server:

const params = {
  response_type: 'code',
  client_id: 'your-client-id',
  redirect_uri: 'https://yourapp.com/callback',
  scope: 'email profile',
  state: 'secureRandomString'
};
const url = 'https://auth.example.com/oauth/authorize?' + new URLSearchParams(params);
// window.location = url;

🔁 Step 2: Callback with Code

Once the user approves, they'll be redirected with a ?code and ?state.

🛠️ Step 3: Exchange Code for Token

const response = await fetch('https://auth.example.com/oauth/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: 'the-code-from-query',
    redirect_uri: 'https://yourapp.com/callback',
    client_id: 'your-client-id',
    client_secret: 'your-client-secret'
  })
});
const data = await response.json();
const accessToken = data.access_token;

💡 What is PKCE?

PKCE (Proof Key for Code Exchange) is an enhancement for public clients (like mobile apps) that can't store secrets securely.

// Frontend
const codeVerifier = generateRandomString();
const codeChallenge = await sha256(codeVerifier);
sessionStorage.setItem('verifier', codeVerifier);

const params = {
  response_type: 'code',
  code_challenge_method: 'S256',
  code_challenge: codeChallenge
};

📢 Summary

• Use OAuth to authorize apps securely.
• Always verify the state parameter.
• Use PKCE for frontend and mobile apps.