This is a simple tutorial on adding authentication to your Next14 app using Kinde. 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.
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.
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.
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.
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.
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.
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
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
Top comments (0)