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

//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 (
    
      
        
          

          {children}
        
      
    
  )
}

app\page.tsx

//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

//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

//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

//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

//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

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

run C:\nextjs>npm run dev