Deploy an 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.

If you want to test what your app will look like with Kinde auth, follow this guide. Let’s deploy an app on Vercel!

What you need

Link to this section

• A Vercel account - You can sign up free using GitHub or your email.
• A GitHub account - You can use third-party Git sources, but this tutorial will focus on GitHub.
• A deployed application that uses Kinde OR a starter kit such as the NextJS starter kit.

(Optional) Set up a project using a Kinde starter kit

Link to this section

If you don’t have an existing project, create a project with a starter kit from Kinde.

1. Go to the Kinde Starter Kits Github repository and find the starter kit you want to use.
2. Copy the starter kit by selecting Use this template, then select Create a new repository. This copies the kit content to your Github account. (You can also clone the repo to your GitHub account if you want.)
3. Enter a name for the new repository, then select Create repository.
4. Open the directory of the new repo and find the file called .env.local.sample. You will need this later.

Step 1: Add a project in Vercel

Link to this section

1. Sign in to the Vercel Dashboard. You’ll see a list of all your projects if you have them.

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

   

3. Pick the repository you want to deploy to Vercel (e.g. the one you created above if you used the starter kit). This tutorial uses the project cloned from the previous step vercel-nextjs-kinde.

4. Select Import next to the project you want to deploy.

5. On the Configure Project page, expand the Environment Variables section:

   

6. Open the local .env file from your project and copy all the contents.

7. Paste the details into the Environment Variables section in Vercel. Vercel will autofill your keys and values for you.

   

8. Once you are done, select Deploy. Your project will deploy to Vercel. This may take a minute or two. When the process is finished, you will see the Congratulations! page.

9. Vercel generates a public URL for accessing your site. E.g. https://vercel-nextjs-kinde.vercel.app/. Copy the URL to use in a later step, where we will update the Kinde callback URLs.

Step 2: Set up your application in Kinde

Link to this section

1. Sign in to your Kinde business and go to Settings.

2. Select Applications.

3. If you do not have any applications yet, create one. Follow this guide.

4. If you have already created your app, select View details on the application tile.

5. Scroll to the App keys section and copy the Domain, Client ID, and Client secret somewhere you can access it again.

   

6. Scroll to the Callback URLs section and enter the URL you copied when you deployed on Vercel. The URL will be something like <NAME_OF_YOUR_PROJECT>.vercel.app, for example https://vercel-nextjs-kinde.vercel.app.

7. Enter the URL in the Application homepage URI field, the Application login URI field, and the Allowed logout redirect URLs field.

8. If you were using https://localhost:3000, replace it with your new domain in the Allowed callback URLs field. If you’re using a starter kit, this might be: https://vercel-nextjs-kinde.vercel.app/dashboard.

   

9. Select Save.

Step 3: Update Vercel environment variables

Link to this section

1. Open your Vercel project dashboard and navigate to your project. Select the three dots … menu, then Settings.

2. Select Environment Variables.

3. Edit the values of each environment variable by selecting three dots menu, then selecting Edit.

   

4. In the window that opens, enter the new value for the variable, then select Save.

5. Change the variables as follows, using Kinde values:

   • KINDE_CLIENT_ID
   • KINDE_CLIENT_SECRET
   • KINDE_ISSUER_URL (Domain in Kinde)

6. Change the variables as follows, using Vercel values:

   • KINDE_SITE_URL
   • KINDE_POST_LOGOUT_REDIRECT_URL
   • KINDE_POST_LOGIN_REDIRECT_URL

   You need to deploy your Vercel instance to apply the updated variables.

7. Go to the Deployments section.

8. Select the three dots … menu and select Re-deploy.

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

   Your website will now be fully functional and you can authenticate with Kinde!

   

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.

Congratulations 🎉 on deploying your Kinde project to Vercel!