Next.js App Router v2

This SDK is for NextJS version 13+ and uses Server Side Components and App Router.

Document versions

This document is the most recent version of the NextJS App Router doc and fixes some issues in the v1 document. It is applicable for NextJS 13 and later.

• If you have already installed the NextJS App Router SDK, refer to the NextJS App Router v1 document.
• If you are using the Pages Router you can refer to either the NextJS Pages Router v2 document, or the older version NextJS Pages Router v1 SDK.

Register for a Kinde account

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 for a new project

The easiest way to get started is to use the NextJS starter kit, and watch a demo video.

Install for an existing project

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

Set callback URLs

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/api/auth/kinde_callback
   • Allowed logout redirect URLs - for example http://localhost:3000
3. Select Save.

Configure environment variables

Put these variables in a .env.local file in the root of your Next.js app. You can find these variables on your Kinde Settings > Applications > [Your app] > View details page.

• KINDE_CLIENT_ID - Your business’s unique ID on Kinde