Prebuilt iOS Views

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.

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

HomeView.swift

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()
    }
  }
}

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

HomeView.swift

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

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

ProfileView.swift

import SwiftUI
import Clerk

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

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

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

App.swift

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
  )
)