Deploy a Kinde App on Netlify

Netlify is a platform for hosting web applications with features like continuous deployment, serverless functions, and a global content delivery network. This guide will walk you through the steps to deploy your Kinde project to Netlify, from setup to deployment.

What you need

Link to this section

• A Netlify account (sign up for free)
• A GitHub account (this guide uses GitHub for the project source)
• A Kinde application running Next.js or a starter kit such as the Next.js starter kit.

Step 1: Set up your project in Netlify

Link to this section

1. Sign in to Netlify and go to the main dashboard page.

2. If this is your first Netlify project, select Import an existing project > Import from Git option.

   1. If you already have other Netlify projects, select Add new project > Import an existing project.

3. On the Connect to Git provider page, select GitHub from the list.

4. Pick your project repo from the list to continue, or follow the prompts to select your repo.

5. Enter a name for your site. This will form the site URL.

6. Scroll down and select Add environment variables > Import from a .env file to configure your Kinde app.

   

7. Enter the environment variables from your project’s .env file or the .env.local file (if using the Kinde starter kit). You can also find the project keys in your Kinde application > Quick start page.

8. Select Deploy to deploy your site. A green Published label appears when the deployment is complete. It shows your site name.

   

   If your deployment fails due to TypeScript type checking errors, you can adjust your TypeScript configuration. In your tsconfig.json, set "strict": true to "strict": false to disable strict type checking during the build.

9. If you want to change the URL of your site, select Project configuration in the left menu.

   1. Select Change project name.
   2. Enter a new project name (e.g, kindenetlifydemo) and select Save to update your site URL.

   Once the site is deployed, take note of your Netlify project URL such as https://<yoursitename>.netlify.app, as you’ll need it in the next section to update your Kinde configurations.

Step 2: Configure your Kinde app for deployment

Link to this section

1. Go to your Kinde dashboard and select View details for the relevant application.

2. Scroll down to the Callback URLs section on the Details page.

3. Update the Allowed callback URLs with your new Netlify site details. The format should be: https://<yoursitename>.netlify.app/api/auth/kinde_callback

4. Update the Allowed logout redirect URLs referencing your Netlify app URL, https://<yoursitename>.netlify.app

   

5. Select Save.

Step 3: Update Netlify environment variables

Link to this section

Currently, Netlify is configured with our local project variables. To reference our real project, we need to update the relevant .env variables.

1. Go to your Netlify dashboard and select your site.

2. Select Project configuration, then select Environment variables, to view all your application environment variables.

3. Select the KINDE_SITE_URL environment variable by expanding the section.

4. Select Options > Edit to make the variable editable.

   

5. Replace the old value of http://localhost:3000 with your Netlify site URL (e.g., https://<yoursitename>.netlify.app )

   

6. Select Save variable.

7. Using your Netlify credentials, repeat from step 3 to update the following:

   • KINDE_POST_LOGOUT_REDIRECT_URL
   • KINDE_POST_LOGIN_REDIRECT_URL

Step 4: Redeploy your project in Netlify

Link to this section

For the changes in the new environment variables to apply correctly, you must redeploy your Netlify project.

1. Go to Deploys section of your project, select Trigger deploy > Deploy project without cache.

   

   Do not select Deploy project as this will preserve the old environment variables.

   Your site redeploys to Netlify.

2. Once all checks are finished, select the Open production deploy button to inspect your Kinde project and start authenticating.

   

   

   You are now all set with a fully functional Kinde project hosted on Netlify.

Congratulations!

Link to this section

Once you’re sure everything is running smoothly you might consider how you can enhance your setup. Netlify offers features such as custom domains, automatic deployments, and serverless functions that you can explore.

If you need help, reach out to us at support@kinde.com. You can also connect with the team and other developers in the Kinde Slack community or Discord. We’re here to support you.

Happy building!