Clerk Changelog

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.

Refactored API keys

We've refactored our API keys to a more familiar format:

• Publishable key (prefixed with pk_test_ or pk_live_)
• Secret key (prefixed with sk_test_ or sk_live_)

Quick copy

With this upgrade, we introduced a quick copy in our dashboard for each of our SDKs allowing you to move faster than ever.

What about legacy keys?

Legacy keys are still available in the dashboard and can continue to be used. Once ready to upgrade, you will need to replace all the keys simultaneously, as you cannot mix the legacy keys with the new ones.

But why?

Learn more about the motivation behind our new keys.

Documentation improvements

Developer experience is huge for us here at Clerk, and with that, we want to make it easy to get started and easier to find what you are looking for.

Dynamic documentation

Last week we introduced new environment-driven examples, allowing us to insert your keys into our docs. This is only in our get-started sections, but we want to add it to more places in the near future.

Search improvements

We spent some time improving the search and results that were returned, this has been high on our list this month, and we think the improvement already shows.

t3-turbo-and-clerk

We launched a new starter repo called t3-turbo-and-clerk.

For the launch, we collaborated with t3's creator, Theo Browne, to show off the simplicity of the solution. Check it out:

Gatsby V5

We updated our Gatsby plugin to support Gatsby V5. You can now access the user's authentication state on the client or the server. Below are examples of SSR and API routes:

SSR

import * as React from 'react';
import { GetServerData } from 'gatsby';
import { withServerAuth } from 'gatsby-plugin-clerk/ssr';

export const getServerData: GetServerData<any> = withServerAuth(
  async props => {
    return { props: { data: '1', auth: props.auth } };
  },
  { loadUser: true },
);

function SSRPage({ serverData }: any) {
  return (
    <main>
      <h1>SSR Page with Clerk</h1>
      <pre>{JSON.stringify(serverData, null, 2)}</pre>
    </main>
  );
}

export default SSRPage;

API Routes

import { clerkClient, withAuth } from 'gatsby-plugin-clerk/api'

interface ContactBody {
  message: string
}

const handler = withAuth(async (req, res) => {
  const users = await clerkClient.users.getUserList()
  res.send({ title: `We have ${users.length} users`, message: req.body.message, auth: req.auth })
})

export default handler

Redwood dbAuth migration Support

We now support migrating users and their hashed passwords (using pbkdf2_sha1) from RedwoodJS dbAuth to Clerk using our API.

Migrating for another tool? Contact support to let us know if you need us to add another hashing algorithm.

Node 12 is no longer supported

We have dropped support for Node 12 and will be only supporting Node 14 or higher.

Community Highlights

Brazilian translation

A massive shoutout to Darlan for his first contribution to Clerk by adding a Brazilian translation to our Clerk components.