Issue #421 (Clerk Review, Text Editors, Testing, React)08/12/21
The following intro is a paid product review for Clerk, an authentication and user management service for Next.js, React, and JavaScript apps.
If you've built any kind of app that involves registration, sign-in, and user profile management, then you may have looked around for various options to integrate these features easily and securely.
Clerk is one such option, letting you add authentication user flows to your apps in a matter of minutes. Clerk can be integrated with raw JavaScript apps, React apps, or Next.js.
Clerk lets you easily build onboarding experiences for your users that work and that ensure high conversion rates.
For this review, I'll present Clerk's features in the context of a Next.js app. The primary features that Clerk lets you integrate are:
- Sign-up with optional 2-step verification
- Single sign-on via Google, Facebook, GitHub, and more.
- Passwordless sign-in
- Multi-session sign-in
The Clerk Docs walk you through how to install and initialize Clerk for React and Next.js apps. I was able to work through the steps for putting together a Next.js app with single sign-on options for logging in.
Getting started with the aforementioned features only requires two basic steps:
- Set up your apps in the Clerk Dashboard
- Integrate each app's unique Frontend API with your code
Apps in the Clerk Dashboard
In the example above, I've created two apps, one for Next.js and one for React. To connect one of these Clerk apps to my codebase, I simply add the project's unique Frontend API value inside a .env.local file, which is then used as a project constant, like so:
|
const frontendApi = process.env.NEXT_PUBLIC_CLERK_FRONTEND_API;
|
In my Clerk dashboard, I'm able to select which accounts the user can sign in with:
Single sign-on Options for Clerk
I can then start to use Clerk's components in my code's logic to customize the user flow to my own needs. Clerk offers prebuilt UIs for four primary components I can drop into my code:
In my example, my app allows three options for logging in, according to what I set up in the Clerk dashboard:
User Sign-in Options
I then used the following code in my pages/index.js file to display an option for a logged-in user to log out or manage their profile:
|
import styles from "../styles/Home.module.css";
import { useUser, UserButton, ClerkProvider } from "@clerk/clerk-react";
export default function Home() {
// Get the current user's firstName
const { firstName } = useUser();
return (
<div className={styles.container}>
<header>
<h1>My Next.js App</h1>
<UserButton />
</header>
<main>Hello, {firstName}!</main>
<div>
);
}
|
My page will then show the User Button component, which expands to display the user's profile email along with options in a modal overlay:
Clerk's User Button Component
From there the user can choose the "Manage account" button to display yet another UI for managing various profile features like name, avatar, email, phone number, and connected accounts.
Additionally, the account management UI allows for powerful security-related account preferences:
Clerk's User Security Settings
Here the user can manage logged in devices, enable 2-factor authentication, and more.
The final thing I'll discuss here is how Clerk can be customized to your own app's needs. In the Clerk dashboard, select an app, then under "Development" you can go to "Settings > Themes" to choose from a number of options to customize the look and feel of Clerk's components for that specific app.
Clerk's Theme Customization settings
And this can be done for as many apps as you create. In addition, theming can be done via Props in a Next.js or React app, or you can use plain CSS.
For customizing user flows you can use Clerk's Control Components like SignedIn and SignedOut, among others, to allow you to show or hide specific parts of your pages based on the user's current status.
In short, if you're looking for a complete user management solution with a strong onboarding user flow, Clerk is definitely something you'll want to look into. Probably the only challenge I had when looking at Clerk is the gaps in the documentation, which are a work in progress. But the folks at Clerk are available on Discord to fill in any of those gaps for you, so that's a big help.
Try out Clerk today and check out the reasonable pricing options – I'm sure one of them will suit the needs and scope of your project.
