JavaScript SDK

Kinde allows you to add authentication to your Single Page Application (SPA) quickly and to gain access to user profile information.

This guide demonstrates how to integrate Kinde with any new or existing SPA using the Kinde JavaScript SDK.

Setup Kinde

No keys required!

All you need to get started is your Kinde domain e.g [YOUR_APP].kinde.com

Set your Callback URL

Your user will be redirected to Kinde to authenticate. After they have logged in or registered they will be redirected back to your application.

You need to specify in Kinde which url you would like your user to be redirected to.

Important! This is required for your users to succesfully sign in to your app.

Configure your app

Add the Kinde JavaScript SDK as a dependency

The easiest way to install the SDK is via npm or yarn:

// with npm
npm i @kinde-oss/kinde-auth-pkce-js

// with yarn
yarn add @kinde-oss/kinde-auth-pkce-js

Integrate with your app

You’ll need to create a new instance of the Kinde Auth client object.

This needs to be the first thing that happens before you initialize your app.

We recommend using the async/await method.

import createKindeClient from "@kinde-oss/kinde-auth-pkce-js";

const kinde = await createKindeClient({
    domain: "[YOUR_KINDE_DOMAIN]",
    redirect_uri: window.location.origin
});

Login / Register

The Kinde client provides methods for an easy to implement login / register flow.

As an example if you add buttons in your HTML as follows

<div id="logged_out_view">
    <button id="login" type="button">Login</button>
    <button id="register" type="button">Registration</button>
</div>

You can bind events to them

document.getElementById("login").addEventListener("click", async () => {
    await kinde.login();
});

document.getElementById("register").addEventListener("click", async () => {
    await kinde.register();
});

Clicking either of these buttons redirects your user to Kinde where they authenticate before being redirected back to your site.

Handle redirect

Once your user is redirected back to your site from Kinde the handleRedirectCallback method needs to run to complete the login flow.

You will then have access to the user profile via the getUser method.

window.addEventListener("load", async () => {
    await kinde.handleRedirectCallback();
    const user = await kinde.getUser();
    console.log({user});
});

Log out

This is implemented in much the same way as logging in or registering. The Kinde SPA client comes with a logout method

document.getElementById("logout").addEventListener("click", async () => {
    await kinde.logout();
});

Call your API

The getToken method allows you to securely call your API and pass the bearer token to validate that your user is authenticated.

(async () => {
    try {
        const token = await kinde.getToken();
        const response = await fetch(YOUR_API, {
            headers: new Headers({
                Authorization: "Bearer " + token
            })
        });
        const data = await response.json();
        console.log({data});
    } catch (err) {
        console.log(err);
    }
})();

We recommend you use our middleware on your backend to verify the user and protect your end points. We currently have a Node/Express implementation with more to follow.