Frontend / Mobile Track
Use this track when you are adding user login to a single-page app or a mobile app. By the end you will have a working login, issued tokens, and optional MFA.
Prerequisites
- A LumoAuth organization — sign up
- A public OAuth client (no client secret) with PKCE enabled. PKCE is defined in RFC 7636 — it binds the authorization code to a secret the app generates, so an intercepted code cannot be exchanged for tokens.
1. Learn the model
Read Core Concepts to understand organizations, users, OAuth clients, and tokens. Then skim Authentication Overview to pick the flow that fits your app. For any browser or mobile client, that flow is almost always Authorization Code + PKCE.
2. Register your application
Follow Quick Start: Platform Setup to sign up, create your first organization, and register an OAuth application. Pick Authorization Code + PKCE as the grant type and set the redirect URI to match the URL your app listens on for the OAuth callback.
3. Run a framework quickstart
Each quickstart is runnable end-to-end with copy-pasteable code.
| Framework | Guide |
|---|---|
| React | React quickstart |
| Next.js | Next.js quickstart |
| Vue.js | Vue quickstart |
| Angular | Angular quickstart |
| React Native | React Native quickstart |
4. Harden the login
- Passkeys / WebAuthn — FIDO2 passwordless login
- Social Login — Google, GitHub, Microsoft, Apple
- MFA and Adaptive MFA — step up when risk is higher
5. Ship to production
- Keep access tokens short-lived and use refresh-token rotation
- Use exact-match redirect URIs (no wildcards) so attackers cannot redirect the code to a URL they control
- Validate the OAuth
stateparameter on the callback to prevent CSRF - See Security Best Practices
Next track
- Your backend needs to validate tokens? → Backend / Service Track
- Selling to enterprise customers? → Admin / IT Track