Clerk Changelog

iOS SDK Beta

Category
iOS
Published

Our new iOS SDK is here to ensure that your users enjoy a smooth, integrated sign-in experience, whether they're on an iPhone, iPad, or any other Apple device.

In a world where users prefer different devices and often switch between them, having a consistent and convenient authentication experience across platforms is more important than ever.

Our Expo SDK has long enabled the creation of universal applications for Android, iOS, and the web using a single React codebase. However, we recognize that some customers prefer native SDKs for optimized performance, direct access to platform-specific features, and seamless integration with other native components.

That's why we’re excited to introduce Clerk iOS (Beta)! The Clerk iOS SDK is a toolkit designed to integrate Clerk’s authentication and user management services with applications made for the Apple ecosystem. Built with Swift, the SDK adheres to modern standards, delivering the idiomatic and consistent developer experience you expect from Clerk.

Clerk iOS is launching in beta today, with support for building fully custom sign-up and sign-in flows for iOS, macOS, visionOS, tvOS, and watchOS. Along with the release, we're also sharing reference documentation and a quickstart to get you started.

Now, on to some highlights of the Clerk iOS SDK...

SwiftUI

The Clerk iOS SDK was built with SwiftUI in mind, allowing you to harness it's declarative approach to user interface on all Apple platforms.

ContentView.swift
import SwiftUI
import ClerkSDK

struct ContentView: View {
  @ObservedObject private var clerk = Clerk.shared

  var body: some View {
    VStack {
      if let user = clerk.user {
        Text("Hello, \(user.id)")
      } else {
        Text("You are signed out")
      }
    }
  }
}

Async/Await

The Clerk iOS SDK makes use of the latest in Swift networking, allowing your code to be as readable and expressive as possible.

// Create a new sign up
let signUp = try await SignUp.create(
  strategy: .standard(
    emailAddress: "newuser@clerk.com", 
    password: "••••••••••"
  )
)
      
// Send an email with a one time code 
// to verify the user's email
try await signUp.prepareVerification(
  strategy: .emailCode
)

Social Connections (OAuth)

Authenticate with your favorite social providers in just a few lines of code.

try await SignIn
  .create(strategy: .oauth(.google))
  .authenticateWithRedirect()

State Management

Let the Clerk iOS SDK take care of managing your user's authentication state so you can get back to building your app.

SwiftUI
@ObservedObject private var clerk = Clerk.shared

var body: View {
  if let session = clerk.session {
    Text(session.id)
  } else {
    Text("No session")
  }
}
UIKit
override func viewDidLoad() {
  super.viewDidLoad()
  
  if let session = Clerk.shared.session {
    sessionLabel.text = session.id
  } else {
    sessionLabel.text = "No session"
  }
}

Building towards GA

As an official Clerk SDK, you can expect responsive support, even while in beta. Your feedback is critical during this testing period to ensure Clerk iOS is the best it can be. If you have questions or want to talk to other users who are trying out the beta, join the Clerk Discord community.

Please note the SDK is currently in beta. Certain features - notably pre-built components, organizations, and magic links - are not yet implemented, but we're working on it. You can see a list of the currently available features here.

The API will likely undergo breaking changes until the 1.0.0 release next year.

Contributor
Mike Pitre

More granular control over organization creation limits

Administrators can now more easily control how many organizations their users are allowed to create, providing extra controls for your B2B applications.

Configure a default setting for all users via API or from the Clerk Dashboard, and then customize the limit on a per-user basis (also via the Backend API or in a specific User detail view in the Clerk Dashboard)

For some applications, this unlocks the ability to restrict org creation initially until a user has taken additional actions - like signing up for a paid plan. You simply set the defaults and Clerk keeps track of the creation and deletion of organizations.

Contributor
Nicolas Lopes

Add custom menu items to <UserButton />

Category
React
Published

With our latest release, you can now add custom menu items to <UserButton /> component.

UserButton Customization

The <UserButton /> component now supports the following customizations:

  • Custom Links: Add external links to the menu using the <UserButton.Link /> component.
  • Custom Actions: Define custom actions that can trigger specific behaviors within your app using the <UserButton.Action /> component. This includes implementing custom logic with onClick handlers or opening the user profile modal to a specific page.

Here is an example of how to use our new React API for <UserButton /> customization:

<UserButton>
  <UserButton.MenuItems>
    <UserButton.Link label="Terms" labelIcon={<Icon />} href="/terms" />
    <UserButton.Action label="Help" labelIcon={<Icon />} open="help" />
    {/* Navigate to `/help` page when UserProfile opens as a modal. (Requires a custom page to have been set in `/help`) */}
    <UserButton.Action label="manageAccount" />
    <UserButton.Action label="Chat Modal" labelIcon={<Icon />} onClick={() => setOpenChat(true)} />
  </UserButton.MenuItems>
</UserButton>

For more information and implementation instructions, please refer to our documentation for <UserButton />.

Contributors
Nikos Papageorgiou
Emmanouela Pothitou

Set Active Organization by Slug

Category
SDK
Published

It is now possible to set an active organization by URL slug, making it easier to use the URL as the source of truth for the active organization.

For applications that include the organization slug in their URL path, when managing the Clerk active organization, it is common to have an organization slug handy from the URL, but not necessarily an organization ID.

Now, it's possible to call setActive with an organization slug. This saves an extra call to fetch the organization ID, improving performance and reducing complexity.

The example below creates a component that uses The Next.js useParams() hook to get the organization slug from the URL, and then the setActive method to set that organization as active.

utils/sync-active-organization-from-url-to-session.tsx
'use client'

import { useEffect } from 'react'
import { useParams } from 'next/navigation'
import { useAuth, useOrganizationList } from '@clerk/nextjs'

export function SyncActiveOrganizationFromURLToSession() {
  const { setActive, isLoaded } = useOrganizationList()

  // Get the organization slug from the session
  const { orgSlug } = useAuth()

  // Get the organization slug from the URL
  // e.g. https://example.com/orgSlug/<your-org-slug>
  const { orgSlug: urlOrgSlug } = useParams() as { orgSlug: string }

  useEffect(() => {
    if (!isLoaded) return

    // If the org slug in the URL is not the same as the org slug in the session (the active organization),
    // set the active organization to be the org from the URL.
    if (urlOrgSlug !== orgSlug) {
      void setActive({ organization: urlOrgSlug })
    }
  }, [orgSlug, isLoaded, setActive, urlOrgSlug])

  return null
}
Contributors
Izaak Lauer
Robert Soriano

Cognito password migrator

Category
Migration
Published

Seamlessly migrate AWS Cognito user passwords into Clerk

We’re excited to share with you the release of our Cognito password migrator! Existing AWS Cognito customers can now migrate their users into Clerk, and their users will be able to sign in to Clerk with their prior cognito passwords — No password reset flow required.

Visit our guide to learn more about how to use the Cognito password migrator.

Contributor
Kevin Wang

Development Mode UI Changes

Category
Product
Published

Clerk's development instances are great for getting started with Clerk, making local development smooth and simple, and testing out features. However, we have seen many users go to production using their development instance by accident - your app looks exactly the same, and works similarly enough that most wouldn't notice the difference. But if this does happen, it turns into a substantial issue.

Development instances have a more relaxed security posture, are not indexed by search engines, use shared OAuth credentials for social providers by default, and lack custom domain support. In addition, development instances are capped at 100 users, 20 SMS messages, and have "development" prefixes on SMS and email messages, which quickly becomes a large problem if accidentally taken to production. Especially so if the user or SMS limits are hit, which can stop your app from being able to sign up or log in users - certainly not something you want to happen in production 😰. And on top of that, you then need to go through a process of migrating users from your development to your production instance to fix it, which can be challenging and time consuming.

In order to combat this common issue, we made some modifications to the design Clerk's UI components in a specific effort to make it more clear that you're using a development instance. Our hope is that, with these changes, nodoby ends up taking a development instance to production by accident anymore. You can see an example of the change on the <SignIn> component here:

Clerk's SignIn component in development mode

If you need to deactivate this UI change temporarily to simulate how components will look in production, you can do so by adding the unsafe_disableDevelopmentModeWarnings layout appearance prop to <ClerkProvider> as such:

<ClerkProvider
  appearance={{
    layout: {
      unsafe_disableDevelopmentModeWarnings: true,
    },
  }}
/>

It should be noted that this UI change initially will only apply to newly created Clerk applications. If you have an existing application, you won't see this UI change. We will be rolling out a way for existing applications to enable this feature in the coming weeks.

Contributor
Vaggelis Yfantis