Help center
Start here - our help center has everything you need to get started and answer many commonly asked questions.
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.
All you need to get started is your Kinde domain e.g [YOUR_APP].kinde.com
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.
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
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
});
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.
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});
});
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();
});
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.
Start here - our help center has everything you need to get started and answer many commonly asked questions.
If you can’t find what you’re looking for in our help center - email our team. We’d love to hear from you.