Setting Up Authentication with Clerk

In this guide, we will set up authentication in our Next.js application using Clerk. Clerk is an easy-to-use authentication service that simplifies the process of adding authentication to your applications. This guide will walk you through the process of integrating Clerk into your Next.js project.

Why Choose Clerk?

Clerk offers a seamless and straightforward experience for integrating authentication into your applications. Some of the key features include:

• Easy integration with various frameworks like Next.js, React, and more.
• Support for multiple authentication methods, including email and Google sign-in.
• Out-of-the-box email verification.
• A user-friendly dashboard for managing users and configurations.
• Highly customizable authentication forms and flows.

Getting Started with Clerk

Let's begin by setting up an account with Clerk and creating a new application.

Step 1: Create a Clerk Account

Visit clerk.com and sign up for a free account. Once you have created an account, you will have access to the Clerk dashboard.

Step 2: Create a New Application

In the Clerk dashboard, create a new application. For this example, we will name our application "GPT Genius". Use the default settings for now, as we can customize them later.

Step 3: Configure Authentication Providers

Set up the authentication providers you want to use. In this example, we will enable email and Google authentication. Clerk supports many providers, which you can configure as needed.

Integrating Clerk with Next.js

Now that we have our Clerk application set up, let's integrate it with our Next.js project.

Step 4: Install Clerk Package

npm install @clerk/nextjs

Step 5: Set Up Environment Variables

Create a .env.local file in the root of your project and add the following environment variables:

CLERK_FRONTEND_API=
CLERK_API_KEY=

Replace <YOUR_CLERK_FRONTEND_API> and <YOUR_CLERK_API_KEY> with the actual values from your Clerk dashboard.

Step 6: Wrap Your Application with ClerkProvider

In your _app.js or _app.tsx file, wrap your application with the ClerkProvider:

        import { ClerkProvider } from "@clerk/nextjs";
		function MyApp({ Component, pageProps }) {
    		return (
        		<ClerkProvider {...pageProps}>
           		<Component {...pageProps} />
       		  </ClerkProvider>);}
	    export default MyApp;
		

Step 7: Set Up Middleware

Create a new file named middleware.ts in the root of your project and add the following code:

import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

This middleware will ensure that authentication is required for all routes except those specified as public.

Step 8: Define Public Routes

In your middleware file, specify which routes should be publicly accessible:

import { authMiddleware } from "@clerk/nextjs/server";
export default authMiddleware({
  publicRoutes: ["/"]
});
export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

This configuration ensures that only the home page ("/") is publicly accessible, while all other routes require authentication.

Step 9: Test Authentication

Run your Next.js development server and test the authentication setup:

npm run dev

Navigate to your application and try accessing protected routes. You should be prompted to sign in using the methods you configured (email or Google).

Step 10: Customize Authentication Pages

You can further customize the sign-in and sign-up pages provided by Clerk. Refer to the Clerk documentation for details on how to customize these pages to match your application's design.

Conclusion

By following these steps, you have successfully integrated Clerk authentication into your Next.js application. Clerk makes it easy to add robust authentication features with minimal configuration, allowing you to focus on building your application's core functionality.