An Easy Guide To Next14 Authentication With Kinde
Tags: kinde, nextjs, authentication, react
Published: 2024-06-01 01:08:25

This is a simple tutorial on adding authentication to your Next14 app using [Kinde](https://kinde.com/). To follow this tutorial, you need a Kinde account. Kinde is a powerful user authentication service that integrates in minutes. They offer an amazing free tier for their service and the signup process is straightforward.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmjzvd4rj32amsm47c71.jpg)


To continue the signup process, Kinde will ask you to add your business name and a domain name for Kinde to host your app. It also sets a default region for where your data will be stored, but you can modify it if necessary. 

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w1wmejrt2zq5n1opqhb.jpg)

After clicking next, it will ask you if you want to start a project from scratch or add Kinde to your existing codebase. Since we're adding Kinde to our Next.js app, I'll choose the latter.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9rw5w0948tvvyvv0lw3.jpg)

To provide the right docs, Kinde will also ask about the tech you're using on your app. We're using Next.js, so just click that and continue.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y65k3g85ullk2ecva31j.jpg)

To complete the signup process, you need to choose the ways your users can be authenticated with Kinde. By default, Kinde provides email authentication, but you can add other authentication providers like Google or GitHub.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eeul40i6i3tx5omb3du.jpg)

After the signup process is done, Kinde will lay out ways for you to integrate it into your app with their guides. You can just click on the connect to Next.js codebase option.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpt56m50xydvre0btp72.jpg)


You will be redirected to a quick start guide for adding Kinde to your existing Next.js project. Scroll down and copy the npm or yarn installation command to install the Kinde Next.js SDK as a dependency. Also, copy the environment variables provided by Kinde into a .env.local file.

```
npm i @kinde-oss/kinde-auth-nextjs
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvipba05w2uzn7zq796t.jpg)

We're almost done, the last thing you need to do is to create an api folder in your app directory, add an auth folder within it, within the auth folder a dynamic segment that looks like this [kindeauth], add a route.js file to it, and finally copy this inside of it.

```
import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();
```


🎉You're done! You've successfully added authentication using Kinde to your Next14 app.

To start your auth flow in your app, you use the LoginLink and RegisterLink components.

```
import {RegisterLink, LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";
<LoginLink>Sign in</LoginLink>
<RegisterLink>Sign up</RegisterLink>
```

🔥Happy coding!

You hear more from me on:
[X](https://x.com/code_withjoseph)