Deploy a Kinde app on Vercel

Vercel is a cloud platform which enables seamless deployment directly from a GitHub repository, offering scalability, performance, and security. You can use it to streamline the development and deployment process of applications in a coherent and easy to manage way.

Let’s launch a Kinde App in it!

• A Vercel account
• A GitHub account - You can use third-party GitHub sources, but this tutorial will focus on GitHub
• A running application that uses Kinde OR a starter kit such as the Next.js starter kit to test it out

1. Find the starter kit you want to use.

2. Select Use this template, then Create a new repository.

   Alternatively, you can clone the repo to your GitHub account.

3. Enter a name and take note of it.

4. Inside the directory, find the file called .env.local.sample. You will need this later.

1. Sign in to Vercel. You should arrive at your Dashboard.

   

2. In the top right, select Add New and then Project.

   

   If you have them, you will see a list of all of your projects that are attached to your GitHub repository.

   

3. Select Import next to the related project you want to deploy.

   If you are using a starter kit such as the Next.js starter kit, this will be the name you entered when you copied the template. The Configure Project page opens.

4. Select Environmental Variables. The section should open.

   

5. Find your .env file.

6. Copy all the contents of the file and paste it in the section. Vercel will autofill your keys and values for multiple parameters for you.

7. If you are using a Starter Kit, it should look something like this:

   

   Later, we will need to change the redirects listed above. This is because we’re running the application off of Vercel, and not the localhost, so our domains have changed.

8. Select Deploy. The project will start deploying.

   

   Done!

   

Your application will deploy to production and be officially hosted.

Before we are done, we need to go back and update the callback URLs that are pointing to localhost:3000, otherwise, the authentication process will not work.

Lets fix that.

1. Find the domain that Vercel assigned you. It should be in the pattern of something like <NAME_OF_YOUR_PROJECT>.vercel.app. Our test example is https://vercel-next-js-sand.vercel.app.

2. Sign in to your Kinde account.

   

3. Go to Settings > Applications.

   

4. If you you haven’t added your application to Kinde yet:

   1. Select Add application. A dialog window opens.
   2. Enter a name for the app.
   3. Select the Back-end web application type. You need to do this if you’re using the Next.js starter kit. Note that front-end apps do not provide a client secret which we need for this to work.
   4. Select Save.

5. If you have already created your app, select View details on the relevant application.

6. Copy the following information somewhere you can access it again.

   • Domain

   • Client ID

   • Client secret

     We need these details to update our Vercel project.

   

7. Scroll down to the Callback URLs section. This is where we enter the Vercel URLs.

   For example, if you were using https://localhost:3000, replace that portion with your newly assigned domain. If you’re using a starter kit, this might be: https://vercel-next-js-sand.vercel.app/dashboard

   

8. Select Save.

1. Open your Vercel project dashboard.

2. Navigate to your project settings by selecting the three dots (…) menu, then Settings.

   

3. Select Environment Variables from the side menu.

   

4. Update the Kinde information with the new information from your Kinde app:

   • KINDE_CLIENT_ID
   • KINDE_CLIENT_SECRET
   • KINDE_ISSUER_URL (Domain in Kinde)

5. Update the following information with the Vercel domain information:

   • KINDE_SITE_URL
   • KINDE_POST_LOGOUT_REDIRECT_URL
   • KINDE_POST_LOGIN_REDIRECT_URL

6. Select Save.

   We will now need to redeploy our instance with the updated Environment Variables so our live site will become operational again.

1. In Vercel, go to the Deployments section.

   

2. Select the three dots (…) menu and select Redeploy.

   ⚠️ Do not select Use existing Build Cache as that will preserve the old environment variables

   

   You’re done! Your website should now be fully functional and you can authenticate with Kinde!

   

   Congratulations 🎉

   Remember, if you need any assistance with getting Kinde connected reach out to support@kinde.com.

   You can also join the Kinde community on Slack or the Kinde community on Discord for support and advice from the team and others working with Kinde.