# Kinde Auth NextJS SDK
The Kinde Auth NextJS SDK provides a comprehensive authentication solution for Next.js applications, supporting both App Router and Pages Router architectures. This SDK implements OAuth 2.0 and OpenID Connect protocols to handle user authentication, authorization, session management, and multi-organization support. Built by Kinde, it offers seamless integration with minimal configuration required through environment variables.
The SDK provides server-side session management, client-side React hooks and components, middleware for route protection, and utilities for managing feature flags, permissions, roles, and user organizations. It supports flexible authentication flows including login, registration, organization creation, and portal access, with built-in token refresh mechanisms and secure cookie-based session storage.
## APIs and Key Functions
### Authentication Handler Setup
Server-side authentication handler that manages all OAuth 2.0 flows including login, logout, callback, registration, and organization creation.
```typescript
// app/api/auth/[...kindeAuth]/route.ts
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();
```
### Server Session Management
Access authenticated user data and tokens on the server side in App Router components and API routes.
```typescript
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
export default async function ServerComponent() {
const { getUser, isAuthenticated, getPermission, getOrganization } = getKindeServerSession();
const isSignedIn = await isAuthenticated();
if (!isSignedIn) {
return
);
}
```
### Environment Configuration
Configure the SDK using environment variables in your `.env.local` file for secure credential management.
```bash
# .env.local
KINDE_CLIENT_ID=your_client_id
KINDE_CLIENT_SECRET=your_client_secret
KINDE_ISSUER_URL=https://yourdomain.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard
KINDE_COOKIE_DOMAIN=localhost
```
### Pages Router Integration
Use the SDK with Next.js Pages Router for authentication in traditional page-based applications.
```typescript
// pages/api/auth/[...kindeAuth].ts
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
export default handleAuth();
// pages/dashboard.tsx
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
export async function getServerSideProps(context) {
const { getUser, isAuthenticated } = getKindeServerSession(context.req, context.res);
const isSignedIn = await isAuthenticated();
if (!isSignedIn) {
return {
redirect: {
destination: "/api/auth/login",
permanent: false
}
};
}
const user = await getUser();
return {
props: { user }
};
}
export default function Dashboard({ user }) {
return
Welcome {user.given_name}
;
}
```
### Management API Client
Create a Kinde Management API client for administrative operations on users, organizations, and applications.
```typescript
import { createKindeManagementAPIClient } from "@kinde-oss/kinde-auth-nextjs/server";
export async function POST(req) {
const kindeClient = await createKindeManagementAPIClient();
try {
// Create a new user
const newUser = await kindeClient.usersApi.createUser({
profile: {
given_name: "John",
family_name: "Doe"
},
identities: [{
type: "email",
details: {
email: "john.doe@example.com"
}
}]
});
// Add user to organization
await kindeClient.organizationsApi.addOrganizationUsers({
org_code: "org_abc123",
users: [{ id: newUser.data.id }]
});
return Response.json({ success: true, userId: newUser.data.id });
} catch (error) {
return Response.json({ error: error.message }, { status: 500 });
}
}
```
## Use Cases and Integration
The Kinde Auth NextJS SDK is designed for modern Next.js applications requiring secure authentication and authorization with minimal configuration. It's ideal for SaaS applications with multi-tenant architecture, supporting organization-based access control and user management. The SDK seamlessly handles both server-rendered and client-rendered content through its dual-mode architecture, making it suitable for applications using Next.js 12+ with either App Router or Pages Router patterns.
Common integration patterns include protecting entire application sections using middleware, implementing role-based dashboards with server-side permission checks, managing multi-organization access with organization switchers, and integrating feature flags for gradual feature rollouts. The SDK's built-in token refresh mechanism ensures sessions remain valid without manual intervention, while the Management API client enables programmatic user provisioning and organization management for complex enterprise workflows. Support for custom claims and properties allows extension of user profiles with application-specific data.