How i Set Up Authentication in Next js using Kinde Auth with Examples

Authentication is essential for modern web applications. With Next.js introducing the App Router and improved middleware support, implementing authentication is now smoother than ever. In this guide, we'll walk through a real-world setup using Kinde Auth and explore a few alternative solutions like Supabase Auth, Clerk, and Auth.js.

Why Choose Kinde Auth for Next js?

Kinde offers a flexible authentication platform with built-in multi-factor authentication (MFA), role-based access control, and seamless integration with modern frameworks like Next.js. It's designed for developers who need security and scalability without complexity.

Setting Up Kinde Auth in Next js 15?

Step 1: Create a Kinde Project

Sign up at Kinde.
Create a new project and note down:
Kinde Domain
Client ID
Client Secret

Step 2: Add Environment Variables

In your .env.local file, add:

KINDE_DOMAIN=your_domain.kinde.com

KINDE_CLIENT_ID=your_client_id

KINDE_CLIENT_SECRET=your_client_secret

KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000

Step 3: Install the Kinde SDK

npm install @kinde-oss/kinde-auth-nextjs

Step 4: Add the Kinde Auth API Route

In app/api/auth/[kindeAuth]/route.js:

import { handleAuth } from '@kinde-oss/kinde-auth-nextjs/server';

export const GET = handleAuth();

Step 5: Protect Routes with Middleware

Create middleware.js at the root of your project:

import { withAuth } from '@kinde-oss/kinde-auth-nextjs/middleware';

export default withAuth({

loginPage: '/login',

});

export const config = {

matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],

};

Step 6: Set Up the Kinde Provider

Create a file app/AuthProvider.tsx:

"use client";

import { KindeProvider } from '@kinde-oss/kinde-auth-nextjs';

export function AuthProvider({ children }: { children: React.ReactNode }) {

return <KindeProvider>{children}</KindeProvider>;

}

Wrap your app in the provider in app/layout.tsx:

import { AuthProvider } from './AuthProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {

return <AuthProvider>{children}</AuthProvider>;

}

Step 7: Add Login and Logout Buttons

Use Kinde's built-in components:

"use client";

import { LoginLink, RegisterLink, LogoutLink } from '@kinde-oss/kinde-auth-nextjs/components';

export default function AuthButtons() {

return (

</div>

);

}

Step 8: Access User Data in Server Components

In app/dashboard/page.tsx:

import { getKindeServerSession } from '@kinde-oss/kinde-auth-nextjs/server';

export default async function Dashboard() {

const { isAuthenticated, getUser } = getKindeServerSession();

const user = await getUser();

if (!(await isAuthenticated())) {

return <p>Not authenticated</p>;

}

return <p>Welcome, {user?.email}</p>;

}

Login and Signup with Kinde

Kinde handles the authentication flow. Use the <LoginLink /> and <RegisterLink /> components to redirect users to Kinde’s hosted login/signup pages. No need for custom forms unless you want extended control.

Alternative Authentication Solutions

If Kinde isn’t the right fit for your project, consider these alternatives:

Supabase Auth

Offers email/password, OAuth, magic link authentication
Real-time database, user management, and storage out of the box
Tight integration with Next.js

Clerk

Fully managed auth with customizable UI components
Supports social login, multi-session management
Easily integrates with the App Router

Auth.js (NextAuth.js)

Highly customizable and open-source
Supports OAuth, email/password, custom providers
Easily integrated with Next.js middleware and server components

Best Practices

Use middleware to protect authenticated routes
Store credentials securely using environment variables
Wrap your app with an authentication provider
Test login/logout flows before going live

Conclusion

Next.js makes authentication simpler than ever with the App Router and native middleware support. Kinde Auth offers a robust, developer-friendly solution that takes minutes to set up. If you're looking for alternatives, Supabase Auth, Clerk, and Auth.js are all excellent options with seamless Next.js integration.

For detailed documentation, check: