Send Request for Social Login
Initiate OAuth2 authorization flow with social login providers
Send Request for Social Login
Construct authorization URLs to initiate social login flows with OAuth2 providers
Overview
To initiate a social login request, you construct an authorization URL that redirects users to the OAuth2 provider's authorization page. The URL includes your redirect URI where users will be sent after authorization.
URL Structure
{API_BASE_URL}/oauth2/authorize/{provider}?redirect_uri={OAUTH2_REDIRECT_URI}API_BASE_URLYour API server base URLproviderOAuth2 provider identifier (e.g., google, facebook, github)OAUTH2_REDIRECT_URIFrontend callback URL after authorizationExample URLs
Development Environment
http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:3000/oauth2/redirecthttp://localhost:8080googlehttp://localhost:3000/oauth2/redirectProduction Environment
https://api.yourdomain.com/oauth2/authorize/google?redirect_uri=https://app.yourdomain.com/oauth2/redirecthttps://api.yourdomain.comgooglehttps://app.yourdomain.com/oauth2/redirectSupported Providers
OAuth2 provider identifier: google
/oauth2/authorize/google?redirect_uri=...OAuth2 provider identifier: facebook
/oauth2/authorize/facebook?redirect_uri=...OAuth2 provider identifier: github
/oauth2/authorize/github?redirect_uri=...OAuth2 provider identifier: twitter
/oauth2/authorize/twitter?redirect_uri=...Implementation Steps
Replace API_BASE_URL and OAUTH2_REDIRECT_URI with your actual values
When user clicks social login button, redirect them to the constructed URL
Provider displays authorization page where user grants permissions
Provider redirects to OAUTH2_REDIRECT_URI with authorization code or error
Backend exchanges authorization code for access token and completes login
Frontend Implementation
// Configuration
const API_BASE_URL = 'https://api.yourdomain.com';
const REDIRECT_URI = 'https://app.yourdomain.com/oauth2/redirect';
// Function to initiate social login
function loginWithGoogle() {
const authUrl = `${API_BASE_URL}/oauth2/authorize/google?redirect_uri=${encodeURIComponent(REDIRECT_URI)}`;
window.location.href = authUrl;
}
function loginWithFacebook() {
const authUrl = `${API_BASE_URL}/oauth2/authorize/facebook?redirect_uri=${encodeURIComponent(REDIRECT_URI)}`;
window.location.href = authUrl;
}
function loginWithGitHub() {
const authUrl = `${API_BASE_URL}/oauth2/authorize/github?redirect_uri=${encodeURIComponent(REDIRECT_URI)}`;
window.location.href = authUrl;
}Redirect Handler
// At your redirect URI endpoint (e.g., /oauth2/redirect)
function handleOAuth2Callback() {
const urlParams = new URLSearchParams(window.location.search);
// Check for authorization code
const code = urlParams.get('code');
if (code) {
// Success - authorization code received
console.log('Authorization successful');
// Send code to your backend for token exchange
exchangeCodeForToken(code);
}
// Check for errors
const error = urlParams.get('error');
if (error) {
console.error('Authorization failed:', error);
const errorDescription = urlParams.get('error_description');
// Handle error (show user message, redirect to login, etc.)
}
}
function exchangeCodeForToken(code) {
// Your backend handles the actual token exchange
fetch('/api/auth/callback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code })
})
.then(response => response.json())
.then(data => {
// Handle successful authentication
if (data.token) {
// Store token and redirect to dashboard
localStorage.setItem('authToken', data.token);
window.location.href = '/dashboard';
}
})
.catch(error => {
console.error('Token exchange failed:', error);
});
}Security Considerations
Always use HTTPS for production URLs to prevent man-in-the-middle attacks
Ensure redirect URIs are registered with OAuth2 providers and match exactly
Consider adding a state parameter to prevent CSRF attacks
Always check for error parameters in the redirect response
Use Cases
Allow users to register instantly using their existing social accounts
Enable secure authentication without managing passwords
Auto-fill user profiles with information from social accounts
Support login from multiple social platforms simultaneously