Login Screen Design: Mobile Login Examples

Compare how mobile apps handle identity choice, verification and account recovery around the login form.

13 reviewed screens · 2 apps · Source versions shown for each example

Can someone recover without restarting?

Keep the submitted address visible beside verification so mistakes are easy to spot.
Offer recovery when an emailed code expires or an external provider is cancelled.
Test with the keyboard open and large text enabled; a resting screenshot hides layout problems.

Looking for web auth references? Compare login page design examples from captured websites, including identity choice, recovery and email verification.

Claude · Aug 2026

Offer several sign-in routes

Google and Apple buttons appear above a personal or work email field and policy links.

Consider: Keep alternative account routes discoverable while identifying their providers.

App collection Source ↗

Claude · Aug 2026

Keep context above the keyboard

The email field and legal links remain above the on-screen keyboard while the illustration becomes smaller.

Consider: Test the smallest supported viewport with the keyboard open, not just the resting form.

App collection Source ↗

Claude · Aug 2026

Show the submitted-address action

A filled email field has a circular arrow action at its trailing edge.

Consider: Give icon-only submit actions accessible names and clear enabled states.

App collection Source ↗

Claude · Aug 2026

Replace the action with progress

A spinner occupies the email submission action while the keyboard is absent.

Consider: Prevent duplicate submissions and announce progress without moving the field.

App collection Source ↗

Claude · Aug 2026

Explain the email handoff

A card says to check email to finish signing in and offers Change email address.

Consider: Provide a recovery route before users leave the app to retrieve a code.

App collection Source ↗

Claude · Aug 2026

Place code entry inside the explanation

The code input appears inside the email confirmation card above the numeric keyboard.

Consider: Group the challenge and its purpose; support platform code autofill where appropriate.

App collection Source ↗

Claude · Aug 2026

Keep the code visible during entry

The verification field contains a partially entered numeric code while the change-address link remains visible.

Consider: Do not hide the recovery action merely because input has begun.

App collection Source ↗

Claude · Aug 2026

Show verification in progress

A spinner appears beside a filled code and the change-address action is visually muted.

Consider: Explain waits to assistive technology and restore recovery actions after a failure.

App collection Source ↗

Notion Mail · Sep 2026

Show the account-method menu

A notion.so browser sheet lists Google, Apple, Microsoft, Passkey, SSO and Email.

Consider: A rich provider menu adds flexibility but should keep each route easy to distinguish.

App collection Source ↗

Notion Mail · Sep 2026

Expand the chosen email method

An email field and Continue action sit below the provider menu in the browser sheet.

Consider: Keep the active method evident when alternate methods remain visible.

App collection Source ↗

Notion Mail · Sep 2026

Retain the entered address

The filled email field offers a clear control and a Continue button.

Consider: Let users correct identifiers before starting verification.

App collection Source ↗

Notion Mail · Sep 2026

Request the emailed code in place

A verification-code field appears beneath the email field with a sent-to-inbox explanation.

Consider: Keep the address and challenge together so users can verify the destination.

App collection Source ↗

Notion Mail · Sep 2026

Make verification submission explicit

The code is filled and a Continue action remains below the fields.

Consider: An explicit submit step can make verification easier to understand than an unexplained automatic transition.

App collection Source ↗

Opening…

Continue with the full context

Claude sign-in: make the email handoff recoverable →Notion Mail: distinguish sign-in from connecting a mailbox →

Observations describe supplied images. Guidance is editorial interpretation, not measured conversion or accessibility results. Third-party screens remain attributed to their owners.