OAuth Flow

2 min read

Sign in. Or click "Continue with Google" and round-trip through a third-party. The wait is one to several seconds — most of it the network handshake the user can do nothing about. The perception layer cannot shorten the handshake; it can ensure the wait is filled with affordances rather than blank.

What is happening

The list-fetch demo stands in for the OAuth round-trip. The naive side leaves the page blank; the tuned side renders a skeleton of the destination layout immediately, ready for the auth response. For real OAuth, the tuned flow looks like:

1. Press feedback within 50 ms on the sign-in button — Fitch's Fitch 200 ms active-state animation.
2. Optimistic redirect to the destination with a skeleton of the post-auth view — anticipating success.
3. Determinate progress during the multi-step handshake (where supported) — Myers 1985 Myers 1985.
4. Honest failure path if the OAuth flow rejects, with re-attempt control on the same surface.

What to tune

1. Pre-action — press feedback on the sign-in button within ~50 ms; 200 ms active-state animation (Fitch).
2. First 1 s — optimistic redirect to the destination with a skeleton of the post-auth view in place.
3. 1 – 10 s — determinate progress where the handshake exposes stages; otherwise hold the destination skeleton.
4. Completion — focus lands on the destination's main heading; the surface is ready for the user, not for the loader.
5. Failure path — return to the sign-in surface with a clear, recoverable error. Never strand the user on a half-loaded destination.

When perceived performance hurts you here

OAuth handshakes can fail for reasons the user did not cause — third-party outages, expired tokens, browser quirks. An optimistic redirect that lands on a destination skeleton and then fails silently is the worst-case version of this pattern. The failure path must return the user to the sign-in surface with a clear, recoverable error message — not strand them on a half-loaded destination.

Accessibility

1. role="alert" on auth failure messages — the user thought they were signed in.
2. Focus management on the redirect — land on the destination's main heading.
3. Don't trap on the spinner. A 10-second OAuth round-trip with no escape locks the user.
4. prefers-reduced-motion for the redirect transition.

Other patterns that fit

Same band, same surface — switch in whichever maps best to your UI.