React SDK

These instructions assume you already have a Kinde account. You can register for free here (no credit card required).

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

Set your Callback and Logout URLs

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

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

On the App Keys page set Allowed callback URLs to the url of your app where the Kinde client above will be served. For local development this could be http://localhost:3000.

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

You will also need to set the url they will be redirected to upon logout. Set the Allowed logout redirect URLs to your JavaScript applications logout page.

For local development this could also be http://localhost:3000.

Make sure you press the Save button at the bottom of the page!

Note: The http://localhost:3000 is just an example of a commonly used local development url. This should be replaced with the url where your app is running.

Configure React

Add the Kinde React SDK as a dependency

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

// with npm
npm i @kinde-oss/kinde-auth-react

// with yarn
yarn add @kinde-oss/kinde-auth-react

Environments

If you would like to use our Environments feature as part of your development process. You will need to create them first within your Kinde account, see the guide here. In this case you would use the Environment subdomain in the code block above.

Integrate with your app

Kinde uses a React Context Provider to maintain its internal state in your application.

Import the Kinde Provider component and wrap your application in it.

import {KindeProvider} from "@kinde-oss/kinde-auth-react";

const App = () => (
    <KindeProvider
        domain="[YOUR_KINDE_DOMAIN]"
        logoutUri={window.location.origin}
        redirectUri={window.location.origin}
    >
        <Routes />
    </KindeProvider>
);

Login / Register

Kinde provides a React hook for an easy to implement login / register flow.

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

import {useKindeAuth} from '@kinde-oss/kinde-auth-react';

...
const { login, register } = useKindeAuth();
...
<button onClick={register} type="button">Register</button>
<button onClick={login} type="button">Log In</button>

Log out

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

const { logout } = useKindeAuth();
...
<button onClick={logout} type="button">Sign out</button>

View user profile

You can get an authorized user’s profile from any component using the Kinde React hook.

import {useKindeAuth} from "@kinde-oss/kinde-auth-react";

const SayHello = () => {
    const {user} = useKindeAuth();

    return <p>Hi {user.first_name}!</p>;
};

To be on the safe side we have also provided isAuthenticated and isLoading state to prevent rendering errors.

import {useKindeAuth} from "@kinde-oss/kinde-auth-react";

const UserProfile = () => {
  const { user, isAuthenticated, isLoading } = useKindeAuth();

  if (isLoading) {
    return <p>Loading</p>;
  }

  return (
    {isAuthenticated ?
      <div>
        <h2>{user.first_name}</h2>
        <p>{user.preferred_email}</p>
      </div>
     : <p>Please sign in or register!</p>
    }
  );
};

User Permissions

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

You set Permissions in your Kinde account (see help article), the below is an example set of permissions.

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

Controlling Organizations

Creating an organization

To have a new organization created within your application, you will need to run a similar function to below:


import {useKindeAuth} from '@kinde-oss/kinde-auth-react';

...
const { createOrg } = useKindeAuth();
...
<button onClick={createOrg} type="button">Create Organization</button>

Signing up/login users to organizations

To sign up a new user to a particular organization you will need pass through the Organization code from your Kinde account as the user account is created (See where to find it). Example function for registering or logging in below:

<button onClick={() => register({org_code: 'org_1234'})} type="button">Register</button>

<button onClick={() => login({org_code: 'org_1234'})} type="button">Login</button>

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": [
	"https://your_subdomain.kinde.com"
  ],
  "exp": 1658475930,
  "iat": 1658472329,
  "iss": "https://your_subdomain.kinde.com",
  "jti": "123457890",
  "org_code": "org_1234",
  "permissions": ["read:todos", "create:todos"],
  "scp": [
	"openid",
	"offline"
  ],
  "sub": "kp:123457890"
}

If you need any assistance with getting Kinde connected reach out to us at support@kinde.com.

Get more support

See Kinde in action

Find out what Kinde can do in a live demo with one of our experts.

Book a demo

Talk to us

If you can’t find what you’re looking for in our help center - email our team. We’d love to hear from you.

Contact support
Talk to us