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.
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 API 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
Sign In with Apple provides two button variants: Sign In with Apple and Continue with Apple. Choose the variant that fits best with the terminology of your sign-in experience.
There are three appearances for a Sign In with Apple button: white, white with an outline rule, and black. Choose the appearance that works best with the background on which you display the button.
Use on dark or colored backgrounds that provide sufficient contrast.
White with Outline Rule
Use on white or light-colored backgrounds that don’t provide sufficient contrast. Don’t place on dark or saturated backgrounds.
Use on white or light-colored backgrounds that provide sufficient contrast. Don’t use on black or dark backgrounds.
Button Size and Position
Prominently display a Sign In with Apple button. Make a Sign In with Apple button the same size as 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. You can change the corner radius to produce a button with square corners or a pill-shaped button. For developer guidance, see cornerRadius.
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|