A starter template using Next.js and Kinde for authentication. See live demo.
Create a Kinde account if you don't already have one.
Settings > Applications
.Add application
in the top right.Back-end web
as the application type.Save
.Quick start
screen, select Next.js
as the technology and Save
.Create a Vercel account if you don't already have one.
Settings > Applications > [Your app] > Details
.App keys
section:
Domain
Client ID
Client secret
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.
KINDE_ISSUER_URL
: Domain
value.KINDE_CLIENT_ID
: Client ID
value.KINDE_CLIENT_SECRET
: Client secret
value.[!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
In Kinde, go to Settings > Applications > [Your app] > View details
.
Add your callback URLs in the relevant fields:
http://localhost:3000/api/auth/kinde_callbackhttps://[your-vercel-main-production-url].vercel.app/api/auth/kinde_callbackhttps://*[your-vercel-slug].vercel.app/api/auth/kinde_callback
http://localhost:3000https://[your-vercel-main-production-url].vercel.apphttps://*[your-vercel-slug].vercel.app
Then Save
.
Clone this repository.
git clone https://github.com/kinde-starter-kits/kinde-nexjs-vercel-starter
Create a Kinde account.
Create a backend application.
Add your callback URLs in the relevant fields for your application in Kinde:
http://localhost:3000/api/auth/kinde_callback
http://localhost:3000
Fill in the missing environment variables in .env.local.example
Install the dependencies with npm run install
Start the development server with npm run dev