Authentication Webview Demo

Preview how Sonr authentication flows appear in popup windows and embedded webviews, similar to "Sign in with Google" or "Connect Wallet" experiences.

View

Welcome (Onboarding)

Authorize (OAuth Consent)

Window Size

Small (360 × 540)

Medium (420 × 600)

Large (480 × 680)

Mobile (375 × 667)

Actions

New Tab

auth.sonr.io/welcome

420 × 600

Welcome

Onboarding flow with feature highlights and navigation to login/register

WebAuthn sign-in with passkey, security key, and QR code options

Account creation wizard with device capability detection

Authorize

OAuth consent screen for connect, sign, and transaction requests

Integration Examples

Popup Window

Embedded Iframe

Redirect Flow

Open authentication in a centered popup window, similar to "Sign in with Google".

// Open Sonr Auth as popup window
function openSonrAuth() {
  const width = 420;
  const height = 600;
  const left = (screen.width - width) / 2;
  const top = (screen.height - height) / 2;
  
  const popup = window.open(
    'https://auth.sonr.io/authorize?client_id=YOUR_APP&scope=openid+profile',
    'SonrAuth',
    `width=${width},height=${height},left=${left},top=${top}`
  );
  
  // Listen for auth completion
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://auth.sonr.io') {
      const { token, user } = event.data;
      handleAuthSuccess(token, user);
      popup.close();
    }
  });
}

Embed authentication inline within a modal or container.

// Embed Sonr Auth in iframe
const container = document.getElementById('auth-container');

const iframe = document.createElement('iframe');
iframe.src = 'https://auth.sonr.io/authorize?client_id=YOUR_APP&mode=embedded';
iframe.width = 420;
iframe.height = 600;
iframe.style.border = 'none';
iframe.style.borderRadius = '12px';

container.appendChild(iframe);

// Handle postMessage from iframe
window.addEventListener('message', (event) => {
  if (event.origin === 'https://auth.sonr.io') {
    if (event.data.type === 'AUTH_SUCCESS') {
      handleAuthSuccess(event.data.payload);
    } else if (event.data.type === 'AUTH_CANCEL') {
      handleAuthCancel();
    }
  }
});

Standard OAuth 2.0 redirect flow for server-side applications.

// Redirect to Sonr Auth (OAuth 2.0 flow)
function redirectToSonrAuth() {
  const params = new URLSearchParams({
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: 'https://yourapp.com/callback',
    response_type: 'code',
    scope: 'openid profile wallet:read',
    state: generateRandomState(),
    nonce: generateRandomNonce()
  });
  
  window.location.href = `https://auth.sonr.io/authorize?${params}`;
}

// Handle callback on your server
// GET /callback?code=AUTH_CODE&state=STATE
async function handleCallback(code, state) {
  const tokens = await exchangeCodeForTokens(code);
  const user = await getUserInfo(tokens.access_token);
  return { tokens, user };
}