React SDK

Kinde allows you to add authentication to your React application quickly and to gain access to user profile information.

This guide demonstrates how to integrate Kinde with any new or existing React application using the Kinde React 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 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

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>
    }
  );
};

Get more support

Help center

Start here - our help center has everything you need to get started and answer many commonly asked questions.

Visit our help center

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