Skip to main content
Auth0 Universal Components for iOS use a design token model. Visual properties such as colors, typography, spacing, corner radii, and component sizes are each expressed as a token that you can override without changes to your layouts. Universal Components ship with a default Auth0 theme. You can provide your own theme to match your brand.

​
How theming works

Universal Components for iOS use a SwiftUI @Environment property wrapper theme. Apply the .auth0Theme(_:) modifier to any SwiftUI view. Every child component renders the injected Auth0Theme automatically.

​
Zero configuration

If you do not configure a theme, Universal Components for iOS render the Auth0 default theme. The following example displays the MyAccountAuthMethodsView component without any customization: 
import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
    }
}
No additional setup is required to load the Auth0 default theme. Universal Components apply it automatically when no custom theme is provided.

​
Override a subset of tokens

You can override specific tokens while Universal Components for iOS render every other token using the Auth0 default theme. The following example overrides only the primary background and text colors: 
import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
            .auth0Theme(
                Auth0Theme(
                    colors: DefaultAuth0ColorTokens(
                        background: DefaultAuth0BackgroundColorTokens(primary: Color("BrandBlue")),
                        text: DefaultAuth0TextColorTokens(onPrimary: .white)
                    )
                )
            )
    }
}
The same applies to typography, spacing, radius, and size tokens. The following example overrides typography and button radius: 
Auth0Theme(
    typography: DefaultAuth0TypographyTokens(
        body: Auth0TextStyle(
            font: .custom("Lato-Regular", size: 17),
            tracking: 0,
            lineSpacing: 7
        ),
        label: Auth0TextStyle(
            font: .custom("Lato-Medium", size: 16),
            tracking: 0.1,
            lineSpacing: 5
        )
    ),
    radius: DefaultAuth0RadiusTokens(button: 24)
)

​
Configure a full brand theme

Provide your own branding theme that implements the three color category properties, then wire them into an Auth0ColorTokens container: 
struct BrandBackground: Auth0BackgroundColorTokens {
    var primary: Color { Color("Background/Primary", bundle: .main) }
    var primarySubtle: Color { Color("Background/Primary", bundle: .main).opacity(0.35) }
    var inverse: Color { Color("Background/Inverse", bundle: .main) }
    var accent: Color { Color("Background/Accent", bundle: .main) }
    var layerTop: Color { Color("Background/LayerTop", bundle: .main) }
    var layerMedium: Color { Color("Background/LayerMedium", bundle: .main) }
    var layerBase: Color { Color("Background/LayerBase", bundle: .main) }
    var error: Color { Color("Background/Error", bundle: .main) }
    var errorSubtle: Color { Color("Background/ErrorSubtle", bundle: .main).opacity(0.35) }
    var success: Color { Color("Background/Success", bundle: .main) }
    var successSubtle: Color { Color("Background/SuccessSubtle", bundle: .main) }
}

struct BrandColors: Auth0ColorTokens {
    var background: any Auth0BackgroundColorTokens { BrandBackground() }
    var text: any Auth0TextColorTokens { DefaultAuth0TextColorTokens() }
    var border: any Auth0BorderColorTokens { DefaultAuth0BorderColorTokens() }
}

MyAccountAuthMethodsView()
    .auth0Theme(Auth0Theme(colors: BrandColors()))

​
Read the theme in your own views

Access the @Environment(\.auth0Theme) property wrapper to apply the same tokens in any Swift view: 
struct MyCustomStep: View {
    @Environment(\.auth0Theme) private var theme

    var body: some View {
        VStack(spacing: theme.spacing.md) {
            Text("Almost there!")
                .auth0TextStyle(theme.typography.titleLarge)
                .foregroundStyle(theme.colors.text.bold)

            Button("Continue") { /* ... */ }
                .frame(height: theme.sizes.buttonHeight)
                .background(theme.colors.background.primary)
                .cornerRadius(theme.radius.button)
        }
        .padding(theme.spacing.md)
    }
}

​
Token reference

Colors are split across three focused protocols: Auth0BackgroundColorTokens, Auth0TextColorTokens, and Auth0BorderColorTokens. These are aggregated into the Auth0ColorTokens protocol.All color assets are adaptive. The asset catalog handles light and dark mode automatically.Background primary
TokenUsage
background.primaryCTA button background, primary borders
background.primarySubtleLow-emphasis primary background
background.inverseContrast-flipped background
background.accentBranded or featured UI highlight
Background layers
TokenUsage
background.layerTopOverlays and modals
background.layerMediumCards and raised containers
background.layerBaseMain app background
Background feedback
TokenUsage
background.errorError state container
background.errorSubtleSubtle error banner
background.successSuccess state container
background.successSubtleSubtle success banner
Text content
TokenUsage
text.boldHeadings and primary body text
text.regularSecondary copy, descriptions, captions
text.disabledDisabled and placeholder text
Text on color surfaces
TokenUsage
text.onPrimaryText and icons on background.primary
text.onSuccessText and icons on background.success
text.onErrorText and icons on background.error, validation messages
Border
TokenUsage
border.boldHigh-contrast or selected borders
border.regularInput field and card borders
border.subtleDelicate dividers
border.shadowElevation shadow border
Each token is an Auth0TextStyle bundling font, tracking, and lineSpacing. Apply them using the .auth0TextStyle(_:) view modifier.
TokenTypefaceSizeWeightLine heightTrackingUsage
displayLargeInter34 ptSemiBold41 pt−0.20 ptHero headings, passkey enrollment
displayMediumInter28 ptSemiBold34 pt−0.10 ptMajor screen titles, error headings
displayInter22 ptSemiBold28 pt−0.05 ptSection-level headings
titleLargeInter20 ptSemiBold25 pt0 ptScreen titles, subheading cards
titleInter17 ptSemiBold24 pt0 ptIn-content titles
bodyInter17 ptRegular24 pt0 ptDescriptions, body copy
bodySmallInter15 ptRegular20 pt+0.10 ptSecondary body copy, footnotes
labelInter16 ptMedium21 pt+0.10 ptButton labels, form field labels
helperInter13 ptRegular18 pt+0.20 ptCaptions, helper text
overlineInter11 ptRegular16 pt+0.77 ptOverline and category labels
If typeface Inter is not bundled in the host application, SwiftUI uses the SF Pro typeface automatically.
Spacing defaults to a 4 pt grid. Use the token name in design handoffs to customize spacing, not the raw pixel value.
TokenDefaultDescription
xxs4 ptMinimal gap between tightly coupled elements
xs8 ptSmall gap between grouped elements
sm12 ptMedium internal padding
md16 ptStandard component and container padding
lg24 ptLarger padding for major sections
xl32 ptExtra-large padding
xxl48 ptDouble-extra-large padding
xxxl56 ptTriple-extra-large padding
TokenDefaultUsage
small8 ptSingle character-input cells (OTP, PIN digits)
medium12 ptBanner and feedback cards
inputField14 ptText inputs, code display containers
button16 ptCTA buttons, auth-method cards
pill24 ptPill-shaped outline buttons
TokenDefaultUsage
buttonHeight48 ptAll primary and secondary action buttons
inputHeight60 ptText and phone-number input fields
size4xlDimen48 ptWidth of a single character-input cell
size5xlDimen56 ptHeight of a single character-input cell
containerSizeLargeDimen52 ptHeight of a read-only code display container
iconSmall16 ptSmall icons—chevrons, info indicators, checkmarks
iconMedium24 ptStandard icons—authentication-method images
iconLarge28 ptLarge icons—three-dots menu

​
Learn more

Install the iOS SDK

Platform prerequisites and installation for iOS.

Build a Self-Service Account Security Interface

Initialize the SDK and wire the token provider to your Auth0 tenant.