Intro
Authentication is hard. It’s just another example of one of the things we deal with as web developers that can be solved in 100 different ways, and requires a well-thought-out decision. Thinking and decision making: my week in a nutshell. The first decision you need to make is whether you are going to roll your own authentication or use a third-party provider. If you decide to roll your own, you have a whole lot more thinking and decision-making ahead. There are a lot of considerations and specialized security-related knowledge required for this path if you intend to build an application that is secure. This post is going to cover a newer third-party provider option named Clerk.
Clerk overview
Clerk has been gaining popularity because it offers a fantastic developer experience. It comes with a first-class React integration that includes most of the popular React Frameworks. These integrations are powered by a full-featured, modern authentication service.
Auth features
Clerk offers an impressive array of authentication features that cater to a wide range of use cases and security requirements. Let's dive into these features and explore their benefits.
- User management: Clerk provides a comprehensive user management system that allows you to easily manage and monitor user accounts, including registration, login, and profile updates. This saves you time and effort in building and maintaining a custom user management solution.
- Organizations: The Organizations feature enables you to group users into separate entities, such as companies or teams. This is particularly useful for applications that require different levels of access or collaboration among various groups of users. With Clerk's Organizations, you can easily manage permissions, roles, and billing for each organization, streamlining your app's administrative tasks.
- Email and SMS authentication: Clerk supports both email and SMS authentication, allowing users to securely authenticate using their preferred method. This flexibility enhances the user experience and helps to ensure that your application is accessible to a wider audience.
- Password-less authentication: With Magic links and one-time passwords, Clerk offers password-less authentication options that eliminate the need for users to remember complex passwords. This not only improves the user experience, but also enhances security by reducing the risk of password-related attacks.
- Social login: Clerk's Social login feature allows users to authenticate using their existing social media accounts, such as Google or Facebook. This simplifies the registration and login process for users, while also potentially increasing conversion rates for your application.
- Multi-factor authentication (MFA): MFA adds an extra layer of security by requiring users to provide multiple forms of identification during the authentication process. With Clerk, you can easily enable MFA for your application, ensuring that your users' accounts are better protected against unauthorized access.
- Multi-sessions: Clerk's multi-session feature allows users to be logged into multiple accounts simultaneously, similar to popular apps like Figma. This is particularly useful for users who need to switch between personal and work accounts frequently, providing a seamless and efficient user experience.
- Device management: Device management is a powerful feature that allows users to view and manage all the devices they've used to access your application. This level of control is typically found in solutions provided by tech giants, and its inclusion in Clerk's feature set demonstrates their commitment to providing a robust and secure authentication experience.
- Password leak protection: Clerk's password leak protection feature informs users if their password has been detected in a data breach. By proactively alerting users to potential security risks, this feature helps to protect your users' accounts and further sets Clerk apart from its competitors.
Organizations, Multi-Sessions, and Device Management are features that really set Clerk apart from a lot of their competitors. If I’m working on a new application that requires any of these, I would be looking to Clerk as a top choice.
React framework integrations
Clerk’s React and NextJS integrations are extensive. I’m not going to do a walk-through on setting up a new React/NextJS app with Clerk because their website already offers a bunch of quick-start guides for many of the popular frameworks. Instead, we’ll just check out some of the important parts of their APIs that make it such a popular choice for React apps. They also offer support for React Native and Expo as well in case you’re planning on building a native application.
The React API consists of pre-built components that can be directly imported into your application and a hook-based API.
React Component API
Clerk provides a set of pre-built components that can be directly imported into your React or Next.js application. These components are designed to handle common authentication tasks, such as sign-up, sign-in, and password reset forms. By using these pre-built components, you can save the time and effort of creating your own custom UI components for authentication.
Some of the pre-built components include:
- SignIn: A sign-in form that handles user authentication with email, password, or social login.
- SignUp: A sign-up form that manages user registration with email, password, or social login.
- UserButton: A button that displays the current user's profile picture and opens a dropdown menu with user-related actions.
- UserMenu: A dropdown menu with user-related actions, such as signing out or account management.
- UserProfile and OrganizationProfile: Easily display and manage user and organization information.
- OrganizationSwitcher: Simplifies multi-tenant applications by allowing users to effortlessly switch between organizations and manage their memberships within your application.
The component API comes equipped with themes that you can use out of the box to help match your website and also allow configuration for customizing the style even further.
import { dark } from '@clerk/themes';
import { ClerkProvider, SignIn } from '@clerk/nextjs';
import type { AppProps } from "next/app";
function MyApp({ pageProps }: AppProps) {
return (
<ClerkProvider
appearance={{
baseTheme: dark
}}
>
<Component {...pageProps}>
</ClerkProvider>
)
}
React Hooks API
Clerk's React API also includes a set of hooks that allow you to interact with the authentication system programmatically. These hooks provide a simple and intuitive way to manage user authentication state and perform actions related to user accounts.
Some of the hooks available in Clerk's React API include:
- useClerk: Provides access to the Clerk instance, which allows you to interact with the Clerk API directly.
- useUser: Returns the current user object, allowing you to access user data and monitor authentication state.
- useSignUp: Provides methods for managing the sign-up process, such as creating new user accounts or handling social logins.
- useSignIn: Offers methods for managing the sign-in process, including authenticating users with email, password, or social login.
- useSession & useSessionList: The useSession hook provides access to the current user's active session object, allowing you to manage and monitor the user's session state within your application. In contrast, the useSessionList hook returns an array of all active sessions for the current user, enabling you to implement features like device management and session monitoring by displaying and controlling multiple sessions across different devices and browsers.
- useOrganization & useOrganizationList: The useOrganization hook offers access to the organization object associated with the current user, enabling you to manage organization-related features and permissions, especially in multi-tenant applications. Meanwhile, the useOrganizationList hook returns an array of all organizations the current user is a member of, allowing you to implement features like organization switching, role management, and billing by managing and displaying multiple organizations or teams within your application.
By using Clerk's pre-built components and hook-based API, integrating authentication into your React or Next.js application becomes a much more straightforward process by using these higher-level APIs.
ClerkJS API
Yes, Clerk’s React Component and Hooks APIs are really awesome, but you don’t need to be using React to take advantage of Clerk’s fantastic feature set. They do have a vanilla JavaScript API that can be used to implement your authentication using the Clerk in any client-side JavaScript environment or framework. It’s pretty similar to the React Hooks API with methods for sign-in, sign-out, user profile, sessions, and organization management. So even if you are not using React, you can still easily use Clerk for a great user and developer experience.
Server-side APIs
Their base server-side API client is pretty straightforward and includes methods for managing users and organizations. There are other backend APIs and features made available through the Backend HTTP API. The Node server API specifically includes a few more of these features.
Clerk Node
The Clerk NodeJS API has methods for managing clients, user invitations, sessions, users, and organizations. It also has methods for creating emails, SMS messages, and managing Allowlists.
Clerk Backend API
There’s quite a bit in their Backend API documentation so I’m not going to go over everything, but it’s good to know that it’s available if your backend is using a language that doesn’t yet have an API, or doesn’t include certain features. They also include some beta features that are available for use in this API. SAML Connections is an example of one of them at the time of this writing.
Webhooks
Webhooks are an essential aspect of Clerk's server-side integrations, allowing developers to receive real-time updates about authentication-related events. Clerk supports a variety of webhook events, such as user creation, user updates, and session events. By configuring webhooks, we can automate processes and integrate them with other services, like sending welcome emails, triggering notifications, or updating CRM systems.
Serverless database integrations
Clerk also has integrations with several different serverless database providers like Supabase and Hasura to name a couple. This is a really nice feature if you’re using a service like this that will allow you to secure access to your data. You can easily do things like only allow the original author user to edit a post, like when your app has some sort of social feed. Another common example might be just protecting certain queries from being ran without being authenticated as a user in your application.
Conclusion
It’s clear that the team over at Clerk has worked really hard to ship a really fantastic service for user authentication with some of the best APIs and integrations you could hope to find. It is a top-tier developer experience that allows you to ship user authentication and management to your app in literal hours without compromising on user experience along the way.
They have 3 standard pricing tiers that include a very generous free tier that you can get pretty far on. If you’ve read this article and want to give it a hands-on tryout, I suggest jumping over to their quick-start guides page. There are a bunch of great guides here that quickly take your app from 0 to authenticated.
