diff --git a/docs/quickstarts/ios.mdx b/docs/quickstarts/ios.mdx index 0aef3efdfe..945282e24a 100644 --- a/docs/quickstarts/ios.mdx +++ b/docs/quickstarts/ios.mdx @@ -47,28 +47,30 @@ description: Add authentication and user management to your iOS app with Clerk. To use Clerk in your app, you must first configure and load `Clerk`. - Inside your new project in Xcode, open your `@main` app file. - - Import `ClerkSDK`. - - Add a new variable `clerk` marked with the `@ObservedObject` property wrapper. + - Import `Clerk`. + - Create a reference to the shared `Clerk` instance. - Replace `ContentView()` with the below `ZStack`. + - Inject your reference to the shared `clerk` instance into the environment. - Attach a `.task` modifier to the new `ZStack`. In the body of the task, configure `clerk` with your Publishable Key, and then load `clerk`. You can get your Publishable Key from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard. - ```swift {{ filename: 'ClerkQuickstartApp.swift', mark: [2, 6, [10, 20]] }} + ```swift {{ filename: 'ClerkQuickstartApp.swift', mark: [2, 6, [10, 21]] }} import SwiftUI - import ClerkSDK + import Clerk @main struct ClerkQuickstartApp: App { - @ObservedObject private var clerk = Clerk.shared + private var clerk = Clerk.shared var body: some Scene { WindowGroup { ZStack { - if clerk.loadingState == .notLoaded { - ProgressView() - } else { + if clerk.isLoaded { ContentView() + } else { + ProgressView() } } + .environment(clerk) .task { clerk.configure(publishableKey: "{{pub_key}}") try? await clerk.load() @@ -83,16 +85,16 @@ description: Add authentication and user management to your iOS app with Clerk. To render content based on whether a user is authenticated or not: - Open your `ContentView` file. - - Import `ClerkSDK`. - - Add a new variable `clerk` marked with the `@ObservedObject` property wrapper. + - Import `Clerk`. + - Access the shared `Clerk` instance that you injected into the environment in the previous step. - Replace the content of the view body with a conditional that checks for a `clerk.user`. ```swift {{ filename: 'ContentView.swift', mark: [2, 5, [8, 14]] }} import SwiftUI - import ClerkSDK + import Clerk struct ContentView: View { - @ObservedObject private var clerk = Clerk.shared + @Environment(Clerk.self) private var clerk var body: some View { VStack { @@ -114,7 +116,7 @@ description: Add authentication and user management to your iOS app with Clerk. ```swift {{ filename: 'SignUpView.swift' }} import SwiftUI - import ClerkSDK + import Clerk struct SignUpView: View { @State private var email = "" @@ -180,7 +182,7 @@ description: Add authentication and user management to your iOS app with Clerk. ```swift {{ filename: 'SignInView.swift' }} import SwiftUI - import ClerkSDK + import Clerk struct SignInView: View { @State private var email = "" @@ -253,10 +255,10 @@ description: Add authentication and user management to your iOS app with Clerk. ```swift {{ filename: 'ContentView.swift', mark: [12] }} import SwiftUI - import ClerkSDK + import Clerk struct ContentView: View { - @ObservedObject private var clerk = Clerk.shared + @Environment(Clerk.self) private var clerk var body: some View { VStack { @@ -279,10 +281,10 @@ description: Add authentication and user management to your iOS app with Clerk. ```swift {{ filename: 'ContentView.swift', mark: [[11, 13]] }} import SwiftUI - import ClerkSDK + import Clerk struct ContentView: View { - @ObservedObject private var clerk = Clerk.shared + @Environment(Clerk.self) private var clerk var body: some View { VStack {