The Easy Way to Add Authentication in Next.js 14 with Clerk

Secure Nextjs 14 App so easy with Clerk

3 min readFeb 14, 2024

Clerk is one of several library options that can be used for authentication in Next.js 14 and one of the easiest to use. Alternatives that you can use is NextAuth, Supabase Auth, etc.

Prerequisite:

Next 14
TailwindCSS
Clerk

Installation:

To install this prerequisite run this command

// NEXTJS 14
npx create-next-app@latest

// SUPABASE AUTH
npm install @clerk/nextjs

Setting Environment:

Add new file .env.local on root folder. Add your public and secret key from Dashboard Clerk

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<public_key_clerk>
CLERK_SECRET_KEY=<secret_key_clerk>

Integrate Clerk

1. Wrapping Layout with Clerk Provider

Update layout /app/layout.tsx
Import ClerkProvider from Clerk and wrap the html with ClerkProvider

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";
import…