Clerk Changelog

URL-based active organization sync

Category
SDK
Published

Use an organization slug in your application URL to automatically set the active Clerk organization.

clerkMiddleware() now supports configuration to detect an organization by slug in a request's URL and automatically set that organization as active for the current session. Any client-side logic to handle syncing a session's active organization with the current URL can now be removed!

Try it today

To start using URL-based active organization syncing, see the clerkMiddleware() documentation.

To learn more about best practices for using organization slugs to manage the active organization, check out the new guide.

Contributors
Izaak Lauer
Robert Soriano
Laura Beatris
Bryce Kalow

Link Organizations to SSO Connections, allowing users to authenticate with their IdP and join organizations seamlessly.

After linking an organization to an enterprise connection, whenever users authenticate with their IdP, new sign-ups will automatically be added to the linked organization with the organization's default role and that organization will be set as active on the client side. Sign-ins will have the linked organization automatically set as their currently active organization.

If you're an application owner that previously found yourself detecting new sign-ups and sign-ins in an attempt to orchestrate the joining and setting active of an organization, all that code can now be removed.

Linked organizations are available for all enterprise connection types (SAML, OIDC, and EASIE) and we are planning to support more configurable enrollment modes in the future.

Try it today

If you have existing enterprise connections, head to Configure / SSO Connections and link your customer's organizations through the Clerk Dashboard. If you're looking for more detail, read through our full guide on how to configure an enterprise connection for an organization by visiting our Manage Organization SSO page.

Contributors
Mary Zhong
Izaak Lauer
Nicolas Lopes
Laura Beatris

Improved offline support for Expo

Category
SDK
Published

A better experience for your Expo apps.

We're excited to announce experimental offline support for Clerk's Expo SDK. This update significantly improves how Expo applications using Clerk handle network connectivity issues.

Key Features

  • Initialization of the Clerk SDK is now more resilient to network failures.
  • Faster resolution of the isLoaded property and the <ClerkLoaded> control component.
  • Network errors are no longer muted, allowing developers to catch and handle them effectively in their custom flows.
  • The getToken() function in the useAuth() hook now supports returning cached tokens, minimizing disruptions caused by network failures.

How to use

To try out the experimental offline support features, visit our documentation for step-by-step integration instructions for your Expo project.

Contributor
Stefanos Anagnostou

React Router SDK Beta

Category
SDK
Published

Add authentication and authorization to your React Router application in minutes with this new Clerk SDK.

We're excited to announce the beta release of @clerk/react-router, a new official SDK that allows developers to add authentication and authorization into their React Router application in a matter of minutes.

The SDK comes fully equipped with Clerk's UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.

If you want to dive right into it, head over to our React Router quickstart.

Use Clerk UI components

Clerk's pre-built UI components give you a beautiful, fully-functional user and organization management experience in minutes.

Here's an example on how simple it is to build a sign-in page using Clerk's <SignIn /> component inside your React Router applications.

app/routes/sign-in.tsx
import { SignIn } from '@clerk/react-router'

export default function SignInPage() {
  return <SignIn />
}

Server functions

You can also pair our getAuth() utility function with React Routers's server data loading to protect your routes.

app/routes/profile.tsx
import { redirect } from 'react-router'
import { getAuth } from '@clerk/react-router/ssr.server'
import { createClerkClient } from '@clerk/react-router/api.server'
import type { Route } from './+types/profile'

export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args)

  if (!userId) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
    userId,
  )

  return {
    user: JSON.stringify(user),
  }
}

export default function Profile({ loaderData }: Route.ComponentProps) {
  return <p>Hello! Your user id is {loaderData.user.id}</p>
}

You can learn more about @clerk/react-router in the React Router reference documentation.

Contributor
Lennart Jörgens

Configure enterprise single sign-on through any custom OAuth provider

We're excited to announce that in addition to EASIE and SAML, you can now enable enterprise single sign-on through any OpenID Connect (OIDC) compliant provider.

Authenticate with Enterprise SSO

To support this, we have added a new authentication strategy to our SDKs, enterprise_sso. This strategy lets you start an enterprise sso flow with a single method, regardles if the users will be signing in through OIDC, SAML, or EASIE.

Get started

To learn how to configure a provider, visit our setup guide or explore our enterprise connections documentation to discover how enterprise SSO works in Clerk.

Contributor
Nikos Polykandriotis

Reverification: Public Beta

Category
Product
Published

Reverification protects sensitive actions by prompting users to confirm their identity when needed.

Our new reverification feature protects sensitive actions by requiring that users have verified their credentials recently. If not, the user is prompted to verify their credentials again.

How it works

Our SDK has been updated with new backend and frontend helpers to detect and coordinate a reverification flow. This is how you can protect a Next.js route handler:

/app/api/transfer/route.ts
import { auth, reverificationErrorResponse } from '@clerk/nextjs/server'

export const POST = async (request: Request) => {
  const { has } = await auth()

  // Check if the user has *not* verified their credentials within the past 10 minutes.
  const shouldUserReverify = !has({ reverification: 'strict' })

  // If the user hasn't reverified, return an error with the matching configuration (e.g., `strict`)
  if (shouldUserReverify) {
    return reverificationErrorResponse('strict')
  }

  const { amountInCents } = await request.json()
  // Now that the user has verified credentials, let's perform the sensitive action
  const updatedResource = await db.updateBalance(amountInCents)
  return new Response(JSON.stringify(updatedResource))
}

Then, from the frontend, you can configure fetch to listen for the reverification error and prompt the user for reverification. You can use our new useReverification() helper for this:

/app/transfer/page.tsx
'use client'

import { useReverification } from '@clerk/nextjs'

export default function Page({ amountInCents }: { amountInCents: number }) {
  const [transferMoney] = useReverification(() =>
    fetch('/api/transfer', {
      method: 'POST',
      body: JSON.stringify({ amountInCents }),
    }),
  )

  return <button onClick={transferMoney}>Transfer</button>
}

Whenever Clerk identifies that a user needs to verify their credentials, a modal will appear, similar to the one shown in the image. reverification component

Get started

Visit the reverification guide to discover examples on how to integrate this feature into your application today.

Contributors
Pantelis Eleftheriadis
Haris Chaniotakis