Getting Started with Next.js Authentication Using Clerk

Authentication is a crucial aspect of modern development, but implementing it securely can be challenging. Here is Clerk - a powerful authentication and user management solution that seamlessly integrates with Next.js. In this guide, I walk through setting up Clerk in a Next.js application and explore its key features.

What is Clerk?

Clerk is a complete authentication and user management solution that provides pre-built components and APIs for handling user sign-up, sign-in, and profile management. It supports multiple authentication methods;

Email and password
Social logins (Google, Github, etc)
Multi-factor authentication (MFA)
Passwordless authentication

Understanding Clerk’s Benefits

Before diving into the implementation, let’s understand why Clerk stands out as an authentication solution:

Clerk provides a complete authentication and user management platform with pre-built components and APIs for handling:

Email and Password: Traditional authentication with robust security
Social Logins: Seamless integration with providers like Google, GitHub, and more
Multi-factor Authentication (MFA): Enhanced security for sensitive applications
Passwordless Authentication: Modern authentication via magic links and one-time codes

Getting Started

Setting Up Your Next.js Project

First, let’s create a new Next.js project with App Router:

npx create-next-app@latest my-auth-app
cd my-auth-app

1. Installing and Configuring Clerk

Install the Clerk SDK This give you access to prebuilt components, React hooks and helpers to make user authentication easier.

Create an account at clerk.dev and get your API keys from the dashboard.

npm install @clerk/nextjs

2. Set your Clerk API keys

Add the following keys to your .env.local file. These keys can always be retrieved from the API Keys page on your Clerk Dasboard.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
CLERK_SECRET_KEY=...

3. Wrap `clerkMiddlware()` to your app

clerkMiddleware() grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users.

Create a middleware.ts file.

If you’re using the /src directory, create middleware.ts in the /src directory.

In your middleware.ts file, export the clerkMiddleware() helper:

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See clerkMiddleWare() reference to learn how to require authentication for specific routes.

4. Implementing Authentication Components

Create a sign-in page with Clerk’s pre-built component:

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignIn appearance={{
        elements: {
          rootBox: "mx-auto",
          card: "shadow-lg"
        }
      }} />
    </div>
  );
}

<SignedIn>: Children of this component can only be seen while signed in.

5. Select your preferred router to learn how to make this data available across your entire app:

App Router

import { ClerkProvider, SignedIn } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </ClerkProvider>
  )
}

Next Steps

Now that you have a solid foundation for authentication in your Next.js application, consider exploring

Custom Styling: Customize Clerk components to match your brand
Advanced Features: Implement organizations and team management
Webhooks: Set up webhook handlers for authentication events
Role-Based Access: Add role-based authorization to your routes

Conclusion

Implementing secure authentication doesn’t have to be complicated. With Clerk and Next.js, you can create a robust authentication system that’s both secure and user frienly. emember to follow security best practices and regularly update your dependencies to maintain a secure application.

Resources