Prebuilt iOS Views
- Category
- iOS
- Published
Ready-to-use authentication views for iOS apps.
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:
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.