Add Kinde auth to your codebase

Once you have completed the onboarding process, you are ready to add Kinde auth to your codebase.

What you need

Link to this section

• A Kinde account with Admin or Engineer permission
• Familiarity with your preferred programming language and framework

Quickstart

Link to this section

1. Create a new application in Kinde

Link to this section

During the onboarding process, you created an application in Kinde. You can use this application by going to your Kinde dashboard and selecting View details on that application tile. Skip to the next step (use a starter kit or install manually).

If you want to start over, follow the steps:

1. Go to your Kinde dashboard and select Add application.

2. Enter a name for the application (e.g., “My Next.js App”), select the type of application, and select Save.

   

   If you are unsure about which application type to select, head over to our SDK page and find the language or framework you are using. For backend/fullstack apps, select Back-end web. For client-side apps like web and mobile, select Front end and mobile.

3. Select the application language/framework (e.g., Next.js) and select Save.

   

2. Use a starter kit or install manually

Link to this section

On the Quick start page of your application, you have two options:

• Starter kit: If you are starting a brand new project or you just want to have a play around, using one of our starter kits gives you a ready-to-use project with Kinde already integrated with your tech of choice. Grab a starter kit from GitHub.
• Existing codebase: If you already have a project, you can install the SDK manually. Follow the instructions for your selected SDK.

3. Set callback and redirect URLs

Link to this section

On the Quick start page, set the callback and redirect URLs for your app.

For development, the URLs will be something like http://localhost:3000/ and for production, this will be your live production URL (e.g., https://myapp.com).

These define where a user goes when they sign in to your app. You need to set these to enable users to sign up.

Enter your local development URL to get started.

http://localhost:3000 is an example of a commonly used local development URL. It should be replaced with the URL where your app is running.

You can update or remove them from the Details page of your application.

You can add more URLs later, when your production environment is ready to go live or you set up a custom domain.

4. Get app keys

Link to this section

1. Go to the Details page of your application to find your app keys.

2. Copy the following:

   • Domain (yourbrandname.kinde.com or your custom domain)
   • Client ID
   • Client secret (for back-end and M2M apps)

5. Add app keys to the .env file

Link to this section

Your code base will include an .env file (or something similar) for storing configuration information. Add the Kinde app details you copied from the Details page to your .env file.

Here’s an example from the Next.js app router SDK:

.env

KINDE_CLIENT_ID=<your_kinde_client_id>
KINDE_CLIENT_SECRET=<your_kinde_client_secret>
KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

Protect your client secret

Make sure you do not commit your client secret to source control, by adding your .env file to your .gitignore file.

6. Test user registration

Link to this section

1. Run your app locally and select the Sign up button. You’ll be redirected to the Kinde login page.

   

2. Complete the sign-up process and you’ll be redirected back to your app’s dashboard page. If you run into an issue, take a look at the common error codes page.

3. Go to your Kinde dashboard > Users to find the user profile you just created.

   

   Here, you can edit this user’s profile details and even perform admin actions like suspending or deleting the user. Read more about user management in Kinde.

   Users created in different applications all add to the same environment in your Kinde business.

Build and deploy

Link to this section

Set up a test environment

Link to this section

Kinde comes with a default production environment, and the ability to create additional non-production environments. This is useful for testing in different environments without having to sign up for a new account.

To create a test environment, do the following:

1. Go to your Kinde dashboard, and select the arrow next to the production environment dropdown (top-left of the screen). A pop-up appears.

   

2. Select All environments

3. On the Environments page, select Add environment

4. Enter a Name (e.g., “Test”) and a URL-friendly Code for the environment (e.g., “test”), then select Save. A new environment is created.

5. Select the Switch to this environment button to switch to the new environment.

   Every new environment comes with two default applications:

   • Back-end web - for connecting a server-side application
   • Front-end and mobile - for connecting a client-side application

   Your Kinde domain for this environment will be in the following format:

   https://<yourbrandname>-<env-code>.<your-region>.kinde.com
   e.g: https://yourbrandname-test.au.kinde.com

   Kinde free plan allows you to create only one non-production environment. If you want to create more (e.g., dev, staging), you will need a paid plan. See Kinde pricing for more details.

Register your APIs

Link to this section

If your app communicates with back-end APIs, register them with Kinde so they can be included in the aud claim of access tokens.

1. Go to Settings > Environment > APIs.
2. Select Add API.
3. Enter an API name and Audience (a unique identifier — typically a short code or the API URL).
4. Select Save.
5. Select Applications in the left menu, then select the three dots next to the relevant app and choose Authorize application.

See the full Register and manage APIs guide for token request examples and managing scopes.

Use Kinde Management API to automate admin tasks

Link to this section

The Kinde Management API lets you automate admin tasks such as managing users, roles, permissions, and applications. To get started:

1. Go to your Kinde dashboard and select Add application.

2. Give it a name and select Machine to machine as the type, then select Save.

3. Go to the APIs page, select the three dots next to the Kinde Management API and choose Authorize application.

4. Select the three dots again and choose Manage scopes. Enable only the scopes you need, then select Save.

5. Go to Details page and copy the Domain, Client ID and Client secret.

6. Use the client_credentials grant type to get a token and make authorized requests to the Kinde Management API. See: Call the Management API.

7. You can also get a test token from the Quick start page for testing purposes.

   Use dashboard tokens for testing only

   Do not embed dashboard-generated Management API tokens in client-side code or long-lived production jobs. For production, request tokens server-side via the machine-to-machine client credentials flow and store secrets in your secure environment configuration.

See the full Kinde Management API reference for available endpoints and usage examples.

Deploy to production

Link to this section

The production deployment process varies by hosting provider and application stack. Use these steps as a general checklist when you deploy your Kinde auth app to production:

1. Create a production build of your application and deploy it to your live server.
2. Note your live URLs and update the callback and redirect URLs in your Kinde dashboard.
3. Update environment variables on your application server so they match the new URLs.
4. Redeploy your application with the updated configuration.
5. Test the authentication flow on your live server.

For more detail, see:

• Prepare your production environment to go live.
• Deploy your app to Vercel, Netlify, or Cloudflare Workers.

Advanced developer topics

Link to this section

Here are some advanced developer topics to explore:

• Customize with Workflows
• Add and manage webhooks
• Copy configuration across environments
• End to end testing your Kinde apps

Next steps

Link to this section

Now that you have added Kinde auth to your codebase, here are some next steps:

• Common setup tasks with Kinde.
• Error codes & troubleshooting.