{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 Category: SSO Description: 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](/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 Category: Product Description: 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: ```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 Category: SDK Description: 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](/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) --- # EASIE Support and no more SSO fees URL: https://clerk.com/changelog/2024-11-20-easie.md Date: 2024-11-20 Category: SSO Description: This easiest way for enterprises to adopt full-featured SSO. ## EASIE Enterprise Connections We've added a new Enterprise Connection type: [EASIE SSO](https://easie.dev). 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](/blog/clerk-launches-easio-sso-and-drops-all-sso-fees) to learn more about EASIE and why we're cutting our SSO prices so drastically. --- # Waitlist mode URL: https://clerk.com/changelog/2024-11-20-waitlist-sign-up-mode.md Date: 2024-11-20 Category: Product Description: Get your product launch off to a smooth start with Waitlist Sign-up mode. 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)}