SvelteKit SDK

Kinde SvelteKit SDK allows developers to integrate Kinde Authentication into their SvelteKit projects. This SDK implements the following OAuth 2.0 flows.

Authorization Code - Intended for confidential clients for e.g. web-servers
Authorization Code with PKCE extension - For public clients for e.g. single page web application and or mobile applications, and confidential clients for e.g. web-servers.
Client Credentials Flow - Intended for confidential clients, where machine to machine communication is required.

For new project, you can find our Svelte Starter Kit

Requirements

Node version 18.16.x or newer

Register for Kinde

If you haven’t already got a Kinde account, register for free here (no credit card required). Registering gives you a Kinde domain, which you need to get started, e.g. yourapp.kinde.com.

Install

npm i @kinde-oss/kinde-auth-sveltekit

yarn add @kinde-oss/kinde-auth-sveltekit

pnpm add @kinde-oss/kinde-auth-sveltekit

Configure Kinde

Set callback URLs

In Kinde, go to Settings > Applications and then navigate to the relevant frontend app or backend app.
Add your callback URLs in the relevant fields. For example:
- Allowed callback URLs (also known as redirect URIs): https://<your_app_domain>/api/auth/kinde_callback
  
  e.g: http://localhost:5173/api/auth/kinde_callback
- Allowed logout redirect URLs:
  
  https://<your_app_domain>
  
  e.g:http://localhost:5173
Select Save.

Add environments

Kinde comes with a production environment, but you can set up other environments if you want to. Each environment has a unique subdomain so be sure to use the correct one in the Configure your app section which follows.

Configure your app

Environment variables

Put these variables in your .env file. You can find these variables on your Settings > Applications > [Your app] > View details page.

KINDE_ISSUER_URL - your Kinde domain
KINDE_CLIENT_ID - your Kinde Client ID
KINDE_CLIENT_SECRET - your Kinde Client secret. Leave this field empty if you are using Authentication Code Flow with PKCE
KINDE_REDIRECT_URL - this is the URL Kinde will redirect to after the authentication process. Note that the Kinde api/auth/kinde_callback path must be included in the URL (see example below). You also need to make sure this URL is included in your list of Allowed callback URLs.
KINDE_POST_LOGOUT_REDIRECT_URL - Specify the destination where you want users to be redirected to after logging out. Make sure this URL is listed under your Allowed logout redirect URLs.
KINDE_POST_LOGIN_REDIRECT_URL- the URL users will be redirected to after signing in.
KINDE_AUTH_WITH_PKCE - Set true if you want to use Authentication Code Flow with PKCE

Below is an example of a .env file

KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com
KINDE_CLIENT_ID=<your_kinde_client_id>
KINDE_CLIENT_SECRET=<your_kinde_client_secret>
KINDE_REDIRECT_URL=http://localhost:5173/api/auth/kinde_callback
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:5173
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:5173/dashboard
KINDE_AUTH_WITH_PKCE=true // Set `true` if you want to use Authentication Code Flow with PKCE

Integrate with your app

Implement sessionHooks in your hooks.

import { sessionHooks, type Handler } from '@kinde-oss/kinde-auth-sveltekit';
...

export const handle: Handler = async ({ event, resolve }) => {
  ...
  sessionHooks({ event });
  const response = await resolve(event);
  return response;
};

Then implement the Kinde routes in your app by creating a server file.

import {handleAuth} from "@kinde-oss/kinde-auth-sveltekit";
import type {RequestEvent} from "@sveltejs/kit";

export function GET(requestEvents: RequestEvent) {
  return handleAuth(requestEvents);
}

This will handle Kinde Auth endpoints in your SvelteKit app.

/api/auth/login - will redirect you to login at the KindeAuth server.
/api/auth/logout - will log you out of the app.
/api/auth/register - will redirect you to register at the KindeAuth server.
/api/auth/kinde_callback - the endpoint to handle the redirect after logging in from Kinde
/api/auth/health - See Health Below

The SDK ships with predefined API routes to generate the auth urls for sign up and sign in.

<ul>
  <li>
    <a href="/api/auth/login">Sign in</a>
  </li>
  <li>
    <a href="/api/auth/register">Sign up</a>
  </li>
</ul>

in addition to KINDE_POST_LOGIN_REDIRECT_URL which will direct your users to a single place, you direct the users more granularly.

Both login and register support passing a url param post_login_redirect_url which will direct to the user once the flow is completed.

<a class="btn btn-ghost sign-in-btn" href="/a pi/auth/login?post_login_redirect_url=/custom_url">
  Sign in
</a>

Log out

This is implemented in much the same way as signing up or signing in. An API route is provided for you

<a href="/api/auth/logout"> Sign out </a>

Check if the user is authenticated

We’ve provided a helper to get a boolean value that checks if a user is signed in by verifying that the access token is valid.

...
import {kindeAuthClient, type SessionManager} from '@kinde-oss/kinde-auth-sveltekit';
import type {RequestEvent} from '@sveltejs/kit';

export async function load({request}: RequestEvent) {
  const isAuthenticated = await kindeAuthClient.isAuthenticated(
    request as unknown as SessionManager
  ); // Boolean: true or false
  if (isAuthenticated) {
    // Need to implement, e.g: call an api, etc...
  } else {
    // Need to implement, e.g: redirect user to sign in, etc..
  }

  ...
  return {
    isAuthenticated
  };
}

View user profile

You need to have already authenticated before you call the API, otherwise an error will occur.

To access the user information, use the getUser helper function:

await kindeAuthClient.getUser(request as unknown as SessionManager);
// returns
{
  "given_name":"Dave",
  "id":"kp_12345678910",
  "family_name":"Smith",
  "email":"dave@smith.com",
  "picture": "https://link_to_avatar_url.kinde.com"
}

Health check

To check your configuration, the SDK exposes an endpoint with your settings.

/api/auth/health

Note: The client secret will indicate only if the secret is set or not set correctly.

To enable set the KINDE_DEBUG environment variable to true

KINDE_DEBUG = true;

{
  "authDomain": "https://danielkinde.kinde.com",
  "clientId": "0eb39a3b1cd64e99b4461d9660f7b97c",
  "logoutRedirectURL": "http://localhost:5173",
  "redirectURL": "http://localhost:5173/api/auth/kinde_callback",
  "audience": "",
  "scope": "profile email openid",
  "clientSecret": "Set correctly",
  "loginRedirectURL": "http://localhost:5173",
  "authUsePKCE": false,
  "version": "1710935446027",
  "framework": "sveltekit"
}

View users in Kinde

If you navigate to the “Users” page within Kinde you will see your newly registered user there.

Audience

An audience is the intended recipient of an access token - for example the API for your application. The audience argument can be set against KINDE_AUDIENCE in your environment variables.

The audience of a token is the intended recipient of the token.

KINDE_AUDIENCE = your_audience;

For details on how to connect, see Register an API

Overriding scope

By default the KindeSDK requests the following scopes:

profile
email
offline
openid

To override this, you can set the value against the KINDE_SCOPE in your environment variables.

KINDE_SCOPE=profile email offline openid

Organizations

Create an organization

To create a new organization within your application, set up the following route:

<a href="/api/auth/create_org?org_name={<org_name>}">
  Create org
</a>

The Kinde client provides methods for you easily sign up and sign in users into organizations. You can add links in your HTML as follows:

<a href="/api/auth/login?org_code={<your_org_code>}">Sign in</a>
<a href="/api/auth/register?org_code={<your_org_code>}">Sign up</a>

Following authentication, Kinde provides a json web token (JWT) to your application. Along with the standard information we also include the org_code and the permissions for that organization (this is important as a user can belong to multiple organizations and have different permissions for each).

Example of a returned token:

{
  "aud": [],
  "exp": 1658475930,
  "iat": 1658472329,
  "iss": "https://your_subdomain.kinde.com",
  "jti": "123457890",
  "org_code": "org_1234",
  "permissions": ["read:todos", "create:todos"],
  "scp": ["openid", "profile", "email", "offline"],
  "sub": "kp:123457890"
}

The id_token will also contain an array of organizations that a user belongs to - this is useful if you wanted to build out an organization switcher for example.

[
    ...
    "org_codes": ["org_1234", "org_4567"]
    ...
];

There are two helper functions you can use to extract information:

await kindeAuthClient.getOrganization(request as unknown as SessionManager);
// { orgCode: 'org_1234' }

await kindeAuthClient.getUserOrganizations(request as unknown as SessionManager);
// { orgCodes: ['org_1234', 'org_abcd'] }

User permissions

Once a user has been verified, your product/application will return the JWT with an array of permissions for that user. You will need to configure your product/application to read permissions and unlock the respective functions.

Set permissions in your Kinde account. Here’s an example set of permissions.

const permissions = [
  "create:todos",
  "update:todos",
  "read:todos",
  "delete:todos",
  "create:tasks",
  "update:tasks",
  "read:tasks",
  "delete:tasks"
];

We provide helper functions to more easily access the permissions claim:

await kindeAuthClient.getPermission(request as unknown as SessionManager, "create:todos");
// { orgCode: 'org_1234', isGranted: true }

await kindeAuthClient.getPermissions(request as unknown as SessionManager);
// { orgCode: 'org_1234', permissions: ['create:todos', 'update:todos', 'read:todos'] }

Getting claims

We have provided a helper to grab any claim from your id or access tokens. The helper defaults to access tokens:

await kindeAuthClient.getClaim(request as unknown as SessionManager, "aud"); // { name: "aud", value: ["local-testing@kinde.com"] }

await kindeAuthClient.getClaimValue(request as unknown as SessionManager, "aud"); // ["local-testing@kinde.com"]

await kindeAuthClient.getClaim(request as unknown as SessionManager, "email", "id_token"); // { name: "email", value: "first.last@test.com" }

await kindeAuthClient.getClaimValue(request as unknown as SessionManager, "email", "id_token"); // "first.last@test.com"

Feature flags

We have provided a helper to grab any feature flag from access_token:

await kindeAuthClient.getFlag(request as unknown as SessionManager, 'theme')
// returns
{
  "is_default": false
  "value": "pink",
  "code": "theme",
  "type": "string",
}

await kindeAuthClient.getFeatureFlag(request as unknown as SessionManager, 'no-feature-flag')
// returns
// Error: "Flag no-feature-flag was not found, and no default value has been provided"

await kindeAuthClient.getFeatureFlag(request as unknown as SessionManager, 'no-feature-flag', 'default-value')
// returns
{
  "is_default": true
  "code": "no-feature-flag",
  "value": "default-value",
}

await kindeAuthClient.getFeatureFlag(request as unknown as SessionManager, 'theme', 'default-theme', 'b')
// returns
// Error: "Flag theme is of type string, expected type is boolean

We also require wrapper functions by type which should leverage getFlag above.

Get boolean flags

/**
 * Get a boolean flag from the feature_flags claim of the access_token.
 * @param {Object} request - Request object
 * @param {String} code - The name of the flag.
 * @param {Boolean} [defaultValue] - A fallback value if the flag isn't found.
 * @return {Boolean}
 */
await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, code, defaultValue);

await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, "is_dark_mode");
// true

await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, "is_dark_mode", false);
// true

await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, "new_feature");
// Error - flag does not exist and no default provided

await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, "new_feature", false);
// false (flag does not exist so falls back to default)

await kindeAuthClient.getBooleanFlag(request as unknown as SessionManager, "theme", "blue");
// Error - Flag "theme" is of type string not boolean

Get string flags

/**
 * Get a string flag from the feature_flags claim of the access_token.
 * @param {Object} request - Request object
 * @param {String} code - The name of the flag.
 * @param {String} [defaultValue] - A fallback value if the flag isn't found.
 * @return {String}
 */
await kindeAuthClient.getStringFlag(request as unknown as SessionManager, code, defaultValue);

/* Example usage */
await kindeAuthClient.getStringFlag(request as unknown as SessionManager, "theme");
// pink

await kindeAuthClient.getStringFlag(request as unknown as SessionManager, "theme", "black");
// true

await kindeAuthClient.getStringFlag(request as unknown as SessionManager, "cta_color");
// Error - flag does not exist and no default provided

await kindeAuthClient.getStringFlag(request as unknown as SessionManager, "cta_color", "blue");
// blue (flag does not exist so falls back to default)

await kindeAuthClient.getStringFlag(request as unknown as SessionManager, "is_dark_mode", false);
// Error - Flag "is_dark_mode" is of type boolean not string

Get integer flags

/**
 * Get an integer flag from the feature_flags claim of the access_token.
 * @param {Object} request - Request object
 * @param {String} code - The name of the flag.
 * @param {Integer} [defaultValue] - A fallback value if the flag isn't found.
 * @return {Integer}
 */
await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, code, defaultValue);

await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, "competitions_limit");
// 5

await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, "competitions_limit", 3);
// 5

await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, "team_count");
// Error - flag does not exist and no default provided

await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, "team_count", 2);
// false (flag does not exist so falls back to default)

await kindeAuthClient.getIntegerFlag(request as unknown as SessionManager, "is_dark_mode", false);
// Error - Flag "is_dark_mode" is of type boolean not integer

Token storage

After the user has successfully logged in, you will have a JSON Web Token (JWT) and a refresh token securely stored. You can retrieve an access token using the getToken method.

const access_token = await kindeAuthClient.getToken(request as unknown as SessionManager);

Kinde Management API

To use our management API please see @kinde/management-api-js

SDK API reference

`login`

Constructs redirect url and sends user to Kinde to sign in.

Usage:

sdk.login();

`register`

Constructs redirect url and sends user to Kinde to sign up.

Usage:

sdk.register();

`logout`

Logs the user out of Kinde.

Usage:

sdk.logout();

`isAuthenticated`

Checks if the user is authenticated.

Usage:

sdk.isAuthenticated();

Sample output:

true or false

`createOrg`

Constructs redirect url and sends the user to Kinde to sign up and creates a new org for your business.

Arguments:

 options?: CreateOrgURLOptions {
   org_name?: "string";
   org_code?: "string";
   state?: "string";
}

Usage:

sdk.createOrg(
  org_name: "org_1234"
);

`getClaim`

Extracts the provided claim from the provided token type in the current session, the returned object includes the provided claim.

Arguments:

claim: "string",
tokenKey?: TokenType "access_token" | "id_token"

Usage:

sdk.getClaim(claim:"given_name", tokenType: TokenType);

`getPermission`

Returns the state of a given permission.

Arguments:

 key: "string"

Usage:

sdk.getPermission("permission");

Sample output:

{ orgCode : 'org_1234', isGranted : true}

`getPermissions`

Returns all permissions for the current user for the organization they are logged into.

Usage:

sdk.getPermissions();

Sample output:

{ orgCode : 'org_1234', permissions : ['create:todos', 'update:todos', 'read:todos'] }

`getOrganization`

Get details for the organization your user is logged into.

Usage:

sdk.getOrganization();

Sample output:

{ orgCode : 'org_1234' }

`getUserOrganizations`

Gets an array of all organizations the user has access to.

Usage:

sdk.getUserOrganizations();

Sample output:

{ orgCodes: ['org_7052552de68', 'org_5a5c29381327'] }

`getUser`

Extracts the user details from the ID token obtained after authentication.

Usage:

sdk.getUser();

Sample output:

{
"id":"kp_12345678910",
"preferredEmail":"dave@smith.com",
"lastName":"smith",
"firstName":"dave",
}

`getToken`

Returns the access token obtained after authentication.

Usage:

sdk.getToken();

Sample output:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
    .eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
    .SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c;

`getUserProfile`

Makes use of the getToken method above to fetch user details.

Usage:

sdk.getUserProfile();

Sample output:

{ given_name: 'Dave', id: 'abcdef', family_name : 'Smith', email : 'mailto:dave@smith.com' }

`getFlag`

Get a flag from the feature_flags claim of the access_token

Arguments:

code : "string"
defaultValue? :  FlagType[keyof FlagType]
flagType? : [key of FlagType]

interface FlagType {
    s: string;
    b: boolean;
    i: number;
}
interface GetFlagType {
    type?: 'string' | 'boolean' | 'number';
    value: FlagType[keyof FlagType];
    is_default: boolean;
    code: "string";
}

Usage:

sdk.getFlag(code:"theme");

Sample output:

{ "code": "theme", "type": "string", "value": "pink", "is_default": false }

`getBooleanFlag`

Get a boolean flag from the feature_flags claim of the access_token

Arguments:

code : "string"
defaultValue? :  boolean

Usage:

sdk.getBooleanFlag(code:"is_dark_mode");

Sample output:

true or false

`getStringFlag`

Get a string flag from the feature_flags claim of the access_token

Arguments:

code : "string"
defaultValue? :  "string"

Usage:

sdk.getStringFlag(code:"theme");

Sample output:

pink

`getIntegerFlag`

Get an integer flag from the feature_flags claim of the access_token

Arguments:

code : "string"
defaultValue? :  number

Usage:

sdk.getIntegerFlag(code:"team_count");

Sample output:

If you need help connecting to Kinde, contact us at support@kinde.com.

Join the community

Get support from the Kinde team and expert users in the Kinde community

Join via Slack or Discord
Contact support

Chat to support through the Kinde help widget, or send a question via email

Send an email

SvelteKit SDK

Requirements

Register for Kinde

Install

Configure Kinde

Set callback URLs

Add environments

Configure your app

Integrate with your app

Sign in and sign up (login and register)

Direct users post login / registration

Log out

Check if the user is authenticated

View user profile

Health check

View users in Kinde

Audience

Overriding scope

Organizations

Create an organization

Sign up and sign in to organizations

User permissions

Getting claims

Feature flags

Get boolean flags

Get string flags

Get integer flags

Token storage

Kinde Management API

SDK API reference

login

register

logout

isAuthenticated

createOrg

getClaim

getPermission

getPermissions

getOrganization

getUserOrganizations

getUser

getToken

getUserProfile

getFlag

getBooleanFlag

getStringFlag

getIntegerFlag

Useful links

Join the community

Contact support

`login`

`register`

`logout`

`isAuthenticated`

`createOrg`

`getClaim`

`getPermission`

`getPermissions`

`getOrganization`

`getUserOrganizations`

`getUser`

`getToken`

`getUserProfile`

`getFlag`

`getBooleanFlag`

`getStringFlag`

`getIntegerFlag`