figma guide
Designing SSO and enterprise login UI in Figma: domain discovery, IdP buttons, and admin setup
Design SSO and enterprise login UI in Figma with email domain discovery, SAML/OIDC sign-in, IdP selection, admin setup wizards, and Dev Mode specs for B2B auth flows.
- Published
- Updated
- Jul 07, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Enterprise SSO login routes users through their company’s identity provider (Okta, Azure AD, Google Workspace) instead of a local password—usually after email domain discovery or a dedicated “Sign in with SSO” path. Design a domain discovery step (“Enter your work email”), an IdP redirect/waiting screen, optional IdP picker when multiple providers exist, and admin setup flows for IT (metadata upload, ACS URL, test connection). Consumer social login belongs on a different path—see connected accounts. Start from the Figma guides hub and pair with login, session timeout, and account dashboard guides.
Who this is for
- Product designers building B2B SaaS, workforce tools, or enterprise ecommerce portals.
- Design system teams separating consumer auth from workforce SSO without duplicating every component.
- Engineers implementing SAML 2.0, OIDC, SCIM provisioning, and domain-verified SSO routing.
Consumer login vs enterprise SSO
| Surface | Audience | Primary action |
|---|---|---|
| Consumer login | Individual shoppers or free accounts | Email/password + social |
| Enterprise SSO | Employees on verified domains | Redirect to company IdP |
| Hybrid product | Both B2C and B2B tenants | Split entry: “Work email” vs “Personal account” |
| Just-in-time provisioning | First SSO login creates user | Success landing + profile completion |
| Admin SSO config | IT admin in tenant settings | Metadata, certificates, test login |
Verdict: add “Sign in with SSO” or “Use your work email” as a secondary path on the main login page—not buried in footer links. Route @company.com emails to SSO automatically when domain is verified.
Enterprise login entry patterns
| Pattern | Best for | Flow |
|---|---|---|
| Domain discovery first | Single login page for B2B+B2C | Email field → detect domain → SSO or password |
| Dedicated SSO page | Workforce-only products | /login/sso with email or domain field |
| IdP-initiated | Users start from Okta dashboard | Landing page after SAML assertion |
| Magic subdomain | tenant.app.com | Skip discovery—tenant known from URL |
| Home realm discovery | Multi-tenant platforms | Email determines IdP without separate page |
EnterpriseLoginEntry
├── Variant: pattern=domainDiscovery | dedicatedSso | subdomain
├── Variant: domainKnown=true | false
└── Layers:
├── WorkEmailField
├── ContinueButton
├── SsoDivider ("or sign in with password")
├── ConsumerAuthLink
└── HelpLink ("SSO not working?")Domain discovery screen
| Part | Spec | Notes |
|---|---|---|
| Headline | ”Sign in to your organization” | |
| Email field | Work email; validate domain format | |
| Continue | Primary CTA | Triggers domain lookup |
| Unknown domain | Error or fallback to password signup | ”No SSO for this domain” |
| Unverified domain | Admin must verify first | Link to IT docs |
| Loading | ”Redirecting to your identity provider…” | Full-page or inline |
DomainDiscoveryForm
├── Variant: state=default | loading | error | redirecting
├── Variant: result=ssoRedirect | passwordFallback | inviteRequired
└── Layers:
├── Headline
├── WorkEmailInput
├── InlineError
├── ContinueButton
├── LoadingSpinner (redirecting)
└── FallbackLinksAfter Continue, never ask for password if SSO is mandatory for that domain—redirect immediately to IdP.
IdP redirect and waiting UI
Users leave your app briefly—set expectations.
| Element | Spec |
|---|---|
| Message | ”Redirecting to Microsoft to sign you in” |
| Provider logo | Okta, Azure AD, Google Workspace |
| Spinner | Indeterminate—redirect may take 1–3s |
| Cancel link | Return to login |
| Error return | IdP error query params mapped to friendly copy |
| Mobile | Same screen; warn about app-switch to authenticator |
IdpRedirectScreen
├── Variant: provider=okta | azure | google | generic
├── Variant: state=redirecting | error
└── Layers:
├── ProviderLogo
├── RedirectMessage
├── ProgressIndicator
├── CancelLink
└── ErrorPanel (conditional)Document popup vs full redirect—popup needs a “Complete sign-in in the popup window” helper.
Multiple IdP selection
When one domain maps to several providers (rare) or user picks manually:
| Row | Content |
|---|---|
| IdP button | Logo + “Continue with Okta” |
| Last used | Badge on previously chosen IdP |
| Admin-configured order | Most common IdP first |
Reuse button styling from login social row but label as organization sign-in, not personal Google.
SSO admin setup (IT admin UI)
Design for tenant admins configuring SAML/OIDC—often under Settings → Security → SSO.
| Step | UI |
|---|---|
| 1. Enable SSO | Toggle + warning about password disable |
| 2. Provider template | Okta / Azure / Custom SAML / OIDC |
| 3. SP metadata | Copy ACS URL, Entity ID, download XML |
| 4. IdP metadata | Upload XML or paste SSO URL + certificate |
| 5. Attribute mapping | Email, name, groups fields |
| 6. Test connection | ”Test SSO login” opens new tab |
| 7. Enforce SSO | Checkbox: disable password for domain users |
SsoAdminWizard
├── Variant: step=enable | provider | spMetadata | idpMetadata | mapping | test | enforce
├── Variant: protocol=saml | oidc
└── Layers:
├── StepIndicator
├── InstructionPanel
├── CopyField (repeat)
├── FileUpload
├── TestResultBanner
└── EnforceSsoToggleInclude rollback copy if test fails—do not lock all users out without break-glass admin login.
Post-login and provisioning states
| State | UI |
|---|---|
| First SSO login (JIT) | Welcome + complete profile (name, role) |
| Missing license | ”Contact your admin” empty state |
| Deprovisioned user | Error on next login—link to support |
| Session established | Redirect to app home or returnUrl |
| SCIM synced | No UI—note in admin docs |
Link to session timeout for workforce idle policies—often stricter than consumer.
Error states (user-facing)
| Error | User message | Action |
|---|---|---|
| SAML signature invalid | ”Sign-in configuration error” | Contact admin (user) / fix cert (admin) |
| User not in app | ”Your account doesn’t have access” | Request access CTA |
| SSO required | ”Use your work email to sign in” | Hide password for domain |
| Clock skew | Generic retry message | Support article link |
| IdP downtime | ”Your sign-in provider is unavailable” | Status page + retry |
Use inline alerts on login—not raw SAML error codes.
Mobile and WebView considerations
| Case | Design note |
|---|---|
| Corporate mobile SSO | May open system browser or Microsoft/Okta app |
| Embedded WebView | Often blocked—warn in IT setup docs |
| Deep link return | Custom URL scheme for native apps |
| Biometric after SSO | Optional app-level lock—not IdP |
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Domain → tenant lookup | API before redirect |
| SAML ACS URL | Full URL with https |
| OIDC redirect URI | Whitelist per environment |
| JIT provisioning | Create user on first assertion |
| Enforce SSO flag | Disables password for domain |
| Break-glass admin | Emergency local login path |
| Session duration | Often synced from IdP |
| Logout | SP-initiated vs IdP SLO |
| a11y | Email field labeled “Work email”; errors announced |
Clarify SP-initiated vs IdP-initiated flows in presenter notes—different entry components.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| SSO hidden in footer | Enterprise buyers bounce | Primary “Work email” path |
| Password field after SSO domain | Violates IT policy | Auto-redirect on known domain |
| Consumer Google labeled “SSO” | Wrong expectations | Separate enterprise IdP buttons |
| No waiting screen on redirect | Users double-click Continue | Loading state immediately |
| Admin wizard without test step | Production outages | Mandatory test login |
| Same session timeout as B2C | Compliance gaps | Shorter idle for workforce |
| No error for unassigned user | Opaque IdP errors | Map to in-app message |
| Mixing OAuth social with SAML | Engineering confusion | Separate components and routes |
Recommended workflow
- Map personas: end user SSO login vs IT admin setup vs consumer login.
- Design domain discovery on login or
/login/sso. - Add IdP redirect/waiting screen with provider branding.
- Design IdP picker if multi-IdP tenants exist.
- Build admin wizard with SP metadata copy fields and test banner.
- Spec error mapping from SAML/OIDC failures to UI.
- Link consumer paths to login and connected accounts for personal identity linking edge cases.
- Prototype work email → redirect → success home on desktop and mobile.
FAQ
SAML or OIDC in the UI?
Same user flows—differences live in admin wizard steps (metadata vs client ID/secret). Label protocol in admin UI only.
Show password login for SSO domains?
When enforce SSO is on, hide password. Optional break-glass login is admin-only—not in public Figma consumer frames.
Can users link SSO to existing email/password account?
Account linking is a backend policy—design a one-time “Connect your work login” banner in account settings if supported.
Branding on Okta/Azure screens?
IdP controls login branding—you design only redirect/waiting screens and post-login app chrome.
Ecommerce B2B portals need SSO?
Yes for corporate buyers—domain discovery on checkout login reduces duplicate accounts; pair with guest checkout rules.
Next steps
- Design login, registration, and password recovery UI in Figma — consumer auth baseline
- Design connected accounts and OAuth linking UI in Figma — personal OAuth vs workforce SSO
- Design session timeout and re-authentication UI in Figma — workforce idle policies
- Design two-factor authentication and security settings UI in Figma — when IdP MFA is not enough in-app
- Design account dashboard and my account UI in Figma — org admin vs member roles
§ Keep reading