Auth Integration

Add Clerk authentication to the shadcn admin dashboard template using the one-click registry install or by wiring the files manually.

Before you start:

We recommend integrating auth in a fresh Admin Dashboard Template project. Clerk keys are required for both setup methods, so create a Clerk application first and then add the keys to your local environment file.

What is Clerk?#

Clerk is a complete user management and authentication platform for Next.js apps. It adds hosted auth UI, session handling, OAuth providers, MFA, magic links, passkeys, and profile management to the Admin Dashboard Template out of the box.

Pre-built UI components like SignIn, SignUp, UserProfile, and UserButton.
Server-side auth helpers for App Router, such as auth() and currentUser().
Client-side hooks like useUser, useAuth, and useClerk.

Create a Clerk account & application#

Go to Clerk Dashboard and sign up or log in.
Click Create application.
Give your app a name, such as my-admin-template.
Choose the sign-in methods you want, such as email/password, Google, or GitHub.
Create the application and keep the API Keys page open.

Environment variables#

Add these values from Clerk Dashboard → your application → Configure → API Keys.

File: .env

Method 1: One-click install#

Use this method when you want the auth files installed by the shadcn registry command. It installs the Clerk package and adds the new auth files for the template.

Command:

After the install finishes, you still need to wire existing project files that the command should not overwrite: provider setup, private layout protection, and header profile rendering.

Add ClerkProvider to src/components/Providers.tsx.
Wrap src/app/(pages)/layout.tsx with AuthGuard.
Show the profile dropdown in the header only when the user is signed in. Jump to header.

Method 2: Manual setup#

Use this method when you want to add the Clerk files yourself or review every integration point before changing the template. Follow the steps below in order. Each step shows the file name first, then the code you need to add or update.

Step 1: Install SDK# - Install the Clerk SDK manually when you are not using the one-click registry command.

Command:

Step 2: Proxy# - Add the proxy file so Clerk can read and validate session cookies across the app.

File: src/proxy.ts

Step 3: Auth config# - Keep login, register, redirect, sidebar, and sign-out URLs in one config file.

File: src/configs/authConfig.ts

Step 4: Provider# - Wrap the app with ClerkProvider so Clerk hooks and components work throughout the template.

File: src/components/Providers.tsx

Step 5: Route protection# - Use server components so private admin routes render only for signed-in users.

File: src/components/auth/AuthGuard.tsx

File: src/components/auth/AuthRedirect.tsx

File: src/components/auth/GuestOnlyRoute.tsx

Then wrap the main admin layout so every route inside src/app/(pages) is protected automatically.

Replace the src/app/(pages)/layout.tsx with the following code:

Step 6: Auth pages# - Keep login and register pages visible only to signed-out users with GuestOnlyRoute.

File: src/app/(blank)/(auth)/layout.tsx

File: src/app/(blank)/(auth)/login/[[...login]]/page.tsx

File: src/app/(blank)/(auth)/register/[[...register]]/page.tsx

Step 7: Header & profile# - Use Clerk client hooks for session state, profile data, and sign-out behavior.

File: src/components/layout/Header.tsx

File: src/views/pages/profile/index.tsx

Test the integration#

Run the dev server with pnpm dev.
Visit the home page while signed out. You should be redirected to the login page.
Sign in or create an account with the Clerk form.
After sign-in, confirm the dashboard renders and the profile avatar appears in the header.
Sign out from the profile dropdown and confirm you return to the login page.
Visit a private route while signed out and confirm the redirectTo parameter is preserved.
Visit the login page while signed in and confirm GuestOnlyRoute redirects you back to the dashboard.

PreviousCustomization

NextRemove Fake DB & Use Real API