āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/getting-started/quickstart.ios ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<TutorialHero beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", } ]} />
<Steps> ## Enable Native API <Include src="_partials/native-api-callout" />To get started using Clerk with iOS, create a new project in Xcode. Select SwiftUI as your interface and Swift as your language. See the Xcode documentation for more information.
Follow the Swift Package Manager instructions to install Clerk as a dependency.
When prompted for the package URL, enter https://github.com/clerk/clerk-ios. Be sure to add the package to your target.
Add your iOS application to the Native Applications page in the Clerk Dashboard. You will need your iOS app's App ID Prefix and Bundle ID.
To enable seamless authentication flows, you need to add an associated domain capability to your iOS app. This allows your app to work with Clerk's authentication services.
webcredentials:{YOUR_FRONTEND_API_URL}[!NOTE] Replace
{YOUR_FRONTEND_API_URL}with your Frontend API URL, which can be found on the Native Applications page in the Clerk Dashboard.
To use Clerk in your app, you must first configure and load Clerk.
@main app file.Clerk.Clerk instance.clerk instance into the SwiftUI environment using .environment(\.clerk, clerk) so your views can access it..task modifier that configures Clerk with your Clerk Publishable Key and loads it when the app starts.<SignedOut>You can retrieve your Publishable Key from the API keys page in the Clerk Dashboard.</SignedOut>import SwiftUI
import Clerk
@main
struct ClerkQuickstartApp: App {
@State private var clerk = Clerk.shared
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.clerk, clerk)
.task {
clerk.configure(publishableKey: "{{pub_key}}")
try? await clerk.load()
}
}
}
}
To render content based on whether a user is authenticated or not:
ContentView file.Clerk and access the shared Clerk instance that you injected into the environment in the previous step.clerk.user.import SwiftUI
import Clerk
struct ContentView: View {
@Environment(\.clerk) private var clerk
var body: some View {
VStack {
if let user = clerk.user {
Text("Hello, \(user.firstName ?? "User")")
} else {
Text("You are signed out")
}
}
}
}
Clerk provides prebuilt SwiftUI components that handle authentication flows and user management, eliminating the need to build custom forms and flows.
Update your ContentView to use Clerk's prebuilt components. Replace the existing content with the following code:
import SwiftUI
import Clerk
struct ContentView: View {
@Environment(\.clerk) private var clerk
@State private var authIsPresented = false
var body: some View {
VStack {
if clerk.user != nil {
UserButton()
.frame(width: 36, height: 36)
} else {
Button("Sign in") {
authIsPresented = true
}
}
}
.sheet(isPresented: $authIsPresented) {
AuthView()
}
}
}
The updated ContentView uses two key Clerk components:
AuthView: A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in".
UserButton: A circular button that displays the user's profile image. When tapped, it automatically presents the UserProfileView where users can manage their account, update their profile, and sign out.
Run your project. When you tap "Sign in", the AuthView will appear, allowing you to sign up or sign in.
</Steps>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā