# Sign-in screen

> A sign-in screen is where an app asks who someone is. Apple asks to require an account only when the core function needs one, and to delay the request until people have seen what the app does.

Page: https://www.appetiteui.com/glossary/sign-in-screen. Sign-in screen design: when to ask and what to offer. Also called Login screen, Account creation, Sign-up screen.

## Why it matters

People often abandon apps that force sign-in before anything useful. Letting them look first, and asking at the moment of commitment, such as a purchase, keeps them.

When an account is required, a short line on why and what it gives belongs on the screen.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Managing accounts: Sign in with Apple, passkeys | Credential Manager sign-in | Sign in and Sign up screens |
| Preferred method | Sign in with Apple, else passkey | Credential Manager with passkeys | See below |
| Layouts in the file | Social first, and form first | Same screens | See below |

## In Appetite UI

The Onboarding screens draw sign-in two ways. Social first has four round buttons for X, Apple, Facebook and Google, an or divider, Email and Password fields with a Forgot password link, and a Sign in button. Form first puts the fields first and the wide Apple and Google buttons after the divider.

## Example

A shopping app lets people browse and fill a cart. Sign-in appears at checkout, with a line saying the account keeps orders and addresses.

## Common mistakes

- Sign-in before any value is shown.
- A generic Sign In button when the method is Face ID or Apple.
- Calling a login credential a passcode, which people read as the device passcode.
- Offering account creation with no way to delete the account.

## Questions

### When should an app ask people to sign in?

As late as possible. Apple suggests letting people get a sense of the app first, for example browsing and asking at purchase.

### Should a sign-in screen show social buttons first?

It depends on what most people use. Appetite UI draws both orders so a team can test them.

## Sources

1. [Apple Human Interface Guidelines: Managing accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts)
2. [Android Developers: Credential Manager](https://developer.android.com/identity/sign-in/credential-manager)

## Related

- Docs: [Onboarding app screens](https://www.appetiteui.com/docs/screens-onboarding)
- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Article: [Mobile onboarding screen patterns for iOS and Android](https://www.appetiteui.com/blog/mobile-onboarding-screen-patterns)
- Glossary: [Passkey](https://www.appetiteui.com/glossary/passkey)
- Glossary: [Onboarding](https://www.appetiteui.com/glossary/onboarding)
- Glossary: [Form validation](https://www.appetiteui.com/glossary/form-validation)