Universal Login (Hosted UI)

Optare ID provides a hosted login page that handles authentication for you, eliminating the need to build custom login UI.

Benefits

• Zero login UI code - Just redirect users to Optare
• Secure by default - PKCE, CSRF, brute-force protection built-in
• Branded experience - Customize colors, logo, and messaging
• Session management - SSO across all your apps
• Social logins - Google, Microsoft, GitHub with one click

Quick Start

1. Configure OAuth Client

In the Optare Developer Portal, create an OAuth client and note your:

• Client ID
• Client Secret
• Redirect URI

2. Redirect to Login

// Redirect user to Optare login
const loginUrl = new URL('https://id.optare.one/oauth/authorize');
loginUrl.searchParams.set('client_id', 'your-client-id');
loginUrl.searchParams.set('redirect_uri', 'https://yourapp.com/callback');
loginUrl.searchParams.set('response_type', 'code');
loginUrl.searchParams.set('scope', 'openid email profile');
 
window.location.href = loginUrl.toString();

3. Handle Callback

After login, Optare redirects back with an authorization code:

// /callback route
const code = new URL(window.location.href).searchParams.get('code');
 
// Exchange for tokens
const response = await fetch('https://id.optare.one/oauth/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    client_id: 'your-client-id',
    client_secret: 'your-client-secret',
    code,
    redirect_uri: 'https://yourapp.com/callback',
  }),
});
 
const tokens = await response.json();

Customization

Customize the login page appearance in the Developer Portal:

Login Methods

Enable authentication methods in your OAuth client settings:

• Email/Password - Traditional email login
• Magic Link - Passwordless email sign-in
• Google - Sign in with Google
• Microsoft - Sign in with Microsoft/Entra ID
• GitHub - Sign in with GitHub
• Passkeys - WebAuthn/FIDO2 biometric login

Logout

End the session with a redirect:

const logoutUrl = `https://id.optare.one/oauth/logout?client_id=${clientId}&redirect_uri=${encodeURIComponent(postLogoutUrl)}`;
window.location.href = logoutUrl;

Security Features

• PKCE required - Proof Key for Code Exchange prevents code interception
• State parameter - CSRF protection for authorization requests
• Rate limiting - Protection against brute-force attacks
• MFA support - Optional multi-factor authentication
• Device fingerprinting - Detect suspicious login attempts