This SDK is for developers using Remix.

New to Kinde? Get started here.

The Remix SDK works with back end applications. Create one in Kinde. See Add and manage applications.

# npm
npm i @kinde-oss/kinde-remix-sdk
# yarn
yarn add @kinde-oss/kinde-remix-sdk
# pnpm
pnpm i @kinde-oss/kinde-remix-sdk

1. In Kinde, go to Settings > Applications > [Your app] > View details.
2. Add your callback URLs in the relevant fields. For example:
   • Allowed callback URLs (also known as redirect URIs) - for example http://localhost:3000/kinde-auth/callback
   • Allowed logout redirect URLs - for example http://localhost:3000
3. Select Save.

While you are in your Kinde backend application, copy the Client ID and Client secret, redirect URLs, etc. Add these details to the Environment variables for your application.

.env

KINDE_CLIENT_ID=<your-client-id>
KINDE_CLIENT_SECRET=<your-client-secret>
KINDE_ISSUER_URL=https://<your-kinde-subdomain>.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000

Create this file app/routes/kinde-auth.$index.tsx.

import { handleAuth } from "@kinde-oss/kinde-remix-sdk";
import { LoaderFunctionArgs } from "@remix-run/node";

export async function loader({ params, request }: LoaderFunctionArgs) {
  return await handleAuth(request, params.index);
}

Authenticate users by redirecting them to /kinde-auth/login and /kinde-auth/register with the Remix <Link /> component.

import { Link } from "@remix-run/react";

<Link to={"/kinde-auth/login"}>
  <button>Login</button>
</Link>

<Link to={"/kinde-auth/register"}>
  <button>Register</button>
</Link>

Sign into organizations

To log into specific organizations you can specify the org_code in the search params.

<Link
  to={{
    pathname: "/kinde-auth/login",
    search: "?org_code=org_af90783xxxx",
  }}
>
  Sign in
</Link>

Internationization

You can set the language you wish your users to see when they hit the login flow by including lang in the search params.

<Link
  to={{
    pathname: "/kinde-auth/login",
    search: "?lang=fr",
  }}
>
  Sign in
</Link>

This is implemented in much the same way as signing up or signing in. Use the remix <Link /> component to redirect users to /kinde-auth/logout.

import {Link} from "@remix-run/react";

<Link to={"/kinde-auth/logout"}>
    <button>Logout</button>
</Link>;

In the loader, check if the user exists and then handle route protection there.

In this example we will redirect the user to sign in if there is no login data.

export const loader = async ({request}: LoaderFunctionArgs) => {
    const {getUser} = await getKindeSession(request);
    const user = await getUser();

    if (user === null) {
        throw redirect("/kinde-auth/login");
    }

    return json({user});
};

After a user has logged following a redirect from a protected route, we usually want to send the user back to the page they were trying to access prior to logging in.

This can be achieved with the returnTo search parameter added to the login/register url.

export const loader = async ({request}: LoaderFunctionArgs) => {
    const {getUser} = await getKindeSession(request);
    const user = await getUser();

    if (user === null) {
        throw redirect("/kinde-auth/login?returnTo=/protected-route");
    }

    return json({user});
};

const {
    getUser,
    getBooleanFlag,
    getFlag,
    getIntegerFlag,
    getStringFlag,
    getPermission,
    getClaim,
    getClaimValue,
    getOrganization,
    getPermissions,
    getToken,
    getUserOrganizations,
    getUserProfile,
    isAuthenticated
} = await getKindeSession(request);

getClaim(claim, type): Fetches a specific claim from the user’s session based on the provided claim name and type. Returns an object with name and value properties, or null on error.

getClaimValue(claim, type): Similar to getClaim, but retrieves only the claim’s value. Returns the value or null on error.

getToken(): Retrieves the current access token from the session. Returns the token or null when the user is not authenticated or on error.

refreshTokens(): Attempts to refresh the user’s access and refresh tokens. Returns true on success or throws an error.

isAuthenticated(): Checks if a valid session exists, indicating a logged-in user. Returns true if authenticated, otherwise false.

getUser(): Retrieves the user information associated with the current session. Returns a user object or null on error or if the user is not authenticated.

getUserProfile(): Fetches the user’s profile details from Kinde. Returns a user profile object or null on error or if the user is not authenticated.

getFlag(code, defaultValue, type): Retrieves a feature flag value by code. Optionally provides a default value and type for parsing the retrieved value. Returns the flag value or the default value on error.

getBooleanFlag(code, defaultValue): Retrieves a boolean feature flag.

getIntegerFlag(code, defaultValue): Retrieves an integer feature flag.

getStringFlag(code, defaultValue): Retrieves a string feature flag.

getPermission(permission): Checks if a specific permission is granted to the user. Returns true if granted, false otherwise.

getPermissions(): Retrieves all permissions associated with the user’s session. Returns an array of permission strings or an empty array on error.

getOrganization(): Fetches information about the user’s current organization. Returns an organization object or null on error.

getUserOrganizations(): Retrieves a list of organizations the user belongs to. Returns an array of organization objects or an empty array on error.