@kothatech/auth-js

The official Frontend Browser SDK for integrating Login with Kotha into Single Page Applications (React, Vue, Vanilla JS). It handles the full OAuth 2.0 Authorization Code Flow with PKCE securely in the browser.

Installation

npm install @kothatech/auth-js

Usage (React / Vanilla JS)

1. Initialize the Client

import KothaAuth from '@kothatech/auth-js';

const auth = new KothaAuth({
    clientId: 'app_your_client_id_here',
    redirectUri: 'https://yourwebsite.com/callback',
    issuer: 'https://auth.kotha.im' // Or http://localhost:4000 for local dev
});

2. Login Redirect

Attach this to your "Login with Kotha" button. This automatically handles generating the PKCE Code Verifier, hashing the Code Challenge, saving them to sessionStorage, and redirecting the user to Kotha.

document.getElementById('login-btn').addEventListener('click', () => {
    auth.loginWithRedirect();
});

3. Handle the Callback

On your /callback page, simply call handleRedirectCallback(). The SDK will parse the URL, verify the state token, attach the PKCE Code Verifier, and securely exchange the code for your JSON Web Tokens!

async function processLogin() {
    try {
        const tokens = await auth.handleRedirectCallback();
        
        console.log('Access Token:', tokens.access_token);
        console.log('ID Token:', tokens.id_token);
        
        // Save tokens, redirect user to dashboard
        localStorage.setItem('access_token', tokens.access_token);
        window.location.href = '/dashboard';
        
    } catch (error) {
        console.error('Login Failed!', error.message);
    }
}

// Call on page load
processLogin();

Security

This SDK enforces the Proof Key for Code Exchange (PKCE) protocol, protecting your users from authorization code interception attacks without requiring a client secret on the frontend.