central-auth-js-sdk 1.0.10

package/core/state.js

@@ -0,0 +1,55 @@
+/**
+ * State Manager - Form data and application state
+ * UI reads/writes through this; API integration will plug in here
+ */
+
+export class StateManager {
+  constructor() {
+    this.data = {
+      email: '',
+      mobile: '',
+      emailOtp: '',
+      firstName: '',
+      lastName: '',
+      mobileOtp: '',
+      password: '',
+      faceCapture: null,
+      userId: null,         // from signup/email/verify response
+      loginToken: null,     // from social OAuth callback
+      socialProvider: null, // 'google' | 'microsoft' when in social flow
+      error: '',
+    };
+    this.listeners = new Set();
+  }
+
+  get(key) {
+    return this.data[key];
+  }
+
+  set(key, value) {
+    this.data[key] = value;
+    this._notify(key, value);
+  }
+
+  setMultiple(updates) {
+    Object.assign(this.data, updates);
+    this._notify('*', updates);
+  }
+
+  getAll() {
+    return { ...this.data };
+  }
+
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+
+  _notify(key, value) {
+    this.listeners.forEach((fn) => fn(key, value, this.data));
+  }
+
+  clearError() {
+    this.set('error', '');
+  }
+}

package/index.js

@@ -0,0 +1,20 @@
+/**
+ * Central Auth Welcome Flow SDK
+ * Vanilla JavaScript - Embeddable into any web application
+ * APIs wired to Central Auth (central_auth_collection.json)
+ *
+ * Public API for host applications:
+ *   initializeAuth(config) — set default configuration
+ *   startSignup(config)    — run sign-up flow in a container
+ *   startLogin(config)    — run login flow in a container
+ *
+ * Lower-level: mount (signup), mountLogin (login)
+ */
+
+export { mount } from './signup.js';
+export { FlowController, STEPS } from './core/flow.js';
+export { StateManager } from './core/state.js';
+export { createApi, dataUrlToFile } from './core/api.js';
+export { mountLogin } from './login.js';
+export { initializeAuth, startSignup, startLogin } from './auth.js';
+export { applyTheme, THEME_PRESETS } from './theme.js';

package/login.js

@@ -0,0 +1,318 @@
+/**
+ * Central Auth Login Flow SDK
+ * Configurable login methods; same theme/layout as sign-up
+ */
+
+import { createApi, dataUrlToFile } from './core/api.js';
+import { resolveApiBaseUrl } from './core/env-config.js';
+import { normalizeLoginConfig, getEnabledLoginMethods, LOGIN_METHODS } from './core/login-config.js';
+import { LoginFlowController, LOGIN_STEPS } from './core/login-flow.js';
+import { LoginStateManager } from './core/login-state.js';
+import { createLayout } from './ui/layout.js';
+import { createLoginScreen } from './ui/screens/login/index.js';
+import { applyTheme } from './theme.js';
+
+/** Parse OAuth callback (login_token, provider) from URL */
+function parseOAuthCallback() {
+  if (typeof window === 'undefined' || !window.location) return null;
+  const params = new URLSearchParams(window.location.search);
+  const loginToken = params.get('login_token');
+  const provider = (params.get('provider') || '').toLowerCase();
+  if (!loginToken) return null;
+  if (provider !== 'google' && provider !== 'microsoft') return { loginToken, provider: 'google' };
+  return { loginToken, provider };
+}
+
+function clearOAuthParams() {
+  if (typeof window === 'undefined' || !window.history) return;
+  const params = new URLSearchParams(window.location.search);
+  params.delete('login_token');
+  params.delete('provider');
+  const clean = params.toString();
+  const url = window.location.pathname + (clean ? '?' + clean : '') + window.location.hash;
+  window.history.replaceState({}, '', url);
+}
+
+/**
+ * Mount the login flow
+ * @param {string|HTMLElement} container
+ * @param {Object} options - env, appIdentifier, loginMethods, frsAsSecondFactor, onLoginComplete, onContinue
+ * @param {Object} options.loginMethods - { emailPassword, mobilePassword, emailOtp, mobileOtp, social: { google, microsoft }, emailFrs }
+ * @param {boolean} options.frsAsSecondFactor - require face verification after primary auth
+ * @param {Function} [options.onLoginComplete] - Called when login completes with (payload). Payload: identifier, plus any token/fields from the final API response.
+ * @param {Function} [options.onContinue] - Called when user clicks Continue on the success screen.
+ */
+export function mountLogin(container, options = {}) {
+  const el = typeof container === 'string' ? document.querySelector(container) : container;
+  if (!el) {
+    console.error('[Central Auth SDK] Login container not found:', container);
+    return null;
+  }
+
+  const apiBaseUrl = options.apiBaseUrl ?? resolveApiBaseUrl(options);
+  const {
+    onLoginComplete = null,
+    onContinue = null,
+    onBack = null,
+    theme,
+  } = options;
+  const config = normalizeLoginConfig(options);
+  const api = createApi(apiBaseUrl);
+  const flow = new LoginFlowController(config);
+  const state = new LoginStateManager();
+
+  const layout = createLayout(el, () => {});
+  const cleanupTheme = applyTheme(layout.root, theme);
+  const showError = (msg) => layout.showError(msg);
+
+  const oauth = parseOAuthCallback();
+  if (oauth) {
+    state.set('loginToken', oauth.loginToken);
+    state.set('socialProvider', oauth.provider);
+    clearOAuthParams();
+    flow.setSocialCallback(oauth.provider);
+  }
+
+  const enabled = getEnabledLoginMethods(config);
+  if (enabled.length === 0) {
+    layout.setContent(document.createElement('div'));
+    if (layout.showError) layout.showError('No login methods enabled.');
+    return { unmount: () => layout.root.remove(), getState: () => state.getAll(), getFlow: () => flow };
+  }
+
+  if (!oauth && enabled.length === 1) {
+    flow.selectMethod(enabled[0].id);
+    if (flow.currentMethod === LOGIN_METHODS.SOCIAL_GOOGLE || flow.currentMethod === LOGIN_METHODS.SOCIAL_MICROSOFT) {
+      const provider = flow.currentMethod === LOGIN_METHODS.SOCIAL_MICROSOFT ? 'microsoft' : 'google';
+      const origin = typeof window !== 'undefined' && window.location ? window.location.origin : '';
+      const path = (typeof window !== 'undefined' && window.location && window.location.pathname) || '/';
+      const redirectUri = origin + path;
+      const url = provider === 'google'
+        ? api.getGoogleStartUrl(redirectUri, config.appIdentifier)
+        : api.getMicrosoftStartUrl(redirectUri, config.appIdentifier);
+      window.location.href = url;
+      return { unmount: () => layout.root.remove(), getState: () => state.getAll(), getFlow: () => flow };
+    }
+  }
+
+  function buildLoginCompletePayload(apiResult) {
+    const all = state.getAll();
+    const payload = { identifier: all.identifier };
+    if (apiResult && typeof apiResult === 'object' && apiResult !== null) {
+      Object.assign(payload, apiResult);
+    }
+    return payload;
+  }
+
+  async function handleIdentifierEmail(email) {
+    state.clearError();
+    state.set('identifier', email);
+    if (flow.currentMethod === LOGIN_METHODS.EMAIL_OTP) {
+      try {
+        await api.otpSend(email, '', 'email');
+        flow.goNext();
+      } catch (err) {
+        const msg = err?.data?.error || err?.message || 'Failed to send code';
+        state.set('error', msg);
+        showError(msg);
+      }
+      return;
+    }
+    flow.goNext();
+  }
+
+  async function handleIdentifierMobile(mobile) {
+    state.clearError();
+    state.set('identifier', mobile);
+    if (flow.currentMethod === LOGIN_METHODS.MOBILE_OTP) {
+      try {
+        await api.otpSend(mobile, '', 'sms');
+        flow.goNext();
+      } catch (err) {
+        const msg = err?.data?.error || err?.message || 'Failed to send code';
+        state.set('error', msg);
+        showError(msg);
+      }
+      return;
+    }
+    flow.goNext();
+  }
+
+  function isFrRequiredError(err) {
+    const msg = (err?.data?.error || err?.message || '').toLowerCase();
+    return msg.includes('facial recognition') && msg.includes('required');
+  }
+
+  async function handlePassword(password) {
+    state.clearError();
+    state.set('password', password);
+    const identifier = state.get('identifier');
+    if (config.frsAsSecondFactor) {
+      flow.goNext();
+      return;
+    }
+    try {
+      const res = await api.loginCustom(identifier, password, config.appIdentifier, null);
+      state.set('loginResult', res);
+      flow.goNext();
+      if (typeof onLoginComplete === 'function') {
+        onLoginComplete(buildLoginCompletePayload(res));
+      }
+    } catch (err) {
+      if (isFrRequiredError(err)) {
+        flow.injectFrsStep();
+        return;
+      }
+      const msg = err?.data?.error || err?.message || 'Sign in failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleOtp(otp) {
+    state.clearError();
+    state.set('otp', otp);
+    const identifier = state.get('identifier');
+    const channel = identifier.includes('@') ? 'email' : 'sms';
+    if (config.frsAsSecondFactor) {
+      flow.goNext();
+      return;
+    }
+    try {
+      const res = await api.otpVerify(identifier, '', channel, otp);
+      state.set('loginResult', res);
+      flow.setStep(LOGIN_STEPS.SUCCESS);
+      if (typeof onLoginComplete === 'function') {
+        onLoginComplete(buildLoginCompletePayload(res));
+      }
+    } catch (err) {
+      if (isFrRequiredError(err)) {
+        flow.injectFrsStep();
+        return;
+      }
+      const msg = err?.data?.error || err?.message || 'Verification failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleFrs(dataUrl) {
+    state.clearError();
+    state.set('faceCapture', dataUrl);
+    const file = dataUrlToFile(dataUrl);
+    if (!file) {
+      showError('Please capture your face first.');
+      return;
+    }
+    const method = flow.currentMethod;
+    const identifier = state.get('identifier');
+    let apiResult = null;
+
+    try {
+      if (method === LOGIN_METHODS.EMAIL_FRS) {
+        apiResult = await api.loginEmailFr(identifier, file, null, config.appIdentifier);
+      } else if (method === LOGIN_METHODS.EMAIL_PASSWORD || method === LOGIN_METHODS.MOBILE_PASSWORD) {
+        apiResult = await api.loginCustom(identifier, state.get('password'), config.appIdentifier, [file, file]);
+      } else if (method === LOGIN_METHODS.SOCIAL_GOOGLE) {
+        apiResult = await api.googleFrEnroll(state.get('loginToken'), file, null, config.appIdentifier);
+      } else if (method === LOGIN_METHODS.SOCIAL_MICROSOFT) {
+        apiResult = await api.microsoftFrEnroll(state.get('loginToken'), file, null, config.appIdentifier);
+      } else if (method === LOGIN_METHODS.EMAIL_OTP || method === LOGIN_METHODS.MOBILE_OTP) {
+        const channel = identifier.includes('@') ? 'email' : 'sms';
+        apiResult = await api.otpVerify(identifier, '', channel, state.get('otp'), [file, file]);
+      }
+      state.set('loginResult', apiResult);
+      flow.goNext();
+      if (typeof onLoginComplete === 'function') {
+        onLoginComplete(buildLoginCompletePayload(apiResult));
+      }
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Verification failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  function handleSocialRedirect(provider) {
+    state.clearError();
+    const origin = typeof window !== 'undefined' && window.location ? window.location.origin : '';
+    const path = (typeof window !== 'undefined' && window.location && window.location.pathname) || '/';
+    const redirectUri = origin + path;
+    const url = provider === 'google'
+      ? api.getGoogleStartUrl(redirectUri, config.appIdentifier)
+      : api.getMicrosoftStartUrl(redirectUri, config.appIdentifier);
+    window.location.href = url;
+  }
+
+  const onSignUp = typeof options.onSignUp === 'function' ? options.onSignUp : () => {};
+  const onSuccessContinue = typeof onContinue === 'function' ? onContinue : () => {};
+  const onBackToApp = typeof onBack === 'function' ? onBack : () => { cleanupTheme(); layout.root.remove(); };
+
+  async function handleSwitchToOtp() {
+    state.clearError();
+    layout.showError('');
+    const identifier = state.get('identifier');
+    if (!identifier || !identifier.includes('@')) {
+      layout.showError('Email is required to send OTP.');
+      return;
+    }
+    try {
+      await api.otpSend(identifier, '', 'email');
+      flow.switchToEmailOtp();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Failed to send code';
+      state.set('error', msg);
+      layout.showError(msg);
+    }
+  }
+
+  const handlers = {
+    onSelectMethod: (methodId) => { flow.selectMethod(methodId); },
+    onIdentifierEmail: handleIdentifierEmail,
+    onIdentifierMobile: handleIdentifierMobile,
+    onPassword: handlePassword,
+    onOtp: handleOtp,
+    onFrs: handleFrs,
+    onSuccessContinue,
+    onBack: () => { state.clearError(); layout.showError(''); flow.goBack(); },
+    onBackToApp,
+    onSocialRedirect: handleSocialRedirect,
+    onSignUp,
+    onSwitchToOtp: handleSwitchToOtp,
+  };
+
+  function render() {
+    state.clearError();
+    layout.showError('');
+    const stepId = flow.getCurrentStep();
+    const { current, total } = flow.getProgress();
+    const progressTotal = total || 1;
+    const progressCurrent = total ? current : 1;
+    layout.updateProgress(progressCurrent, progressTotal);
+    const screen = createLoginScreen(stepId, flow, state, config, {
+      onIdentifierEmail: handlers.onIdentifierEmail,
+      onIdentifierMobile: handlers.onIdentifierMobile,
+      onPassword: handlePassword,
+      onOtp: handleOtp,
+      onFrs: handleFrs,
+      onSuccessContinue: handlers.onSuccessContinue,
+      onBack: handlers.onBack,
+      onBackToApp: handlers.onBackToApp,
+      onSelectMethod: handlers.onSelectMethod,
+      onSocialRedirect: handlers.onSocialRedirect,
+      onSignUp: handlers.onSignUp,
+      onSwitchToOtp: handlers.onSwitchToOtp,
+    });
+    layout.setContent(screen);
+  }
+
+  flow.subscribe(render);
+  render();
+
+  return {
+    unmount() { cleanupTheme(); layout.root.remove(); },
+    getState() { return state.getAll(); },
+    getFlow() { return flow; },
+    getCurrentStep() { return flow.getCurrentStep(); },
+  };
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "central-auth-js-sdk",
+  "version": "1.0.10",
+  "description": "Vanilla JS sign-up and login flow SDK — embeddable auth UI with configurable methods",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "index.js",
+    "auth.js",
+    "theme.js",
+    "login.js",
+    "signup.js",
+    "styles.css",
+    "core",
+    "ui",
+    "README.md",
+    "INTEGRATION_GUIDE.md"
+  ],
+  "keywords": [
+    "auth",
+    "signup",
+    "login",
+    "sdk",
+    "vanilla",
+    "embed"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}