Clerk Changelog

This week Clerk has been focusing on improvements to our documentation, bug fixes, and iterating on our Organization components.

Organization Components improvements

Our organization components were released just last week, and we received a lot of great feedback from our users. We fixed some bugs and made improvements to the appearance and localization props.

Next.js app directory beta updates

Clerk has been working hard on our app directory beta. One of the most significant changes this week is it is now rolled into the latest production package. We also updated our documentation to reflect this, which you can read here.

TRPC + Clerk

We introduced documentation for alternative backends, starting with TRPC. I am a massive fan of TRPC and its end-to-end type safety.

If you are thinking about checking out Clerk and love TRPC, we now have documentation on how to integrate them.

If you want to see everything in action, check out the clerk-trpc-minimal repository⁠.

Community highlight

A special thanks to Molo Tech Lab for their amazing project JSON translator⁠ that allowed the team to translate our components into French and German. This project is open source, free, and under the MIT license.

Thanks to our customer Finary for showing us this cool project.

This week, Clerk launched a new suite of components to help B2B SaaS companies manage their business customers. They are built in the same declarative style as our user-focused <SignUp/>, <SignIn/>, <UserProfile/>, and <UserButton/> components.

The new B2B SaaS components are 100% opt-in, and do not change anything about using Clerk for User management.

<CreateOrganization/>

The <CreateOrganization/> component allow users to create an Organization within your application. It starts by asking for a name and logo, then proceeds to prompt for which other users should be invited.

<OrganizationProfile/>

After an organization is created, the <OrganizationProfile/> component allows users to manage member roles, invite new members, remove members, and maintain profile information.

<OrganizationSwitcher/>

The <OrganizationSwitcher/> is a corollary to the <UserButton/>. Intended to go in an application's header, it allows users with multiple organizations to select which organization is active, or to create a new organization.

useOrganization()

The useOrganization() hook allows developers to retrieve the active organization from anywhere in the React application.

JWT updates

Tying it all together, the Auth object available in your backend is now populated with the active organization ID, and the current user's role in that organization.

To ensure security, this information is passed to your backend via the same cryptographically signed JWT that contains the current user's ID.

Demo at Modern Frontends Live

This week, I will be demoing the new B2B SaaS features at Modern Frontends Live in London. I hope to see you there!

Can't make it but still want to tune in? The talk will also be available to virtual attendees.

Add OAuth connections after Sign Up

In the past, when an OAuth connection was turned on, it was required to be available as a sign-up option.

Now, developers can choose whether each OAuth provider is available during sign-up and sign-in, or if the connection should be made later.

This is especially useful for applications that prefer to connect third-parties after the fact. For example, a Github connection can be made after sign-up if an application wants to read repository data.

After sign-up, Connections can be made through our <UserProfile/> component, or with a custom flow.

Thanks to the contributors: Mark Pitsilos, Haris Chaniotakis

Revamped Next.js documentation

We're reorganizing our documentation to have Frameworks at the top-level, and Concepts at the second-level, instead of vice-versa.

We've found that different frameworks uses slightly different concepts (for example, getServerSideProps in Next.js vs loaders in Remix), and that has made it challenging to organize our documentation with Concepts at the top level.

Over the coming weeks, we'll be inverting the documentation to help developers answer their questions faster. The first to get this treatment was Next.js, which is now available here.

Thanks to the contributors: Joe Shekmer

Product Hunt relaunch

Yesterday, we relaunched on Product Hunt⁠ to share our progress over the last year. We wanted to add a special thank you in our changelog to our existing customers, who showed up with kind words in the comments and plenty of upvotes. Thank you!

Refreshed branding

Meet the new Clerk! We've refreshed our brand with a new logo, new colors, and a new homepage.

Thanks to the contributors: Charles Wefso, Marcel Cruz, Braden Sidoti

Improved Next.js authentication SDK

We launched @clerk/nextjs v4.5, an easier approach to authentication in Next.js. This standardizes our API in API routes, getServerSideProps, and middleware to a single getAuth() helper.

Thanks to the contributors: Mark Pitsilos, Nikos Douvlis

Backup codes for MFA

Backup codes have been added as a multi-factor authentication method in our <UserProfile/> component, and corresponding APIs have been added to our useUser() hook.

In the <UserProfile/> component, backup codes are presented to the user after configuring either an authenticator applicator or SMS codes for their second factor.

Thanks to the contributors: Haris Chaniotakis

Sign in with Coinbase

Sign in with Coinbase has been added as a Social identity provider. Toggle it on from the Clerk dashboard!

Thanks to the contributors: Haris Chaniotakis

User Impersonation

User Impersonation has been a top 5 request feature since the week Clerk launched. This feature allows admins to sign in as an another user, and experience the application as the user would.

From the Clerk dashboard, admins can now easily sign in as their users with the "Impersonate User" button:

Impersonation is commonly used within customer support and engineering teams to help with debugging. It's helpful to "see what user sees" in these contexts, especially as applications have become more complex and personalized to individual customers.

Keeping impersonation safe

Like every other Clerk feature, our top piority while developing User Impersonation was security.

Unsafe implementations of User Impersonation are often called "God-mode" because they empower admins to impersonate another user without leaving a trace. This is not the case with Clerk.

Impersonation sessions are automatically logged and can be retrieved from the Session List endpoint of our API.

We've made it possible to detect impersonated sessions as they are happening, so developers can easily choose to prevent actions while a user is being impersonated.

The detection is available on both the frontend and the backend.

Frontend

On the frontend, information about the impersonator (a.k.a. the "actor") is available through the useAuth() hook. When actor is not null, it's an impersonation session.

const { userId, actor } = useAuth()

Backend

On the backend, it's available through the "auth" helper for the framework of your choice (Next.js shown).

import { withAuth } from "@clerk/nextjs/api";

export default withAuth(async (req) => {
  const { userId, actor } = req.auth;
  //...
});

If you do not use one of our SDKs, the data is available on the "act" claim of the authentication JWT in compliance with RFC 8693⁠.

Since the impersonator data is ultimately transmitted through the JWT, this additional context is available with no additional latency.

Technical deep dive coming soon

In the coming weeks, we'll continue to share more details about impersonation's design and all of it's capabilities.

Meanwhile, you can learn more in the impersonation documentation.

Thanks to the contributors: Alex Ntousias, Giannis Katsanos, George Desipris

Component Localization (i18n)

Our components now accept a localization prop, which enables internationalization and customization of our default English strings.

Check out the documentation for more details.

Grafbase, Convex, Nhost integrations

We've launched three additional JWT templates for Convex, Grafbase, and Nhost. Now you can easiliy sync the authenticated user with all of these tools!

Looking for another integration? We're eager to add more, reach out to our team!

Blocklist

In addition to the allowlist, we now support a blocklist. Use this to stop individuals or groups of individuals from signing up.

User bans

Users that already have an account can also now be banned. This action signs out the user from any existing sessions, and prevents them from signing in again.