Clerk Changelog

We're excited to introduce prebuilt UI views that make it incredibly easy to add authentication flows to your iOS applications.

These new SwiftUI views provide complete authentication experiences out of the box, eliminating the need to build custom sign-in and user management interfaces from scratch. With just a few lines of code, you can now add authentication and user management to your iOS app that matches iOS design standards and includes advanced features like multi-factor authentication, social sign-in, and comprehensive user profile management.

AuthView - Complete Authentication Flow

The AuthView provides a comprehensive authentication experience supporting both sign-in and sign-up flows, multi-factor authentication, password reset, account recovery and more.

import SwiftUI
import Clerk

struct HomeView: View {
  @Environment(\.clerk) private var clerk
  @State private var authIsPresented = false

  var body: some View {
    ZStack {
      if clerk.user != nil {
          UserButton()
            .frame(width: 36, height: 36)
      } else {
        Button("Sign in") {
          authIsPresented = true
        }
      }
    }
    .sheet(isPresented: $authIsPresented) {
      AuthView()
    }
  }
}

UserButton - Profile Access Made Simple

The UserButton displays the current user's profile image in a circular button and opens the full user profile when tapped.

.toolbar {
  ToolbarItem(placement: .navigationBarTrailing) {
    if clerk.user != nil {
      UserButton()
        .frame(width: 36, height: 36)
    }
  }
}

UserProfileView - Comprehensive Account Management

The UserProfileView provides a complete interface for users to manage their accounts, including personal information, security settings, account switching, and sign-out functionality.

import SwiftUI
import Clerk

struct ProfileView: View {
  @Environment(\.clerk) private var clerk

  var body: some View {
    if clerk.user != nil {
      UserProfileView(isDismissable: false)
    }
  }
}

ClerkTheme - Customization

The new theming system allows you to customize the appearance of all Clerk views to match your app's design.

import SwiftUI
import Clerk

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .environment(\.clerkTheme, customTheme)
    }
  }
}

let customTheme = ClerkTheme(
  colors: .init(
    primary: Color(.brandPrimary)
  ),
  fonts: .init(
    fontFamily: "Avenir"
  ),
  design: .init(
    borderRadius: 12
  )
)

Light and Dark Mode Support

All Clerk iOS views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.

Getting Started

To get started follow the Quickstart Guide and see the views docs:

• AuthView
• UserButton
• UserProfileView
• ClerkTheme

Note: Prebuilt iOS views are available on iOS platforms only (iOS, iPadOS, macCatalyst).

Feedback

We're excited to see what you build with these new views! Share your feedback and join the conversation in our Discord community⁠.

Now you can see all the organization domains your organizations have set up, visit the Dashboard and head to the Verified Domains tab⁠ in the Organization section of the Dashboard.

Additionally, you can access this data via Organization Domains in the Clerk Backend API.

At Clerk, our priority is to provide customers with safe, secure, and easy-to-deploy tools for user management and authentication. When it comes to authentication, each stage of the sign in or sign up flow is designed to minimize friction and get people using your application.

For example, if a user attempts to sign in with an identifier that does not match an existing account on your Clerk application, we inform the user that this identifier doesn't match an existing account. This immediate feedback fits the expectations of ordinary users, who may not remember how or whether they have signed up for your application.

Some of our customers also have a need to protect against user enumeration – when a malicious actor takes advantage of the fact that the error message discloses whether an account exists for a given identifier (like an email or phone number) to create a list of all of the accounts that exist within an application. We already offer all our customers protection against such attacks using a variety of rate limiting techniques.

However, some customers would prefer to remove the ability to determine whether an account exists entirely. Some examples of apps that might fall in this category are financial institutions concerned about targeted phishing attacks, or any website for which an existing account being associated with a given email or phone number is intended to be private to that user, such as perhaps a dating app. To accommodate these needs, we are excited to announce that a set of enhanced protections against user enumeration attacks can now be enabled in the Clerk Dashboard⁠, under the Attack Protection page.

With Enumeration Protection enabled, users attempting to sign in or sign up will no longer receive feedback that reveals if their identifier matches an existing account. Instead, they will be advanced to the next stage of the sign in or sign up flow, but attempts to complete the sign in or sign up will be rejected if the account does not exist, in the same way they would be if the credential in the next step, for example, a password, was incorrect. This makes it such that Clerk's response is the same whether or not a user account already exists, enhancing your application's protection against user enumeration attacks.

User security is our priority, and we are happy to bring these opt-in, enhanced protections against user enumeration attacks to our customers who need them.

Building on our recent billing button components, we're introducing a set of React hooks that enable you to build fully custom billing flows. These hooks provide direct access to billing data and functionality, giving you complete control over the user experience.

Control the checkout flow

You can now build your own checkout flow with Clerk Billing for both users and organizations. Leverage the useCheckout() hook to create a custom checkout experience. Choose between prompting users to enter their payment details or pay with a saved payment method.

Below you can see a simple example of a custom checkout flow that is using the <PaymentElement /> component where users can enter their payment details.

'use client'
import {
  CheckoutProvider,
  useCheckout,
  PaymentElementProvider,
  PaymentElement,
  usePaymentElement,
} from '@clerk/nextjs/experimental'

export default function CheckoutPage() {
  return (
    <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
      <CustomCheckout />
    </CheckoutProvider>
  )
}

function CustomCheckout() {
  const { checkout } = useCheckout()
  const { plan } = checkout

  return (
    <div className="checkout-container">
      <span>Subscribe to {plan.name}</span>

      <PaymentElementProvider checkout={checkout}>
        <PaymentSection />
      </PaymentElementProvider>
    </div>
  )
}

function PaymentSection() {
  const { checkout } = useCheckout()
  const { isConfirming, confirm } = checkout
  const { isFormReady, submit } = usePaymentElement()
  const isButtonDisabled = !isFormReady || isConfirming

  const subscribe = async () => {
    const { data } = await submit()
    await confirm(data)
  }

  return (
    <>
      <PaymentElement fallback={<div>Loading payment element...</div>} />
      <button disabled={isButtonDisabled} onClick={subscribe}>
        {isConfirming ? 'Processing...' : 'Complete Purchase'}
      </button>
    </>
  )
}

To enable users to pay with a saved payment method, you can use the usePaymentMethods() hook to display a list of saved payment methods.

import { usePaymentMethods } from '@clerk/nextjs/experimental'

function PaymentMethodSelector() {
  const { data: methods, isLoading } = usePaymentMethods()

  return (
    <div className="payment-methods">
      <h3>Select Payment Method</h3>
      {methods?.map((method) => (
        <button key={method.id} className="payment-method-option">
          {method.cardType} ending in {method.last4}
        </button>
      ))}
    </div>
  )
}

Design your own pricing table

usePlans() fetches your instance's configured plans, perfect for building custom pricing tables or plan selection interfaces.

import { usePlans } from '@clerk/nextjs/experimental'

function CustomPricingTable() {
  const { data: plans, isLoading } = usePlans({
    for: 'user',
    pageSize: 10,
  })

  if (isLoading) return <div>Loading plans...</div>

  return (
    <div className="pricing-grid">
      {plans?.map((plan) => (
        <div key={plan.id} className="plan-card">
          <h3>{plan.name}</h3>
          <p>{plan.description}</p>
          <p>
            {plan.currency} {plan.amountFormatted}/month
          </p>
          <ul>
            {plan.features.map((feature) => (
              <li key={feature.id}>{feature.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

Display subscription details

Access current subscription details to build custom account management interfaces and display billing status.

import { useSubscription } from '@clerk/nextjs/experimental'

function SubscriptionStatus() {
  const { data: subscription, isLoading } = useSubscription()

  if (!subscription) return <div>No active subscription</div>

  return (
    <div className="subscription-status">
      <h3>Current Plan: {subscription.plan.name}</h3>
      <p>Status: {subscription.status}</p>
      <p>Next billing: {subscription.nextPayment.date.toLocaleDateString()}</p>
    </div>
  )
}

Complete Control Over Billing

For detailed documentation, visit:

• usePlans()
• usePaymentMethods()
• useSubscription()
• useCheckout()
• usePaymentElement()

For advanced usage examples, visit:

• Checkout with a new payment method
• Checkout with an existing payment method
• Add a new payment method

Previously, organizations were limited to a maximum of 50 permissions, which could be restrictive for complex applications requiring granular access control. This limitation often forced developers to consolidate permissions or find workarounds when building sophisticated authorization systems.

Organizations can now have unlimited permissions, giving you complete flexibility to model your application's access control exactly as needed. Whether you're building a complex enterprise application with hundreds of different resource types or a multi-tenant SaaS with intricate permission structures, you're no longer constrained by arbitrary limits.

We’ve made significant improvements to Clerk’s infrastructure to better withstand outages and regional disruptions.

As part of our ongoing commitment to reliability and in response to the June 26th service outage, we’ve implemented automatic regional failover for critical parts of our system. This enhancement ensures that, in the event of a major disruption in one region, traffic is rerouted to healthy infrastructure in real time, without any manual intervention. This change reduces the risk of widespread service impact during provider-level incidents and brings us closer to our long-term goal of platform-level fault tolerance.

We’re not stopping here. We’re actively working on improving the resilience of stateful systems and are exploring strategies for increased redundancy across providers.

Our goal is simple: to keep Clerk highly available and dependable even when the unexpected happens.