Sign in with Apple
Displaying a Sign in with Apple button in your app or website means that people can sign in or sign up with just a tap using the Apple ID they already have, and skip filling out forms, verifying email addresses, and choosing passwords. Sign in with Apple provides a new, more private way to simply and quickly sign into apps and websites while giving people a consistent sign-in experience they can trust and the convenience of not having to remember multiple accounts and passwords. In cases where you choose to ask for a name and email address, people have the option to keep their email address private and share a unique, random email address instead. For developer guidance, see AuthenticationServices.
Sign in with Apple makes it easy for people to authenticate with Face ID or Touch ID and has two-factor authentication built in for an added layer of security. Apple does not use Sign in with Apple to profile users or their activity in apps.
Designing Account Setup and Sign-In
Follow these guidelines to provide a great account setup and sign-in experience on all platforms and the web.
Ask people to sign in only in exchange for value. For example, people might need to create an account to personalize the experience, access additional features, or synchronize data.
Consider Sign in with Apple for every version of your app and website. For a consistent sign-in experience, it's recommended that you offer Sign in with Apple for your app and website across all Apple platforms and the web.
Delay sign-in as long as possible. People often abandon apps when they're forced to sign in before doing anything useful. Give them a chance to familiarize themselves with your app before making a commitment to it. For example, a live-streaming app could let people explore the content that's offered before signing in to stream something.
When possible, wait until after people make a purchase before asking them to create an account. If you support a guest checkout system, manage the checkout process after the transaction completes to give people a quick way to create an account.
Explain the benefits of signing in and how to sign up for your service. If your app requires signing into an account, display a brief, friendly explanation on the login screen that describes the reasons for the requirement and its benefits. Also, remember that not everyone using your app has an account from the start.
Sign in with Apple Buttons
To help people set up an account and sign in, it's best to use the familiar buttons that Apple provides for Sign in with Apple. When you use the system-provided APIs to create a Sign in with Apple button, you get:
- A button that's guaranteed to use an Apple-approved title, font, color, and style
- Assurance that the button's contents maintain ideal proportions as you change its style
- Automatic translation of the button's title into the language that's set for the device
- Support for configuring the button's corner radius to match the style of your UI (iOS, macOS, and web)
- A system-provided alternative text label that lets VoiceOver describe the button
For developer guidance, see ASAuthorizationAppleIDButton (iOS, macOS, and tvOS), WKInterfaceAuthorizationAppleIDButton (watchOS), and Displaying and Configuring Sign in with Apple Buttons (web).
The system provides two button variants for iOS, macOS, tvOS, and web: Sign in with Apple and Continue with Apple. Choose the variant that fits best with the terminology of your sign-in experience.
For watchOS, the system provides one variant: Sign in.
Depending on the platform, the system provides up to three appearances for a Sign in with Apple button: white, white with an outline, and black. Choose the appearance that works best with the background on which you display the button.
The white style is available in iOS, macOS, tvOS, and web. Use this style on dark or colored backgrounds that provide sufficient contrast.
In tvOS, the Sign in with Apple button is focusable, so it can look different in different states. Here is the unfocused state.
White with Outline
The white outlined style is available in iOS, macOS, and web. Use this style on white or light-colored backgrounds that don’t provide sufficient contrast; don't use it on dark or saturated backgrounds.
The black style is available on all platforms and the web. Use this style on white or light-colored backgrounds that provide sufficient contrast; don't use it on black or dark backgrounds.
The watchOS Sign in with Apple button uses the system-defined dark gray appearance to contrast with the device's pure black background.
As with the white button style in tvOS, the black style of the Sign in with Apple button is also focusable, so it can look different in different states. Here is the unfocused state.
Button Size and Position
Prominently display a Sign in with Apple button. Make a Sign in with Apple button no smaller than other sign-in buttons, and avoid making people scroll to see the button.
Adjust the corner radius to match the appearance of other buttons in your app. By default, the Sign in with Apple button has rounded corners. In iOS, macOS, and the web, you can change the corner radius to produce a button with square corners or a pill-shaped button. For developer guidance, see cornerRadius (iOS and macOS) and Displaying and Configuring Sign in with Apple Buttons (web).
Maintain the minimum button size and margin around the button. Be mindful that the button title may vary in length depending on the locale. Use the following values for guidance.
|Minimum width||Minimum height||Minimum margin|
|140pt (140px @1x, 280px @2x)||30pt (30px @1x, 60px @2x)||1/10 of the button's height|