{plan.description}
{plan.currency} {plan.amountFormatted}/month
Status: {subscription.status}
Next billing: {subscription.nextPayment.date.toLocaleDateString()}
Hello! Your user id is {loaderData.user.id}
} ``` You can learn more about `@clerk/react-router` in the React Router [reference documentation](/docs/references/react-router/overview). --- ## Enterprise Connections for Custom OAuth Providers - URL: https://clerk.com/changelog/2024-12-11-custom-oauth-ent-connections.md - Date: 2024-12-11 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](/docs/authentication/enterprise-connections/oidc/custom-provider) or explore our [enterprise connections documentation](/docs/authentication/enterprise-connections/overview) to discover how enterprise SSO works in Clerk. --- ## Reverification: Public Beta - URL: https://clerk.com/changelog/2024-12-02-reverification-beta.md - Date: 2024-12-02 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: ```ts {{ filename: '/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: ```tsx {{ filename: '/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 } ``` Whenever Clerk identifies that a user needs to verify their credentials, a modal will appear, similar to the one shown in the image.  ## Get started Visit the [reverification guide](/docs/guides/reverification) to discover examples on how to integrate this feature into your application today. --- ## Chrome Extension SDK 2.0 - URL: https://clerk.com/changelog/2024-11-22-chrome-extension-sdk-2-0.md - Date: 2024-11-22 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](/docs/quickstarts/chrome-extension) if you're just getting started, or read over the [Chrome Extension documentation](/docs/quickstarts/chrome-extension) to learn about all of the features. Our [Chrome Extension Quickstart repo](https://github.com/clerk/clerk-chrome-extension-quickstart) and [Chrome Extension Demo repo](https://github.com/clerk/clerk-chrome-extension-demo) 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. ```ts {{ filename: '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. ```tsx {{ filename: '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 - `syncSessionWithTab` has been removed and replaced with `syncHost`. [Changelog](https://github.com/clerk/javascript/blob/main/packages/chrome-extension/CHANGELOG.md) [Sync Host Guide](https://clerk.com/docs/references/chrome-extension/sync-host) - The `storage` host permission is now required. [Changelog](https://github.com/clerk/javascript/blob/main/packages/chrome-extension/CHANGELOG.md) --- ## Waitlist mode - URL: https://clerk.com/changelog/2024-11-20-waitlist-sign-up-mode.md - Date: 2024-11-20 Launching a new product but not ready to open it up to everyone yet? **Waitlist Sign-up mode** is here to help you manage early access seamlessly. ## What's New? With Waitlist Sign-up mode, you have complete control over onboarding new users: - Your `My user id is {userId}
``` ## Usage with React Astro [offers a way](https://docs.astro.build/en/guides/integrations-guide/react) to use React inside your Astro application. `@clerk/astro` takes advantage of that and exposes components, hooks, and utilities for those cases. ```tsx {{ title: 'src/components/Header.tsx' }} import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/astro/react' export default function Header() { return ( <>My App
Welcome! Fill in the fields below to get started.
We've sent a code to your email.
Welcome back! Please sign in to continue.
We've sent a code to
{JSON.stringify(serverData, null, 2)}