Clerk Changelog

🧵 JWT Shortcode String Interpolation

We're excited to announce that JWT Templates now support shortcode string interpolation! You can now interpolate shortcodes directly inside strings in your JWT claims, like this:

{ "full_name": "{{user.last_name}} {{user.first_name}}" }

Shortcode interpolation unlocks many new use cases by enabling developers to dynamically inject user data into JWTs. To learn more about this new capability, check out the JWT Templates docs.

🔍 Filtering and Sorting for Users, Organizations & Members

Introducing enhancements to Clerk’s user management features; in addition to the ability to search for users, the dashboard now supports sorting across all tables!

For the Users table⁠, you can sort based on user identification information or when a user was created or last signed in. For the Organizations table⁠, you can sort based on member count to see your largest organizations. You can also now distinguish between admins and members in the Organizations table with the new filtering option.

Note: These capabilities are also available directly via our Backend API.

🇬🇧 SMS OTP Now Uses UK Numbers for UK Users

SMS OTP delivery now uses a UK (+44) phone number to send verification messages to UK phone numbers. This fixes issues with international messages sometimes being blocked.

✨ Other Fixes & Improvements

• Clerk now supports Remix V2⁠ – check out the updated quickstart guide for more details.
• We released updated support for Expo 49, and updated the starter project on GitHub⁠ to use Expo 49 and the latest Clerk SDK.
• A new auth decoder was implemented in the v5.3.2 release⁠ for @redwoodjs/auth-clerk-api to improve efficiency and reduce API rate limit issues.
• Completed UI fixes in the <OrganizationSwitcher/> component to properly align the organizations list and hide unnecessary icons and logos. (PR #1416⁠ & PR #1462⁠)
• When members create a new organization through the <CreateOrganization/> flow, for single-membership orgs we will automatically skip the invite members screen. (PR #1501⁠, PR #1471⁠)
• For customers using TikTok as a social connection, Clerk now supports TikTok's newly announced OAuth V2 endpoints by default. Support for V1 OAuth will be deprecated on September 12, 2023. If you have an existing application using V1 OAuth, we have already reached out to you with next steps. Read the TikTok Announcement →⁠

📅 Events

We're excited to announce that Clerk is sponsoring React Rally in Salt Lake City on August 17th and 18th. If you're planning on attending, let us know – we'd love to meet you! We'll have cookies, swag, and a surprise or two. And if you're not sure, there's still time 😉

Grab your ticket here →⁠

📚 Resources

• Build a SaaS AI Platform with Next.js 13, Clerk, Prisma & Stripe⁠: In this video, which provides a deep dive into crafting a state-of-the-art AI SaaS platform using 5 different AI tools, you will learn how to build a full stack AI platform.
• How We Roll – Chapter 7: JWT Single Sign-On: In the 7th chapter of "How We Roll," Dev Agrawal⁠ covers how Clerk integrates with BaaS providers using JWT SSO.
• Integrating passwordless authentication in a Next.js application using Clerk⁠: In this post by Aaron Damilola⁠, Discover the hassle-free and secure approach of passwordless authentication with Clerk in Next.js 13 applications.
• How We Roll – Chapter 8: Sessions: In Chapter 8, Dev Agrawal⁠ dives into Clerk's implementation of sessions, explaining how they enable security capabilities like multi-device sign-in, inactivity timeouts, and remote sign-outs.

🙌 Community Shoutouts

• Thank you to Anthony Campolo⁠ and Scott Steinlage⁠ for hosting Dev Agrawal⁠, Jeff Escalante⁠, and Colin Sidoti⁠ on the Javascript Jam podcast to discuss why you shouldn't roll your own authentication. Listen to episode 54 on transistor.fm⁠.
• Shoutout to the Magnet⁠ team on launching their new web version! We're excited to see Clerk being used for authentication in their AI coding assistant tool. Congrats on shipping and we look forward to seeing where you take Magnet next!
• Congratulations to the Everfund⁠ team on launching this week on Product Hunt⁠! Everfund makes it easy for nonprofits to integrate donation experiences using a composable SDK and modern web components. They are shaping the future of nonprofit donations without requiring building from scratch.

🤖 Enhanced Bot Detection for UI Components

In our last update, we announced enhanced bot protection for Hosted Pages that would prompt users with a verification challenge if bot activity was detected; we have now extended this capability to support developers using Clerk’s <SignUp /> component! If you’re using Custom Flows, please reach out to the team and we’d be happy to help you get up and running.

With this new capability, any time suspicious bot activity is detected during sign-up, the user will be prompted with a CAPTCHA-like verification process, powered by Cloudflare Turnstile⁠, to ensure no malicious activity occurs. New instances will have this protection enabled by default, and existing accounts can leverage this new bot protection by turning it on in the General⁠ section of the Clerk Dashboard.

✨ Other Fixes & Improvements

• Improved user search query performance by 80% on Clerk’s Backend API route GET /v1/users. This also means that User Search in the Dashboard is significantly faster!
• Improved OAuth 2 Sign-in and Sign-up response time, making your end-user experience even quicker than it already was.
• Added localization support for Polish (pl-PL).
• Added experimental support for Remix V2's new v2_errorBoundary flag.

📅 Events

We're excited to announce that Clerk is sponsoring React Rally in Salt Lake City on August 17th and 18th. If you're planning on attending, let us know – we'd love to meet you! We'll have cookies, swag, and a surprise or two. And if you're not sure, there's still time 😉

Grab your ticket here →⁠

📚 Resources

• Migrating from the Pages Router to App Router with Next.js: A step-by-step guide by Colin Sidoti⁠ outlining how to incrementally migrate from the Pages router to App router with Next.js.
• Easy Google & GitHub Authentication with Next.js⁠: A step-by-step guide, for developers of all experience levels, by Daniel Ukaji that simplifies adding Google and GitHub authentication to Next.js apps using Clerk.
• Skateshop E-Commerce App in Next.js 13⁠: An open source e-commerce skateshop app written by Sadman Sakib⁠ and built with Next.js 13 showcasing its latest features like App Routing, Image Optimization, and more.
• Full Stack Next.js Notion Clone⁠: A complete tutorial written by Lukas Wimhofer⁠ for building a full stack Next.js clone of Notion using Clerk, Prisma, Planetscale, TipTap WYSIWYG editor, and shadcn/ui components.

🙌 Community Shoutouts

Shoutout to Antonio Erdeljac⁠ for creating an amazing YouTube tutorial on building a full-stack e-commerce app with Next.js 13, React, Tailwind, Prisma, MySQL and Clerk!

Watch the full tutorial →⁠

Stay tuned for future updates. If you have feedback or suggestions, leave us feedback on the docs via Docsly⁠, tweet us at @ClerkDev⁠, or join the Clerk Community⁠ on Discord.

🗑️ Self Service Delete

We've introduced a new feature that allows users to easily delete their user accounts from your application. With the Self Service Delete feature, users can now delete their accounts directly through the <UserProfile /> component. This convenient functionality can be enabled through the Clerk Dashboard.

For our B2B customers, we've also extended this capability to administrators, who can now delete organizations directly through the <OrganizationProfile /> component. This provides enhanced control and management options for organizations within your application.

🔒 Permissions for Organization Creation

We have introduced a new feature that allows admins to have granular control over organization creation permissions for application users. With this feature, administrators can now decide whether users are allowed to create organizations. This provides you with extra control over the number of organizations within your Clerk application, ensuring that it aligns with your specific requirements and organizational structure. Note: You are still only billed on the number of active organizations in use, not the total number of organizations.

The organization creation permission setting is respected across all our stacks, including Clerk’s UI components, frontend API, and backend API.

🤖 Enhanced Bot Detection for Hosted Pages

We have introduced enhanced bot protection for our customers who are using Clerk’s Hosted Pages feature to help detect and mitigate bot attacks. In order to maintain the integrity of your application, all production instances now include additional measures against bot activity. If a suspicious bot attempts to access Hosted Pages, a “Verification Challenge” will be triggered.

This challenge serves as a verification process, similar to a CAPTCHA, to ensure that the user accessing the pages is human.

✨ Other Fixes & Improvements

• Implemented PKCE (Proof Key for Code Exchange) support for Clerk's provided OAuth 2 IDP, improving security for user authentication and authorization code exchanges.
• The experimental_allowed_origins parameter has been officially removed from the Clerk Backend API /v1/instance endpoint following its deprecation.
• Improved Clerk Images with optimizations including:
  • Implementation of dynamic format negotiation that supports avif and webp formats and falls back to jpeg when needed, yielding a ~50% size reduction.
  • Images are now scaled down to a max width of 1920 and a default quality of 80 for improved performance.
• Enhanced dashboard experience now offers a cleaner, unified interface for editing and viewing SAML connections.
• The PATCH /me {password} endpoint in the dashboard is now deprecated and replaced with the more secure /v1/me/change_password endpoint. This new endpoint requires the inclusion of the old password, enhancing the security of password changes.
• The Expo SDK now supports base64 image uploads for user profile images and organization logos.

📅 Events

Dive into AI applications at the Pinecone Hackathon, proudly sponsored by Clerk. This week-long event challenges you to devise solutions for real-world issues using Generative AI tools. The deadline for participation is Jun 26, 2023, at 12:00am EDT.

Join the hackathon here →⁠

📚 Resources

• AI Getting Started Stack:⁠ Martin from a16z open sourced a Javascript AI “getting started” stack to allow devs to quickly spin up AI projects. Read all about it in this post⁠.
• We’ve got two editions of How We Roll for you this week, which covers how Clerk implements authentication, both from Clerk’s own James Perkins⁠.
  • Customization: The 5th chapter of "How We Roll" covers the various ways developers can customize Clerk's UI components.
  • User Profile: The 6th chapter of “How We Roll” covers how Clerk’s <UserProfile /> component allows users to control their data.

🙌 Community Shoutouts

• Shoutout to Timothy Miller⁠ for open sourcing create-t4-app⁠, a Type-Safe, Full-Stack Starter Kit for React Native + Web, offering easy integration to Cloudflare services and built-in support for Clerk.
• Congratulations to our Clerk Community member bradw⁠ for launching Sociafy⁠, an alternative to linktr.ee⁠. Sociafy lets you curate elegant pages that reflect your individuality, and utilizes Clerk for user authentication.
• A round of applause for Clerk Community member Zach⁠ for the launch of Artisan⁠, a web application that leverages the power of Clerk and T3 Turbo⁠. Artisan, an AI-driven coach, is here to help you achieve your self-guided learning goals with greater consistency.

Stay tuned for future updates. If you have feedback or suggestions, leave us feedback on the docs via Docsly⁠, tweet us at @ClerkDev⁠, or join the Clerk Community⁠ on Discord.

SAML is Now in Public Beta

We're excited to announce that Clerk now supports SAML-based Enterprise Single Sign-On (SSO). As of now, the SAML feature is in public beta, with general availability expected later this summer. Clerk’s new SAML SSO feature was carefully built to improve the secure authentication experience for both you and your customers:

Integrate with Top Identity Providers

Clerk's new SAML-based Enterprise SSO feature allows you to seamlessly integrate with top identity providers such as Okta, Azure AD, and Google. The integration process is straightforward, and our docs provide an in-depth glossary for correctly mapping IdP claims to Clerk fields.

Secure, User-friendly Authentication Experience

When SAML is configured, your users enter their email address on your sign in page and, if the email matches an active SAML connection, they will be redirected to the configured IdP for a secure login using their credentials. Best of all, this seamless authentication experience works out of the box with Clerk's UI components.

Public Beta & Configuration

While in public beta, SAML is available at no cost for all customers subscribed to a Business plan. However, once SAML transitions to general availability, the pricing structure will change, with SAML being billed at $50 per connection per month.

To get started, go to your dashboard⁠ and navigate to User & Authentication > Enterprise Connections. From there, click on "Create Connection" to begin the setup process.

For detailed instructions on configuration and mapping IdP fields to Clerk, please see the docs.

Other Fixes & Improvements

• Thanks to community contributions, we now have localization support for additional languages:
  • Czech (cs-CZ): PR #1256⁠
  • Turkish (tr-TR): PR #1254⁠
  • Russian (ru-RU): PR #1255⁠
  • Chinese (zh-CN): PR #1284⁠
• Satellite domains can now be removed using the Clerk Backend API.
• Multidomain support has been extended to Node/Express applications.
• Users will now be notified via email when modifications are made to their primary email address.
• We've extended user imports to include support for Django's bcrypt SHA256 password hasher.
• New contribution guide⁠ for open source contributors who want to open pull requests to our open source Javascript SDKs.
• For greater interoperability across various build tools and frameworks, we now facilitate both ESM and CJS builds in @clerk/clerk-react.
• Added support to @clerk/nextjs for Next.js apps deployed to AWS Amplify⁠ and Railway⁠.

Resources

• How to Add Seamless, Full-Stack Authentication in Next.js⁠: In this tutorial, Zevi Reinitz⁠ demonstrates how to incorporate authentication into your Next.js app using Clerk.
• How We Roll: Multifactor Authentication: In the 3rd chapter of "How We Roll," Colin Sidoti⁠, Clerk's CEO, breaks down how we think about and build Multifactor Authentication (MFA) at Clerk.
• Send SMS Directly from the Browser⁠: In this tutorial by Gabriel Manor⁠, you'll discover how to transmit SMS messages directly from the browser using Frontend-Only Authorization (FoAz).
• How We Roll: Email Verification: In the 4th chapter of “How We Roll,” Dev Agrawal⁠ provides an in-depth look at how Clerk implements email verification during sign-up, sign-in, and account management, using strategies like one-time passcodes, verification links, and Single Sign-On (SSO).

Community Shoutouts

• A big thank you to Petr Doležal⁠, Ahmet Polat⁠, Ilya Nikishin⁠, and Cali Castle⁠ for your help adding additional localization support to Clerk.
• Shoutout to Pranav⁠ for the launch of Swiftube, a React app that uses Clerk (for authentication) and transforms user prompts into animated videos. Learn how it was built in this post⁠.
• Kudos to the team at Tunnel⁠, who just launched this week using Clerk, for making it easier for developers to tunnel their applications locally.
• Congratulations to the folks at Maple⁠, who also launched with Clerk this week, for introducing a new platform for privacy-focused analytics.

Stay tuned for future updates. If you have feedback or suggestions, leave us feedback on the docs via Docsly⁠, tweet us at @ClerkDev⁠, or join the Clerk Community⁠ on Discord.

Clerk Avatars

Clerk improved the default avatars for users who haven't uploaded a profile image by adding customization options. These unique avatars are designed to add an extra level of polish to your application and can be fully customized to align with your brand.

Customization

Avatars can easily be customized via the dashboard under Customization > Avatars. In there, you can adjust the following settings:

• Background: Select from an array of color options and effects. You can retain the default marble effect, which accommodates up to five colors, or opt for a solid background.
• Foreground: Choose from a diverse range of colors and styles. Your options encompass initials, silhouette, or none at all.

An Eye-Catching Shimmer

To add a unique touch, we've implemented a subtle shimmer animation on our internal avatar component. This is available on the <UserButton /> component and you can enable the shimmer effect using the appearance prop:

<UserButton
  appearance={{
    layout: {
      shimmer: true,
    },
  }}
/>

Learn more in this blog post →

Other Fixes & Improvements

• Change domains and subdomains for production instances via the Dashboard. (Link to Docs)
• Added sorting capabilities Clerk Backend API organization membership and user list endpoints. (Org Membership, User)
• Implemented allowedOrigins prop to mitigate the risk of open redirect vulnerabilities.
• Added new I18n translations for Clerk JS, including Japanese [PR]⁠ and Hebrew [PR]⁠, thanks to community contributions.
• Introduced a feature to delete satellite domains in the multi-domain configuration. (Link to Docs)
• Enhanced password reset flow for strong password verification, adjustable complexity settings, and guidance cues. (Read More)

Upcoming Events

RenderATL – May 31st to June 2nd

Several team members are heading down to Atlanta to participate in RenderATL⁠. If you are attending, we would love to meet you! Keep an eye out for our team who will be handing out warm cookies and invitations to community-driven side events.

CityJS – May 29th to May 31st

Our engineering team is heading to CityJS⁠ in Athens with swag. Be sure to tune in for a talk from our VP of Engineering, Sokratis Vidros⁠, on how to add authentication to your Next.js app in just 7 minutes.

Community Shoutouts

• A big thank you to Raz Levi⁠ and Daichi Ninomiya⁠ for their pull request adding localization support for Hebrew and Japanese
• Another big thanks to Tom Milewski⁠ for reducing our SVG size by 80% in our ClerkJS package, allowing us to reduce our bundle size even more.
• A thanks to DevelopedByEd for featuring us in his “My Ultimate tech stack 2023” video, check it out on YouTube⁠.

Resources

• Stable Support for Next.js 13.4: We are excited to announce that Clerk's app router support is now out of beta. Additionally, we've launched a significant update to our middleware.
• A <Component /> is Worth 1,000 APIs⁠: At Reactathon, Clerk’s CEO, Colin Sidoti⁠, discussed his belief that the future of technology is in components, not APIs.
• How We Roll: Passwords: We've initiated a new series that provides insight into our approach to building authentication at Clerk.
• Validating Clerk Tokens with Go⁠: Brian Morrison⁠ has shared a tutorial on how to validate Clerk tokens with Go in Netlify functions.

Stay tuned for future updates. If you have feedback or suggestions, leave us feedback on the docs (thank you Docsly⁠), tweet us at @ClerkDev⁠, or join the Clerk Community⁠ on Discord.

Change password flow

We introduced a new Change password flow this week, that allows the user to change their password and log out all sessions via our user profile component.

Bulk Organization invitations

You can now bulk invite users to an organization via Clerk's API allowing you to invite a whole team quickly.

You can specify a different role for each invited organization member. New organization invitations get a "pending" status until they are revoked by an organization administrator or accepted by the invitee.

The request body supports passing an optional redirect_url parameter for each invitation. When the invited user clicks the link to accept the invitation, they will be redirected to the provided URL.

Use this parameter to implement a custom invitation acceptance flow. You must specify the ID of the user that will send the invitation with the inviter_user_id parameter.

Each invitation can have a different inviter user. Inviter users must be members with administrator privileges in the organization. Only "admin" members can create organization invitations.

Below is a simplified version

curl -XPOST -H "Content-type: application/json" -d '[
  {
    "email_address": "string",
    "inviter_user_id": "string",
    "role": "admin",
    "public_metadata": {},
    "private_metadata": {},
    "redirect_url": "string"
  }
]' 'https://api.clerk.com/v1/organizations/{organization_id}/invitations/bulk'

Check out our backend API reference for more details: https://clerk.com/docs/reference/backend-api/tag/Organization-Invitations#operation/CreateOrganizationInvitationBulk

Hosted Pages

We have added a dedicated section for our hosted pages in the Clerk dashboard. You can find them under customization, this will give you links to preview hosted pages as well as a way to customize some of the look and feel.

Community shoutouts

This week I'd like to highlight a few community creators who created some informative videos on using Clerk!

First up we have Hamed Bahram who created a video on protecting your e-commerce website using Clerk, this 30 minute tutorial shows the power of Clerk from client to server.

Secondly Elias Wambugu who's channel is know as The Source Code gives you a introduction into Clerk with React in just 10 minutes!