Skip to main content

Clerk Changelog

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

Enterprise Connections for Custom OAuth Providers

Category
SSO
Published

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

Chrome Extension SDK 2.0

Category
SDK
Published

We've released version 2.0 of the Chrome Extension SDK. Learn about the SDK's new features and get started building your Chrome Extension today.

We're excited to release version 2.0 of the Chrome Extension SDK. Version 2.0 comes with the new createClerkClient() helper for background service workers, improved support for syncing auth state with your web application and detailed documentation for the SDK.

Take a look at our Chrome Extension Quickstart if you're just getting started, or read over the Chrome Extension documentation to learn about all of the features.

Our Chrome Extension Quickstart repo and Chrome Extension Demo repo are a great reference or starting point for a project.

Introducing createClerkClient() for Service Workers

Chrome Extensions pose a unique challenge for developers using Clerk. When the popup or side panel is closed, the Clerk session cookie will become stale. The createClerkClient() function is specifically designed to allow extension developers to refresh the user's session, obtain a valid token or other auth, and retrieve user data.

src/background/index.ts
import { createClerkClient } from '@clerk/chrome-extension/background'

const publishableKey = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY

// create a new Clerk instance and get a fresh token for the user
async function getToken() {
  const clerk = await createClerkClient({
    publishableKey,
  })

  // if there is no user session, then return nothing
  if (!clerk.session) {
    return null
  }

  // return the user's token
  return await clerk.session?.getToken()
}

// create a listener to listen for messages from content scripts
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Handling request for the users current token')

  getToken()
    .then((token) => {
      sendResponse({ token })
    })
    .catch((error) => {
      console.error('[Service Worker]: Error occured -> ', JSON.stringify(error))
      sendResponse({ token: null })
    })

  return true // REQUIRED: Indicates that the listener responds asynchronously.
})

You can now send a message from a content script to the background service worker and get auth status or a token for the user.

src/tabs/content.tsx
// send a message to the background service worker
chrome.runtime.sendMessage({ greeting: 'get-token' }, (response) => {
  // you can now have access to the user's token
  console.log(response.token)
})

Breaking Changes

Contributors
Roy Anger
Tom Milewski

EASIE Support and no more SSO fees

Category
SSO
Published

This easiest way for enterprises to adopt full-featured SSO.

EASIE Enterprise Connections

We've added a new Enterprise Connection type: EASIE SSO. EASIE is a new way for applications to provide enterprise-grade SSO through a multi-tenant OpenID provider, created by Clerk.

No more SSO Fees

Along with the launch of EASIE support, we’re eliminating usage-based SSO connection fees entirely (previously $50/mo each) to make enterprise SSO more accessible than ever, including SAML SSO connections. Your current billing cycle will be the last one with these per-connection fees.

Read the full blog post to learn more about EASIE and why we're cutting our SSO prices so drastically.

Contributors
Mary Zhong
Izaak Lauer
Nicolas Lopes
Laura Beatris