Clerk Changelog

Improved Web Vitals

This week we rolled out major changes to how Clerk's Javascript bundle is split and downloaded. Chances are you didn't notice anything, but your production application should be seeing ~10 points higher performance on pagespeed.web.dev than last week.

Official Chrome Extension Support

Use Clerk and React to building a Chrome extension. We've launched @clerk/chrome-extension on NPM, and a starter repository on GitHub to help kick off your next extension project.

OIDC Provider (beta)

With Clerk, your application can now serve as an Open ID Connect (OIDC) provider. Please reach out through Discord if you'd like to join the beta.

OIDC is a subset of OAuth2. In the future, Clerk will also enable your application to serve as a OAuth2 provider, including supporting grant flows with custom scopes.

Cross-Origin Embedder Policy Support for Profile Images

Clerk profile images are now served with the Access-Control-Allow-Origin: * header to enable embeds in applications with cross-origin embedder policies.

We raised $15m in our Series A led by Madrona

We are extremely excited to announce our Series A, this series A will allow us to continue focusing on the product you love and elevate user authentication for developers. If you want all the details check out our blog post written by Colin

Improved Email templates

Our email templates prior to this weeks release would delivery the user agent as part of the identifier at the bottom. We have updated this to now include the IP, and the location to make it easier for your end users to identify if they did request a login.

Organizations Dashboard Updates

We have added the organizations that a user belongs to, to the user's profile in the dashboard, allowing you to add additional organizations, and remove them as needed.

Community feature

This week Theo released a new video on creating the a fullstack Next.js application using TRPC, Typescript, Tailwind, Prisma and of course Clerk!

If you want to learn how to build a modern application with the best tools in under three hours this video is for you!

You can find us at clerk.com

You may have noticed, or maybe you didn't! We now are on clerk.com versus our old domain clerk.dev. This migration was a team effort all around as we made sure no one was interrupted as we moved to our new home.

Currently our clerk.dev website is redirecting to clerk.com, however in the future we want to do something with the domain. If you have any ideas, we loved to hear them!

Add additional OAuth scopes

We understand sometimes you need to elevate user scopes after a user is in your application, and sometimes it's based on the users roles or subscription status. This week we introduced a way to to request additional OAuth scopes, and show the user that attention is needed. Below are some examples of how to implement it.

User Button

If you are using our <UserButton/> component you can pass in the userProfileProps along with the provider and the additional scopes.

<UserButton
  userProfileProps={{
    additionalOAuthScopes: {
      twitch: ['user:read:follows'],
    },
  }}
/>

User Profile

If you are mounting the <UserProfile/> in your application you can pass the same props

<UserProfile
  additionalOAuthScopes={{
    twitch: ['user:read:follows'],
  }}
/>

Below is what a user will see when the need to reauthorize your new scopes.

Using the useUser hook

If you are using hooks and building our your own UIs you can use the useUser hook to make the user reauthorize.

const handleClick = async () => {
  if (!isLoaded || !isSignedIn) {
    return null
  }
  user.verifiedExternalAccounts
    .find((oauth) => oauth.provider === 'twitch')
    .reauthorize({
      additionalScopes: ['user:read:follows'],
      redirectUrl: '/protected',
    })
    .then((res) => {
      // open the URL in a new tab generated by Twitch
      window.open(res.verification?.externalVerificationRedirectURL)
    })
    .catch((err) => {
      console.log(err)
    })
}

Sign in with Linear

This had to be one of our biggest requested OAuth providers in the last few weeks, and it's finally here. You can now have your users log in using their linear account. Just enable it in the dashboard and start building!

Sign in with Spotify

We have supported Spotify for a while but it was something we manually enabled as it doesn't support our usual developer shared credentials. We have now opened this up so anyone with their own Spotify credentials can use it.

Beta Documentation Updates

I have been writing non stop since we last spoke, we have had great feedback from the community and that feedback has been rolled into the documentation.

Just today I introduced the Expo quickstart guide, this quickstart guide covers:

• Using ClerkProvider
• Custom sign up (email and password) with email verification.
• Custom sign in (email and password)
• OAuth with transfers (sign in or sign up with a single click
• How to sign a user out
• Using a token cache
• Read session & user data

You can check out all the new updates at https://clerk.com/docs

Happy Changelog Friday, the team has been working hard on improving our Organizations offering and SDKs.

Organizations improvements

Create an organization

You can now create organizations right from the Clerk dashboard and assign an owner from your user pool. This was a highly requested features and we are excited to be able to launch this.

Organizations Settings has moved

We moved Organizations settings to the top level of the Clerk Dashboard to make it easier to enable and update maximum members limit

Updated Ruby SDK

The updated Ruby SDK has fixes, changes to core functionality and new features that were needed. The most important are:

• Fix: Proper caching of JWKS responses All requests to the Backend API now use application/json payloads. This also fixes particular calls to endpoints like the user.update request when passing in backup codes

• Added: The API key can now be set using the CLERK_SECRET_KEY environment variable [#28]

You can check out the release by update your Ruby SDK to Version: 2.9.0

Next.js 13.2 route handler support

In the 13.2 release of Next.js they introduced route handlers, and Clerk can now support them using our helpers currentUser and auth. Below is an example of a route handler.

import { currentUser } from '@clerk/nextjs/app-beta'

export async function GET() {
  const user = await currentUser()
  if (!user) {
    return new Response('Hello, world!')
  }

  return new Response(`Hello, ${user.firstName}!`)
}

Happy Changelog Friday, the team has been working hard on improving Clerk and bringing new features and improving our SDKs.

Introducing our new documentation

This has been a passion project of mine, I have spent the last 3 weeks creating our new documentation which launched in to a beta today for Next.js only. The docs have some features that I think are important to Clerk and to you as a developer:

• The docs are completely open source so you can see what we used to build them. If you were wondering I ended up on Nextra because the tech is awesome.
• Anyone can contribute we are now using MDX.
• Feedback is so important to me and the team, so feel free to click the feedback button and give your honest feedback.
• Better Search
• Better organization of content

If you are ready to check them out head over to https://clerk.com/docs, looking forward to all your feedback!

Appearance and Localization Support for Next.js App Router

When we introduced the beta support for Next.js App Router we decided to leave out the appearance prop and localization while we worked on core stability.

You can now use our appearance prop to style our components to your brand and localize based upon your user base. Here is an example of using our prebuilt dark theme

import { ClerkProvider } from '@clerk/nextjs/app-beta'
import { dark } from '@clerk/themes'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <ClerkProvider
        appearance={{
          baseTheme: dark,
        }}
      >
        <body>{children}</body>
      </ClerkProvider>
    </html>
  )
}

Support for Next.js 13.2.0

We released @clerk/nextjs@4.11.0 which supports 13.2.0 changes that we introduced, if you upgrade to the latest Next.js make sure you update your Clerk package as well!

Dashboard Search for Organizations

We added Dashboard search for your organizations allowing you to find and manage them quicker and easier.

Hydration Improvements for @clerk/remix

We have spent time improving our @clerk/remix package and making sure that hydration doesn't become an issue with React 18.2. Please make sure you are on the latest to see the improvement with hydration.

Community contribution: German and Spanish localization

A huge shoutout to two of our community members for taking the time to localize our components to German and Spanish.

Thanks to Phillip for the German translation and Waldo for the Spanish version.

The team has been making improvements to the Clerk product and introducing new packages, here is a round up from the last two weeks.

Introducing @clerk/fastify

We had a a number of requests recently for a dedicated package for Fastify and as of today you can now use Clerk with Fastify using our latest package.

To learn how it works check out our new getting started guide in our docs or our fastify starter repository.

Redwood v4 support

Our Clerk integration for Redwood has been upgraded to be able to support Redwood V4. With that you can check out the latest integration guide in the Redwood documentation.

Next.js middleware protection strategy

We introduced middleware as a way to protect pages during the month of November, after a few tweaks and improvements. We are happy to announce this is now the recommended way to protect your pages. Below is an example of using Clerk + Middleware together.

import { withClerkMiddleware, getAuth } from '@clerk/nextjs/server'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// Set the paths that don't require the user to be signed in
const publicPaths = ['/', '/sign-in*', '/sign-up*']

const isPublic = (path: string) => {
  return publicPaths.find((x) => path.match(new RegExp(`^${x}$`.replace('*$', '($|)'))))
}

export default withClerkMiddleware((request: NextRequest) => {
  if (isPublic(request.nextUrl.pathname)) {
    return NextResponse.next()
  }
  // if the user is not signed in redirect them to the sign in page.
  const { userId } = getAuth(request)

  if (!userId) {
    // redirect the users to /pages/sign-in/[[...index]].ts

    const signInUrl = new URL('/sign-in', request.url)
    signInUrl.searchParams.set('redirect_url', request.url)
    return NextResponse.redirect(signInUrl)
  }
  return NextResponse.next()
})

export const config = { matcher: '/((?!.*\\.).*)' }

Clerk Component improvements

We made some improvements to the Clerk components now if a user opens any Clerk component in a modal on a mobile phone they will present with a cross in the top right corner to close them.

Changes to User Impersonation

User impersonation is now only accessible in the Clerk dashboard if the user has the role of admin or is in their own personal space.

How to stay up to date with Clerk?

The best way to keep up with Clerk is to subscribe to our newsletter. We send out updates every week. Updates include new features, what we have been working on, and blog posts you may have missed!

Clerk Community Discord

Clerk has a community Discord. When you join, you will find a place:

• Find the latest Clerk news and announcements
• Share your project with the Clerk community, and talk about your experience
• Request features and gets help integrating Clerk from the team and community.

Clerk Twitter

Our Twitter account (@clerkdev) announces the latest features and improvements. We would also be psyched if you tagged us in projects you have built.