---
title: "Kinde Next.js Starter"
description: "A Next.js authentication starter template using Kinde, TypeScript, and TailwindCSS."
url: "https://vercel.com/templates/next.js/kinde-next-js-starter"
links:
  repository: "https://github.com/kinde-starter-kits/kinde-nextjs-vercel-starter"
  demo: "https://kinde-nextjs-starter.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=Kinde+Next.js+Starter&demo-description=A+Next.js+authentication+starter+template+using+Kinde%2C+TypeScript%2C+and+TailwindCSS.&demo-url=https%3A%2F%2Fkinde-nextjs-starter.vercel.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7aUoHS66nJxFemjst2pXdm%2F635c805edfe8531efe48c99c9eb293a0%2Fdemo-image.png&project-name=Kinde+Next.js+Starter&repository-name=kinde-next-js-starter&repository-url=https%3A%2F%2Fgithub.com%2Fkinde-starter-kits%2Fkinde-nextjs-vercel-starter&from=templates&skippable-integrations=1&env=KINDE_ISSUER_URL%2CKINDE_CLIENT_ID%2CKINDE_CLIENT_SECRET"
---

# Kinde Next.js Starter

A Next.js authentication starter template using Kinde, TypeScript, and TailwindCSS.

# Kinde Next.js Starter

![Composite of the project running in a browser window](https://github.com/kinde-starter-kits/kinde-nextjs-vercel-starter/blob/main/public/demo-image.png?raw=true)

A starter template using [Next.js](https://nextjs.org) and [Kinde](https://kinde.com) for authentication. See [live demo](https://kinde-nextjs-starter.vercel.app/).

## Pre-requisites

### 1. Create a Kinde account

Create a [Kinde](https://app.kinde.com/register) account if you don't already have one.

### 2. Add a back-end application in Kinde

1. Go to `Settings > Applications`.
2. Select `Add application` in the top right.
3. Give your application a name and make sure you select `Back-end web` as the application type.
4. Select `Save`.
5. In the `Quick start` screen, select `Next.js` as the technology and `Save`.

### 3. Create a Vercel account

Create a [Vercel](https://vercel.com/signup) account if you don't already have one.

## Get your environment variables from Kinde

1. In Kinde, go to `Settings > Applications > [Your app] > Details`.
2. Copy the following values in the `App keys` section:
   - `Domain`
   - `Client ID`
   - `Client secret`

## Deploy this template

When you click the **deploy** button below, you will be prompted to fill in the environment variables you copied previously. These are required to successfully deploy this template.

<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkinde-starter-kits%2Fkinde-nextjs-vercel-starter&env=KINDE_CLIENT_ID,KINDE_CLIENT_SECRET,KINDE_ISSUER_URL&envDescription=Find%20your%20application%20keys&envLink=https%3A%2F%2Fdocs.kinde.com%2Fget-started%2Fconnect%2Fgetting-app-keys%2F&project-name=kinde-nextjs-starter&repository-name=kinde-nextjs-starter&demo-title=Kinde%20Next.js%20Starter&demo-description=A%20Next.js%20authentication%20starter%20template%20using%20Kinde%2C%20TypeScript%20and%20tailwindcss.&demo-url=https%3A%2F%2Fkinde-nextjs-starter.vercel.app"><img src="https://vercel.com/button" alt="Deploy with Vercel"/></a>

- `KINDE_ISSUER_URL`: `Domain` value.
- `KINDE_CLIENT_ID`: `Client ID` value.
- `KINDE_CLIENT_SECRET`: `Client secret` value.

## After you deploy

### Set callback URLs

> [!IMPORTANT]
> Make sure to replace `[your-vercel-slug]` in the code examples below with your Vercel project or team slug, but keep the `*` (asterisk).
> [More info on wild card callback URLs in Kinde](https://docs.kinde.com/get-started/connect/callback-urls/?r=search#wildcards-in-callback-urls)

1. In Kinde, go to `Settings > Applications > [Your app] > View details`.

2. Add your callback URLs in the relevant fields:

   - #### Allowed callback URLs:

   ```bash
   http://localhost:3000/api/auth/kinde_callback
   https://[your-vercel-main-production-url].vercel.app/api/auth/kinde_callback
   https://*[your-vercel-slug].vercel.app/api/auth/kinde_callback
   ```

   - #### Allowed logout redirect URLs:

   ```bash
   http://localhost:3000
   https://[your-vercel-main-production-url].vercel.app
   https://*[your-vercel-slug].vercel.app
   ```

3. Then `Save`.

## Run locally

1. Clone this repository.
   ```sh
   git clone https://github.com/kinde-starter-kits/kinde-nexjs-vercel-starter
   ```
2. [Create a Kinde account](#1-create-a-kinde-account).
3. [Create a backend application](#2-add-a-backend-application-in-kinde).
4. Add your callback URLs in the relevant fields for your application in Kinde:

   - #### Allowed callback URLs:

   ```bash
   http://localhost:3000/api/auth/kinde_callback
   ```

   - #### Allowed logout redirect URLs:

   ```bash
   http://localhost:3000
   ```

5. Fill in the missing environment variables in `.env.local.example`
6. Install the dependencies with `npm run install`
7. Start the development server with `npm run dev`

## Related Templates

### [Clerk Authentication Starter](https://vercel.com/templates/next.js/clerk-authentication-starter)

A modern authentication and user management starter template, built with the Next.js App Router and powered by Clerk.

### [SaaStart: Auth0 + Next.js SaaS Starter Kit](https://vercel.com/templates/next.js/auth0-nextjs-saas-starter)

The Auth0 SaaS Starter Kit is a full-stack Next.js application designed to help you get started building B2B SaaS with Auth0 by Okta.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.