NextJS SDK

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

Installation

Both yarn and npm will work fine, we’ll be using npm for the purposes of this guide.

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

Getting started

Kinde configuration

On the Kinde web app navigate to Settings in the left menu, then select App keys and find the Callbacks input field.

Here you want to put in the callback URLs for your NextJS app, which should look something like this:

  • Allowed callback URLs - http://localhost:3000/api/auth/kinde_callback
  • Allowed logout redirect URLs - http://localhost:3000

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

Note: The http://localhost:3000 is used as an example of local address, change to the local port that you use.

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.

Configuring your app

Environment variables

Put these variables in your .env file. You can find these variables on your App keys page.

  • KINDE_SITE_URL - where your app is running
  • KINDE_ISSUER_URL - your kinde domain
  • KINDE_POST_LOGOUT_REDIRECT_URL - where you want users to be redirected to after logging out. Make sure this URL is under your allowed logout redirect URLs.
  • KINDE_CLIENT_ID - you can find this on the App Keys page
  • KINDE_CLIENT_SECRET - you can find this on the App Keys page
KINDE_SITE_URL=http://localhost:3000
KINDE_ISSUER_URL=https://your_kinde_domain.kinde.com
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_CLIENT_ID=your_kinde_client_id
KINDE_CLIENT_SECRET=your_kinde_client_secret

API endpoints

Create a file myapp/pages/api/auth/[...kindeAuth].js inside your NextJS project. Inside the file [...kindeAuth].js put this code:

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs";

export default handleAuth();

This will handle Kinde Auth endpoints in your NextJS app.

  • /api/auth/me - this endpoint will get user information
  • /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.

Integrate with your app

Kinde Provider

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 (we suggest to put it in the root file of your application - _app.js)

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

function MyApp({Component, pageProps}) {
    return (
        <KindeProvider>
            <Component {...pageProps} />
        </KindeProvider>
    );
}

export default MyApp;

Getting user information

To access the user information, use the useKindeAuth hook from any part of your app, wrapped by your KindeProvider.

import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";
import Link from "next/link";

export default function Home() {
    const auth = useKindeAuth();

    return (
        <ul>
            <li>
                <Link href="/api/auth/me">
                    <a>Get user</a>
                </Link>
            </li>
            <li>
                <Link href="/api/auth/login">
                    <a>Sign in</a>
                </Link>
            </li>
            <li>
                <Link href="/api/auth/logout">
                    <a>Sign out</a>
                </Link>
            </li>
            <li>
                <Link href="/api/auth/register">
                    <a>Sign up</a>
                </Link>
            </li>
        </ul>
    );
}

View users in Kinde

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

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:

<Link
    href={{
        pathname: "/api/auth/create_org",
        query: {
            org_name: "Organization name"
        }
    }}
>
    Create org
</Link>

Signing up/login users to organizations

Every organization in Kinde has a unique code. To sign up a new user into a particular organization you will need to pass through this code in the register method. (See where to find it). Example function below

<Link
    href={{
        pathname: "/api/auth/register",
        query: {
            org_code: "org_af9078366f4"
        }
    }}
>
    register
</Link>

This code should also be passed along with the login method if you wish for a user to be logged into a specific organization.

<Link
    href={{
        pathname: "/api/auth/login",
        query: {
            org_code: "org_af9078366f4"
        }
    }}
>
    login
</Link>

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

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
Talk to us