Skip to main content

UserButton

The UserButton is a circular button that displays the signed-in user's profile image.

The UserButton is a circular button that displays the user's profile image. When tapped, it presents a sheet with the UserProfileView.

Important

When a user is signed out, the UserButton renders the signedOutContent you provide. If you don't provide any, it renders nothing.

  • Name
    signedOutContent
    Type
    @ViewBuilder () -> SignedOutContent
    Description

    A view builder that renders when no user is signed in. Defaults to EmptyView, which renders nothing.

Usage

The following examples show how to use the UserButton in your app.

Basic usage

import SwiftUI
import ClerkKit
import ClerkKitUI

struct HomeView: View {
  @State private var authViewIsPresented = false

  var body: some View {
    VStack {
      UserButton(signedOutContent: {
        Button("Sign in") {
          authViewIsPresented = true
        }
      })
    }
    .prefetchClerkImages()
    .sheet(isPresented: $authViewIsPresented) {
      AuthView()
    }
  }
}
import SwiftUI
import ClerkKit
import ClerkKitUI

struct ContentView: View {
  @State private var authViewIsPresented = false

  var body: some View {
    NavigationView {
      VStack {
        Text("Welcome!")
      }
      .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
          UserButton(signedOutContent: {
            Button("Sign in") {
              authViewIsPresented = true
            }
          })
        }
      }
    }
    .prefetchClerkImages()
    .sheet(isPresented: $authViewIsPresented) {
      AuthView()
    }
  }
}

Customization

To learn how to customize Browser views, see the dedicated guide.

Note

Browser iOS views automatically localize based on the current SwiftUI locale and the device's preferred language. To see the languages Browser iOS currently supports, check the SDK's Localizable.xcstrings file. The list of supported languages expands as Browser adds new translations.

If you want to test localization in SwiftUI, you can force a locale on the view. For example:

AuthView()
  .environment(\.locale, .init(identifier: "es"))

For more about working with locales in SwiftUI, see Apple's locale environment value documentation.

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

Feedback

What did you think of this content?

Last updated on