Skip to main content
Docs

AuthView

The AuthView renders a comprehensive authentication interface that handles both user sign-in and sign-up flows.

The AuthView renders a comprehensive authentication interface with support for multiple sign-up flows and sign-in methods, multi-factor authentication, password reset, and account recovery. The functionality of the AuthView is controlled by the instance settings you specify in the Clerk Dashboard, such as sign-in and sign-up options and social connections.

Parameters

  • Name
    mode
    Type
    AuthView.Mode
    Description

    The authentication mode that determines which flows are available to the user. Accepts the following values:

    • .signInOrUp: Automatically determines whether to sign users in or sign them up based on whether they already have an account. This is the default mode that provides seamless authentication without requiring users to choose between sign-in and sign-up.
    • .signIn: Restricts the interface to sign-in flows only. Users can only authenticate with existing accounts.
    • .signUp: Restricts the interface to sign-up flows only. Users can only create new accounts.

    Defaults to .signInOrUp.

  • Name
    isDismissable
    Type
    Bool
    Description

    Whether the view can be dismissed by the user. When true, a dismiss button appears and the view closes automatically after successful authentication. When false, no dismiss button is shown. Defaults to true.

Usage

The following examples show how to use the AuthView component in your iOS app.

Basic usage as a dismissable sheet

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

Full-screen authentication (non-dismissable)

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

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

Customization

To learn how to customize Clerk iOS components, see the dedicated guide.

If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on