linkedinlogo
Zignuts Logo
Next
Next

How to set up Clerk authentication with passkeys in Next.js 16 App Router?

November 28, 2025

Clerk handles passkeys natively; wrap your app in <ClerkProvider> and use middleware for protected routes. For production-ready authentication implementations, experienced Next.js developers can help build and integrate secure authentication flows.

Example:-

Step 1: Install Package

Code

npm i @clerk/nextjs

Step 2: Environment Variables (.env.local)

Code

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Step 3: Root Layout (app/layout.tsx)

Code

import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

Step 4: Middleware (middleware.ts)

Code

import { authMiddleware } from '@clerk/nextjs/server';

export default authMiddleware({
  publicRoutes: ['/']
});

export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)']
};

Step 5: Protected Page (app/dashboard/page.tsx)

Code

import { UserButton, currentUser } from '@clerk/nextjs/server';

export default async function Dashboard() {
  const user = await currentUser();
  return (
    <div>
      <h1>Welcome {user?.firstName}</h1>
      <UserButton afterSignOutUrl="/" />
    </div>
  );
}

Step 6: Enable Passkeys (Clerk Dashboard > Authentication > Passkeys > Enable).

PreviousNext
Hire Now!

Need Help with Next Development ?

• Hire Now • Hire Now • Hire Now
bg-image

Related Q&A

Next
Next

calendar-iconNovember 28, 2025

clock-icon5 min read

How can we use the Partial Prerendering (PPR) advanced feature for faster initial loads in Next.js 16?
Next
Next

calendar-iconNovember 28, 2025

clock-icon5 min read

How can we solve type inference errors in Next.js 16 TypeScript configs for API routes?
Next
Next

calendar-iconNovember 28, 2025

clock-icon5 min read

How can we use FLUX.2 Pro integration in Vercel AI Gateway to solve slow image inference in Next.js apps?
Load More
Let's talk.
India
W210-217, Siddhraj Z Square, Opp. The Landmark, Kudasan Por Road, Kudasan, Gandhinagar - 382421
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck
PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.