Posted onOct 14, 2024

Implementing Authentication with Clerk in Next.js

#nextjs #clerk #authentication #reacthookform

Introduction

Hello! I'm Atsushi, a cloud engineer working at a SaaS company in Tokyo. Recently, I implemented authentication features for my personal AI chatbot project using Clerk, an authentication service. I'd like to share the insights I gained from this experience.

What is Clerk?

Clerk is a service that provides embeddable UI components, APIs, and an administrative dashboard for user authentication and management. It supports frontend frameworks like Next.js, React, and Remix.

In addition to authentication features, Clerk offers UI components that make it easy to implement sign-in and login screens. It also integrates with services like Supabase and Firebase.

Account Creation

To get started with Clerk:

Sign up atClerk's website by clicking the "Get started" button.
After creating an account, set up your application by providing a name and clicking "Create application".

Implementing Authentication Screens

Clerk provides UI components that make it easy to implement authentication screens. This guide focuses on implementation with Next.js using the App Router.

Prerequisites

Set environment variables in.env.local:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxx   CLERK_SECRET_KEY=xxx

Set up the Clerk Provider inapp/layout.tsx:

import{ClerkProvider}from'@clerk/nextjs'import{jaJP}from'@clerk/localizations'exportdefaultfunctionRootLayout({children,}:{children:React.ReactNode}){return(<ClerkProviderlocalization={jaJP}><html><body><main>{children}</main></body></html></ClerkProvider>)}

Implement Middleware inmiddleware.ts:

import{clerkMiddleware}from'@clerk/nextjs/server'exportdefaultclerkMiddleware()exportconstconfig={matcher:['/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)','/(api|trpc)(.*)',],}

Using Standard Components

Clerk provides ready-to-use components like<SignUp /> and<SignIn /> that can be easily implemented:

import{SignUp}from'@clerk/nextjs'exportdefaultfunctionPage(){return<SignUp/>}

Custom Implementation with React Hook Form

For more control over the form, you can use React Hook Form with Clerk's helpers:

Create a custom hook (useSignInForm):

import{useSignIn}from'@clerk/nextjs'import{zodResolver}from'@hookform/resolvers/zod'import{useForm}from'react-hook-form'import{z}from'zod'// ... (schema and type definitions)exportconstuseSignInForm=()=>{const{isLoaded,setActive,signIn}=useSignIn()// ... (form setup and submit handler)}

Create a Form Provider:

import{useSignInForm}from'@/hooks/sign-in/use-sign-in'import{FormProvider}from'react-hook-form'constSignInFormProvider=({children}:Props)=>{const{methods,onHandleSubmit,loading}=useSignInForm()return(<FormProvider{...methods}><formonSubmit={onHandleSubmit}>{children}</form></FormProvider>)}

Create the Form component:

import{useFormContext}from'react-hook-form'constLoginForm=()=>{const{register,formState:{errors},}=useFormContext()return(<><h2>Login</h2><input{...register('email')}/><input{...register('password')}/></>)}

Implement the login page:

importSignInFormProviderfrom'@/components/forms/sign-in/form-provider'importLoginFormfrom'@/components/forms/sign-in/login-form'constSignInPage=()=>{return(<SignInFormProvider><LoginForm/><buttontype="submit">Login</button></SignInFormProvider>)}

Retrieving Authentication Information

To get the user ID after sign-up:

import{currentUser}from'@clerk/nextjs/server'constuser=awaitcurrentUser()constid=user.id

Conclusion

Clerk significantly simplifies the implementation of authentication features.
Its flexibility allows for easy integration with popular tools like React Hook Form and Zod.
However, for Next.js projects, alternatives like Auth.js or Supabase's built-in authentication should also be considered depending on the use case.