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(...
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....
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...
What’s New in ECMAScript 2025
Jun 30, 2025
What’s New in ECMAScript 2025 On June 25, 2025, Ecma International officially approved ES2025, adding several useful features: 1. 📦 Import At...
Laravel 12.18.0 Update
Jun 17, 2025
Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...
Bypassing $fillable Safely with forceFill() in Laravel
Jul 02, 2025
Bypassing $fillable Safely with forceFill() in Laravel Ever used create() in Laravel and noticed some fields like role or status didn’t save? T...
