Implement "Login with DeBands" using the Authorization Code flow with PKCE.

OAuth Endpoints

Authorization Flow

1. Generate PKCE Code Verifier

// Generate a random code verifier
function generateCodeVerifier() {
    const array = new Uint8Array(32);
    crypto.getRandomValues(array);
    return base64UrlEncode(array);
}

// Generate code challenge from verifier
async function generateCodeChallenge(verifier) {
    const encoder = new TextEncoder();
    const data = encoder.encode(verifier);
    const hash = await crypto.subtle.digest('SHA-256', data);
    return base64UrlEncode(new Uint8Array(hash));
}

2. Redirect to Authorization

const authUrl = new URL('https://dev.debands.xyz/oauth/authorize');
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('client_id', 'your_client_id');
authUrl.searchParams.set('redirect_uri', 'https://yourapp.com/callback');
authUrl.searchParams.set('scope', 'profile:read events:read');
authUrl.searchParams.set('state', generateRandomState());
authUrl.searchParams.set('code_challenge', codeChallenge);
authUrl.searchParams.set('code_challenge_method', 'S256');

window.location.href = authUrl.toString();

3. Exchange Code for Tokens

const response = await fetch('https://dev.debands.xyz/oauth/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
        grant_type: 'authorization_code',
        code: authorizationCode,
        redirect_uri: 'https://yourapp.com/callback',
        client_id: 'your_client_id',
        client_secret: 'your_client_secret',
        code_verifier: codeVerifier
    })
});

const tokens = await response.json();
// { access_token, refresh_token, expires_in, token_type, scope }

4. Refresh Access Token

const response = await fetch('https://dev.debands.xyz/oauth/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
        grant_type: 'refresh_token',
        refresh_token: refreshToken,
        client_id: 'your_client_id',
        client_secret: 'your_client_secret'
    })
});