> ## Documentation Index > Fetch the complete documentation index at: https://docs.ouim.me/llms.txt > Use this file to discover all available pages before exploring further. # Next.js App Example > Complete Next.js application example with logto-authkit This example demonstrates how to integrate logto-authkit into a Next.js application with both client and server-side authentication. ## Complete Example Install logto-authkit and required dependencies: ```bash theme={null} npm install @ouim/logto-authkit @logto/react ``` Set up the auth provider in your root layout: ```tsx app/layout.tsx theme={null} import { AuthProvider } from '@ouim/logto-authkit' import './globals.css' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` Build your landing page with authentication: ```tsx app/page.tsx theme={null} 'use client' import { useAuth, UserCenter } from '@ouim/logto-authkit' import Link from 'next/link' export default function Home() { const { user, isLoadingUser, signIn } = useAuth() return (

Welcome to logto-authkit

A simplified authentication solution for Next.js applications. Get started with secure, production-ready auth in minutes.

{isLoadingUser ? (
) : user ? (

Welcome back, {user.name || user.email}!

You are successfully authenticated.

Go to Dashboard
) : (

Sign in to access your personalized dashboard

)}
) } ``` Build a dashboard with automatic authentication protection: ```tsx app/dashboard/page.tsx theme={null} 'use client' import { useAuth, UserCenter } from '@ouim/logto-authkit' import Link from 'next/link' export default function Dashboard() { const { user, isLoadingUser } = useAuth({ middleware: 'auth', redirectTo: '/signin', }) if (isLoadingUser) { return (
) } return (

Dashboard

Welcome to your protected dashboard

User Profile

User ID
{user?.id}
Name
{user?.name || 'Not provided'}
Email
{user?.email || 'Not provided'}

Authentication Status

Authenticated

You have successfully authenticated and can access protected resources.

View API Response →
) } ``` Add a protected API route using server-side authentication: ```ts app/api/user/route.ts theme={null} import { NextRequest, NextResponse } from 'next/server' import { verifyNextAuth } from '@ouim/logto-authkit/server' export async function GET(request: NextRequest) { const result = await verifyNextAuth(request, { logtoUrl: process.env.LOGTO_ENDPOINT!, audience: process.env.LOGTO_API_RESOURCE!, }) if (!result.success) { return NextResponse.json( { error: result.error }, { status: 401 } ) } // Access authenticated user info const { auth } = result return NextResponse.json({ userId: auth.userId, isAuthenticated: auth.isAuthenticated, payload: auth.payload, }) } ``` Create the required callback and sign-in pages: ```tsx app/callback/page.tsx theme={null} 'use client' import { CallbackPage } from '@ouim/logto-authkit' export default function Callback() { return ( { console.log('Authentication successful') }} onError={(error) => { console.error('Authentication failed:', error) }} /> ) } ``` ```tsx app/signin/page.tsx theme={null} 'use client' import { SignInPage } from '@ouim/logto-authkit' export default function SignIn() { return } ``` Create a `.env.local` file with your Logto configuration: ```bash .env.local theme={null} NEXT_PUBLIC_LOGTO_ENDPOINT=https://your-tenant.logto.app NEXT_PUBLIC_LOGTO_APP_ID=your-app-id NEXT_PUBLIC_API_RESOURCE=https://api.yourapp.com NEXT_PUBLIC_APP_URL=http://localhost:3000 # Server-side variables LOGTO_ENDPOINT=https://your-tenant.logto.app LOGTO_API_RESOURCE=https://api.yourapp.com ``` ## Server-Side Authentication logto-authkit supports server-side authentication for API routes and middleware: ```ts app/api/protected/route.ts theme={null} import { NextRequest, NextResponse } from 'next/server' import { verifyNextAuth } from '@ouim/logto-authkit/server' export async function GET(request: NextRequest) { const result = await verifyNextAuth(request, { logtoUrl: process.env.LOGTO_ENDPOINT!, audience: process.env.LOGTO_API_RESOURCE!, }) if (!result.success) { return NextResponse.json( { error: 'Unauthorized' }, { status: 401 } ) } return NextResponse.json({ message: 'Protected data', userId: result.auth.userId, }) } ``` ```ts middleware.ts theme={null} import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { verifyNextAuth } from '@ouim/logto-authkit/server' export async function middleware(request: NextRequest) { // Only protect API routes if (request.nextUrl.pathname.startsWith('/api/protected')) { const result = await verifyNextAuth(request, { logtoUrl: process.env.LOGTO_ENDPOINT!, audience: process.env.LOGTO_API_RESOURCE!, }) if (!result.success) { return NextResponse.json( { error: 'Unauthorized' }, { status: 401 } ) } } return NextResponse.next() } export const config = { matcher: '/api/protected/:path*', } ``` ## Features Demonstrated * **Next.js App Router**: Full integration with App Router * **Client-Side Auth**: Protected pages with automatic redirects * **Server-Side Auth**: Secure API routes with JWT verification * **Environment Variables**: Proper configuration management * **Popup Sign-In**: Optional popup-based authentication * **User Center**: Pre-built UI component for user management ## Running the Example ```bash theme={null} npm run dev ``` Visit `http://localhost:3000` to see your Next.js app with authentication. ## Next Steps Advanced route protection patterns Learn more about server-side auth