Mobile Login with Social Sign-In (iOS)

Based on real screens from Reddit, Balance, Strava, MyFitnessPal, Vocabulary, IMDb, and Airalo on Mobbin.

Reddit: close X top-left, "Sign up" link top-right, large "Log in" title, legal microcopy ("By continuing, you agree to our User Agreement and Privacy Policy") directly under the title, then three identical outlined pill buttons — brand icon left-aligned, label centered: "Continue with Google", "Continue with Apple", "Continue with Login Link". Below: an "OR" divider with hairlines, filled gray Username/Password fields (password has an eye toggle), a "Forgot password?" link, and a full-width "Continue" button at the bottom that sits disabled (washed-out gradient) until fields are valid.
Strava: nav bar with "< Back" and centered "Log In" title; Facebook button filled in brand blue on top, Google and Apple as white outlined buttons beneath — all full-width, same height, stacked with tight equal gaps; then a grouped Email/Password field pair and "Forgot Password".
Airalo: presented as a bottom sheet with a Log in / Sign up segmented tab underline at the top. Social options are three compact icon-only pills in a row (Apple, Google, Facebook), followed by Email + Password outlined fields, "Forgot password", a disabled "Log in" pill, and a secondary "Log in with SSO" text link.

MyFitnessPal: labeled Email/Password fields on top, a filled blue "Log In" button, "Forgot password?" link, then an "OR" divider and three white card-style social buttons (Google, Apple, Facebook) with icon + centered label. Reassurance microcopy at the very bottom: "We will never post anything without your permission."

Vocabulary frames sign-in as a benefit, not a gate: mascot illustration, headline "Keep your data safe", subcopy explaining that an account preserves favorites and settings across devices. Only two options: black "Sign in with Apple" pill first, white outlined "Sign in with Google" second. Legal microcopy in small centered gray text at the bottom.
Balance: three stacked full-width rectangles each filled with the provider's brand color (Apple black, Facebook blue, Email teal) — bold but visually noisy; the three competing brand colors give no clear primary.
IMDb: "Returning customer?" heading over a uniform list of white rounded rows, each with a brand icon and left-aligned label (IMDb, Amazon, Google, Apple) — treating providers as a neutral choice list.

Social buttons are always full-width (or equal-width), ~48–56pt tall, pill or 8–12pt rounded, stacked vertically with equal spacing, and use the provider's official icon.
"Continue with X" / "Sign in with X" wording — never bare brand names.
Apple is always present and usually first or second (App Store requirement when third-party login is offered).
Email/password is positioned as the fallback below an "OR" divider (Reddit, MyFitnessPal, Strava, Airalo).
Legal agreement copy appears on the login screen itself, in small gray text near the title (Reddit) or the bottom (Vocabulary).

Offer 2–4 social providers max; include Sign in with Apple whenever any social login exists (App Store Review 4.8).
Make every social button the same shape, width, and height; differentiate providers by icon + label, not by size.
Use "Continue with [Provider]" labels — "Continue" works for both new and returning users.
Give the recommended provider the only filled/high-contrast treatment (black Apple pill in Vocabulary); render the rest outlined.
Separate social options from email/password with a hairline "OR" divider.
Include: "Forgot password?" link near the password field, a show/hide eye toggle on password, and a route to the opposite mode (Sign up link in the nav or a tab pair like Airalo).
Keep the email/password submit button disabled until inputs are plausibly valid, like Reddit and Airalo.
Put agreement microcopy ("By continuing you agree to…") on the auth screen with linked Terms/Privacy.
Add one line of trust reassurance when a provider raises privacy fears (MyFitnessPal's "We will never post anything without your permission").
If auth is optional, frame it around the user's benefit ("Keep your data safe" — Vocabulary) and keep it skippable.

Don't

Don't fill every button with its provider's brand color (Balance) — the screen loses a visual hierarchy and a primary action.
Don't hide email login entirely if your audience includes users without the offered social accounts.
Don't use icon-only social pills (Airalo) unless space is critical; labels remove ambiguity and help accessibility.
Don't place legal text where it interrupts the field → CTA flow; above the title or below the CTA are the observed safe zones.

Brand-color soup (Balance): three saturated brand-filled buttons of equal weight; no primary action, poor scalability when providers are added.
Duplicate affordances (Strava): "Log In" appears both as a disabled nav-bar button and as the implicit form action — two competing submit locations.
Ultra-low-contrast disabled CTA (Reddit): the disabled gradient "Continue" is so faint it can read as decorative; disabled states should stay legible.
No sign-up escape hatch on screen (IMDb, Balance): returning-user screens without a visible "create account" path strand new users behind the back button.