When building modern web applications, developers often look for powerful and flexible tools to handle user authentication and management. Firebase, with its easy-to-integrate authentication services, has been a go-to solution for many (including myself) for a while.

However, I recently discovered Clerk.js, a robust alternative with a focus on quick integration, customizability, and security.

In this article, we’ll dive into what Clerk.js is about, how it compares to Firebase, and how to use it for your project. Let’s get started!

What is Clerk.js?

At its core, Clerk.js is a comprehensive authentication and user management solution that offers easy integration into modern web applications. Its goal is to provide developers with a seamless user authentication experience without having to build the infrastructure from scratch.

Key Features

Here’s a closer look at what Clerk.js offers:

• Pre-built Authentication Components: Fully customizable UI elements for sign-up, sign-in, and user profile management.

• Session Management: Secure, built-in session handling with support for long-lived sessions and session revocation.

• Multi-factor Authentication (MFA): Secure your app with built-in MFA support to add an extra layer of security.

• Passwordless Authentication: Allow users to log in using magic links or one-time codes.

• Social Login Integrations: Integrate Google, Facebook, GitHub, and more with minimal setup.

• User Management Dashboard: Built-in user admin features to manage user roles, permissions, and account settings.

• React and Next.js Support: Seamless integration with modern frontend frameworks for quick and easy implementation.

Prerequisites

Let’s look at a simple example integration of Clerk.js.

To follow the hands-on tutorial, here are the prerequisites:

• Basic Understanding of JavaScript

• Basic Understanding of React (and React Hooks) or Next.js

• Node.js and npm Installed in your machine

• Code editor like VSCode

Step 1: Set Up Your Clerk.js Account

Head over to the Clerk.js website and sign up for a free account.

Next, you’ll need to create a new project to get your Clerk API keys, which will be used to integrate Clerk.js into your app. You can toggle which Sign in options you would like to include for your application. Let’s go with the default in this example.

Now, you will be taken to the Dashboard page where you can select which technology your app is built with to read the integration steps.

For this example, I will select Next.js.

Step 2: Install Clerk.js

Now, we’ll integrate Clerk.js into our project. For this example, we’ll use Next.js, but Clerk.js works with other frameworks like React and Vue.js.

1. Create a New Next.js Project (if you don’t have one)
   If you haven’t set up your project yet, create a new Next.js app by running:

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

2. Install Clerk.js Packages

    npm install @clerk/nextjs
   

3. Configure Clerk in Your App
   In your Next.js project, go to your root directory and create a .env.local file to store your Clerk environment variables. These will be shown to you in the Dashboard when you follow the guided steps.

   Add this line to your .env.local file:

    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
    CLERK_SECRET_KEY=
   

4. Update middleware.ts
   Next, we’ll import clerkMiddleware which will help us in the configuration.

    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)(.*)',
      ],
    };
   

5. Wrap app with ClerkProvider

   Finally, we will wrap our app with ClerkProvider at the entry point to make Clerk.js authentication globally accessible.

    // app/layout.tsx
   
    import React from 'react'
    import { ClerkProvider } from '@clerk/nextjs'
   
    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <ClerkProvider>
          <html lang="en">
            <body>{children}</body>
          </html>
        </ClerkProvider>
      )
    }
   

    // _app.tsx
   
    import { ClerkProvider } from '@clerk/nextjs'
    import type { AppProps } from 'next/app'
   
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <ClerkProvider {...pageProps}>
          <Component {...pageProps} />
        </ClerkProvider>
      )
    }
   
    export default MyApp
   

Step 3: Add Authentication Components

Now that Clerk.js is configured, you can add the pre-built authentication components like SignIn, SignUp, and UserProfile to your pages. It’s very quick and simple!

Create a Sign-in Page
Create a new file pages/sign-in.js and add the SignIn component:

import { SignIn } from '@clerk/nextjs';

const SignInPage = () => {
  return <SignIn />;
};

export default SignInPage;

Create a Sign-up Page
Similarly, create a sign-up page in pages/sign-up.js:

import { SignUp } from '@clerk/nextjs';

const SignUpPage = () => {
  return <SignUp />;
};

export default SignUpPage;

Create a Profile Page
To allow users to view and edit their profile, create a profile page in pages/user-profile.js:

import { UserProfile } from '@clerk/nextjs';

const UserProfilePage = () => {
  return <UserProfile />;
};

export default UserProfilePage;

Step 4: Protect Routes with Clerk.js

You can protect routes in your Next.js app by using the withAuth higher-order component (HOC) provided by Clerk.js.

Protect a Route
To protect a page so that only authenticated users can access it, wrap the component with withAuth:

import { withAuth } from '@clerk/nextjs';

const ProtectedPage = () => {
  return <div>This page is only accessible to authenticated users.</div>;
};

export default withAuth(ProtectedPage);

Redirect Unauthorized Users
You can also redirect unauthorized users to the sign-in page by adding a signInUrl option:

export default withAuth(ProtectedPage, {
  signInUrl: '/sign-in',
});

Step 5: Test Your Application

Run Your Application
Now that everything is set up, run your Next.js app using the command:

npm run dev

Go to http://localhost:3000/sign-in to see the Clerk.js sign-in component in action. You can also test the sign-up and profile pages by visiting /sign-up and /user-profile.

As you can see from the demo above, Clerk.js comes with pre-styled components that lets you quickly spin up a robust authentication flow. Below is a sample of what the Sign Up components looks like:

And once the user is signed in, there is also a pre-built component to view the user profile.

In the Clerk.js dashboard, you can also easily manage your users by viewing their profile or removing them if needed.

When to use: Clerk.js vs Firebase Authentication

Now that we have seen Clerk.js in action, let’s compare its use case with its Firebase counterpart.

Conclusion

That’s it! You’ve successfully integrated Clerk.js into your application. Clerk.js simplifies user authentication by providing easy-to-use, customizable components and secure session management, allowing you to focus on building your app without worrying about the complexities of user authentication.

Hope this article has been helpful! If it has, do leave a like, share the article and comment your thoughts below! Stay tuned for more! Cheers!

Let's Connect!

• Twitter

• LinkedIn

• GitHub

References

• https://clerk.com/docs/components/authentication/sign-in

• https://clerk.com/docs/components/clerk-provider

• https://clerk.com/docs/components/control/signed-in