Next.js 14 Authentication with Clerk

Next.js 14 Authentication with Clerk

Install nextjs npx create-next-app@latest https://nextjs.org/docs/getting-started/installation

Install the following

Clerk

npm install @clerk/nextjs

https://clerk.com/docs/quickstarts/nextjs

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_Zmlyc3Qtd2lsZGNhdC03LmNsZXJrLmFjY291bnRzLmRldiQ

CLERK_SECRET_KEY=sk_test_yZkAi9ZB6GF5hZxasIvd0sqBoxbfgyi1Wkc4KyZ9Nd

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in

NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/

NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

app\layout.tsx

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//app\layout.tsx import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.css' import { ClerkProvider } from '@clerk/nextjs'; import Header from '@/components/header';   const inter = Inter({ subsets: ['latin'] })   export const metadata: Metadata = {   title: 'Create Next App',   description: 'Generated by create next app', }   export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (                       <clerkprovider>           <header>           {children}                           ) } </header></clerkprovider>

app\page.tsx

?

1 2 3 4 5 6 7 8 9 10

//app\page.tsx import Image from 'next/image'   export default function Home() {   return (     <main className="flex min-h-screen flex-col items-center justify-between p-24">       HOmepage     </main>   ) }

components\header.tsx

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//components\header.tsx import { UserButton, auth } from '@clerk/nextjs'; import Link from 'next/link';   export default async function Header() {     const { userId } = auth();       return (         <div className='bg-gray-600 text-neutral-100'>             <div className='container mx-auto flex items-center justify-between py-4'>                 <Link href='/'>Home</Link>                 <div>                     {userId ? (                         <div className='flex gap-4 items-center'>                             <Link href='/dashboard'>Dashboard</Link>                             <UserButton afterSignOutUrl='/' />                         </div>                     ) : (                         <div className='flex gap-4 items-center'>                             <Link href='/sign-up'>Sign up</Link>                             <Link href='/sign-in'>Sign In</Link>                         </div>                     )}                 </div>             </div>         </div>     ); }

app\sign-up\[[...sign-up]]\page.tsx

?

1 2 3 4 5 6 7 8 9 10 11

//app\sign-up\[[...sign-up]]\page.tsx import { SignUp } from "@clerk/nextjs";   export default function Page() {     return (         <div className='flex items-center justify-center flex-col gap-10'>             <h1 className='text-4xl font-bold mt-20'>Sign UP</h1>             <SignUp />         </div>     ); }

app\sign-in\[[...sign-in]]\page.tsx

?

1 2 3 4 5 6 7 8 9 10 11

//app\sign-in\[[...sign-in]]\page.tsx import { SignIn } from "@clerk/nextjs";   export default function Page() {     return (         <div className='flex items-center justify-center flex-col gap-10'>             <h1 className='text-4xl font-bold mt-20'>Sign In</h1>             <SignIn />         </div>     ); }

app\dashboard\page.tsx

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//dashboard\page.tsx import { auth, currentUser } from '@clerk/nextjs';   export default async function DashboardPage() {     const { userId } = auth();     const user = await currentUser();       if (!userId || !user) {         return <div>You are not logged in</div>;     }       return (         <div className='mt-10 text-start max-w-xl mx-auto bg-neutral-200 p-5 rounded'>             <h1 className='text-4xl font-bold'>Welcome</h1>             <ul className='list-none mt-10'>                 <li className='mb-2'>                     <span className='font-semibold'>First Name:</span> {user.firstName}                 </li>                 <li className='mb-2'>                     <span className='font-semibold'>Last Name:</span> {user.lastName}                 </li>                 <li className='mb-2'>                     <span className='font-semibold'>Email:</span>{' '}                     {user.emailAddresses[0].emailAddress}                 </li>             </ul>         </div>     ); }

app\about\page.tsx

?

1 2 3 4

//app\about\page.tsx export default function AboutPage() {     return <div>AboutPage</div>; }

run C:\nextjs>npm run dev