How OAuth Works
June 29, 2025How 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.
Blog
Color Everything in CSS – Simple Guide
Jun 26, 2025
Color Everything in CSS – Simple Guide Today we’re diving into CSS colors: how to define them, especially with modern methods like lab(...
Using Web Components the Smart Way
Jul 06, 2025
Using Web Components the Smart Way A lot of developers assume Web Components are meant to replace full SPA frameworks like React or Vue. But in rea...
React Labs: View Transitions & Activity
Jun 17, 2025
React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...
Guide to Scroll‑Driven Animations with CSS
Jun 26, 2025
Guide to Scroll‑Driven Animations with CSS CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS. 1. Thr...
Supercharge Your PHP Enums with archtechx/enums
Jul 01, 2025
Supercharge Your PHP Enums with archtechx/enums PHP 8.1 introduced native enums—type‑safe sets of named values like statuses or roles. The arch...
Essential React Native UI & Interaction Components
Jul 01, 2025
Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....
