Prebuilt iOS Components
- Category
- iOS
- Published
Ready-to-use authentication components for iOS apps.
We're excited to introduce prebuilt UI components that make it incredibly easy to add authentication flows to your iOS applications.
These new SwiftUI components 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 component 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 component 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 component 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 components 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 components 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 components docs:
Note: Prebuilt iOS components are available on iOS platforms only (iOS, iPadOS, macCatalyst).
Feedback
We're excited to see what you build with these new components! Share your feedback and join the conversation in our Discord community.