Implementing OAuth 2.0 Authentication

OAuth 2.0 enables your application to access APIs on behalf of users without handling their credentials directly. This guide implements the Authorization Code flow with PKCE.

Step 1: Register Your Application

Create an OAuth application in the Developer Portal to get your client ID and configure redirect URIs.

Step 2: Generate PKCE Challenge

function generateCodeVerifier() {\n const array = new Uint8Array(32);\n crypto.getRandomValues(array);\n return base64UrlEncode(array);\n}\nconst codeVerifier = generateCodeVerifier();\nconst codeChallenge = await sha256(codeVerifier);

Step 3: Redirect to Authorization

Build the authorization URL and redirect the user:

const authUrl = new URL('https://auth.connectbase.com/authorize');\nauthUrl.searchParams.set('client_id', CLIENT_ID);\nauthUrl.searchParams.set('redirect_uri', REDIRECT_URI);\nauthUrl.searchParams.set('response_type', 'code');\nauthUrl.searchParams.set('code_challenge', codeChallenge);\nauthUrl.searchParams.set('scope', 'read:buildings write:addresses');

Step 4: Exchange Code for Tokens

Handle the callback and exchange the authorization code for access and refresh tokens.

Step 5: Make Authenticated Requests

Include the access token in API requests:

const response = await fetch('https://api.connectbase.com/v2/buildings', {\n headers: { 'Authorization': `Bearer ${accessToken}` }\n});

Step 6: Implement Token Refresh

Proactively refresh tokens before they expire to avoid interrupted user sessions.

Step 7: Handle Revocation

Implement logout by revoking tokens at the revocation endpoint.

Step 8: Security Checklist

✅ Always use HTTPS
✅ Validate state parameter
✅ Store tokens securely
✅ Implement PKCE
✅ Use minimal scopes