@ibgib/web-gib 0.0.57 → 0.0.59

package/src/api/ibgib-api-bridge.mts

@@ -6,6 +6,7 @@
 
 import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { FlatIbGibGraph } from "@ibgib/core-gib/dist/common/other/graph-types.mjs";
 
 const logalot = false;
 
@@ -279,7 +280,7 @@ export class IbGibApiBridge {
         primaryTjpAddr
     }: {
         email: string;
-        primaryTjpAddr: string;
+        primaryTjpAddr?: string;
     }): Promise<{ success: boolean; message?: string }> {
         const lc = `${this.lc}[${this.postVerificationCode.name}]`;
         try {
@@ -360,6 +361,199 @@ export class IbGibApiBridge {
             return { success: false, message: errorMsg };
         }
     }
+
+    /**
+     * Posts a custodian genesis request (`POST /api/identity/custodian/genesis`)
+     * to obtain the primary identity keystone (or primaryTjpAddr) and a fresh, single-turn
+     * `CustodianRequirements` payload for delegate registration.
+     */
+    public async postCustodianGenesis({
+        email,
+        code,
+        username
+    }: {
+        email: string;
+        code?: string;
+        username?: string;
+    }): Promise<{
+        success: boolean;
+        isNewIdentity?: boolean;
+        primaryTjpAddr?: string;
+        primaryKeystone?: IbGib_V1;
+        primaryGraph?: FlatIbGibGraph;
+        custodianReqs?: any;
+        message?: string;
+    }> {
+        const lc = `${this.lc}[${this.postCustodianGenesis.name}]`;
+        try {
+            const url = '/api/identity/custodian/genesis';
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ email, code, username }),
+            });
+
+            const data = await this.parseResponseJson(response, url);
+
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'Custodian genesis failed';
+                console.error(`${lc} custodian genesis failed: ${errorMsg}`);
+                return { success: false, message: errorMsg };
+            }
+
+            return {
+                success: true,
+                isNewIdentity: !!data.isNewIdentity,
+                primaryTjpAddr: data.primaryTjpAddr,
+                primaryKeystone: data.primaryKeystone,
+                primaryGraph: data.primaryGraph,
+                custodianReqs: data.custodianReqs,
+                message: data.message
+            };
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} post custodian genesis error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
+
+    /**
+     * Posts a client delegate keystone containing single-turn `custodianReqs`
+     * to register it with the server custodian node (`POST /api/identity/custodian/register-delegate`).
+     */
+    public async postCustodianRegisterDelegate({
+        delegateKeystone
+    }: {
+        delegateKeystone: IbGib_V1;
+    }): Promise<{
+        success: boolean;
+        primaryTjpAddr?: string;
+        evolvedPrimaryKeystone?: IbGib_V1;
+        primaryGraph?: FlatIbGibGraph;
+        message?: string;
+    }> {
+        const lc = `${this.lc}[${this.postCustodianRegisterDelegate.name}]`;
+        try {
+            const url = '/api/identity/custodian/register-delegate';
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ delegateKeystone }),
+            });
+
+            const data = await this.parseResponseJson(response, url);
+
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'Custodian delegate registration failed';
+                console.error(`${lc} custodian delegate registration failed: ${errorMsg}`);
+                return { success: false, message: errorMsg };
+            }
+
+            return {
+                success: true,
+                primaryTjpAddr: data.primaryTjpAddr,
+                evolvedPrimaryKeystone: data.evolvedPrimaryKeystone,
+                primaryGraph: data.primaryGraph,
+                message: data.message
+            };
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} post custodian register delegate error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
+
+    /**
+     * Retrieves safe public SSO client configuration (`GET /api/identity/sso/config`).
+     */
+    public async getSsoConfig(): Promise<{
+        success: boolean;
+        providers?: Record<string, { providerId: string; clientId: string; authUrl: string }>;
+        message?: string;
+    }> {
+        const lc = `${this.lc}[${this.getSsoConfig.name}]`;
+        try {
+            const url = '/api/identity/sso/config';
+            const response = await fetch(url, { method: 'GET' });
+            const data = await this.parseResponseJson(response, url);
+
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'Failed to fetch SSO config';
+                return { success: false, message: errorMsg };
+            }
+
+            return {
+                success: true,
+                providers: data.providers
+            };
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} fetch SSO config error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
+
+    /**
+     * Posts an OAuth authorization code (`POST /api/identity/sso/login`)
+     * to complete SSO token exchange and obtain custodian requirements.
+     */
+    public async postSsoLogin({
+        code,
+        providerId,
+        redirectUri
+    }: {
+        code: string;
+        providerId: string;
+        redirectUri: string;
+    }): Promise<{
+        success: boolean;
+        isNewIdentity?: boolean;
+        primaryTjpAddr?: string;
+        primaryKeystone?: IbGib_V1;
+        primaryGraph?: FlatIbGibGraph;
+        custodianReqs?: any;
+        userInfo?: any;
+        message?: string;
+    }> {
+        const lc = `${this.lc}[${this.postSsoLogin.name}]`;
+        try {
+            const url = '/api/identity/sso/login';
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ code, providerId, redirectUri }),
+            });
+
+            const data = await this.parseResponseJson(response, url);
+
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'SSO login code exchange failed';
+                console.error(`${lc} SSO login code exchange failed: ${errorMsg}`);
+                return { success: false, message: errorMsg };
+            }
+
+            return {
+                success: true,
+                isNewIdentity: !!data.isNewIdentity,
+                primaryTjpAddr: data.primaryTjpAddr,
+                primaryKeystone: data.primaryKeystone,
+                primaryGraph: data.primaryGraph,
+                custodianReqs: data.custodianReqs,
+                userInfo: data.userInfo,
+                message: data.message
+            };
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} post SSO login error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
 }
 
 let _apiBridge: IbGibApiBridge | undefined;

package/src/identity/custodian-delegate-helper.mts

@@ -0,0 +1,61 @@
+/**
+ * @module identity/custodian-delegate-helper
+ *
+ * Client-side helper functions for deriving and storing local cryptographic delegate secrets
+ * for full-custodian / passwordless identities.
+ */
+
+import { getUUID, hash, HashAlgorithm, extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+
+const LOCAL_STORAGE_PREFIX = 'ibgib_custodian_delegate_secret_';
+
+/**
+ * Retrieves or generates a high-entropy local delegate secret for a passwordless custodian identity.
+ * Stored locally in `localStorage` keyed by `primaryTjpAddr`.
+ *
+ * @param primaryTjpAddr The primary identity keystone TJP address (`ib^gib`).
+ */
+export async function deriveLocalCustodianDelegateSecret({
+    primaryTjpAddr,
+}: {
+    primaryTjpAddr: string;
+}): Promise<string> {
+    const lc = `[${deriveLocalCustodianDelegateSecret.name}]`;
+    try {
+        if (!primaryTjpAddr) {
+            throw new Error('primaryTjpAddr is required to derive local custodian delegate secret (E: a1b2c3d4e5f67890123456789a000101)');
+        }
+
+        const key = `${LOCAL_STORAGE_PREFIX}${primaryTjpAddr}`;
+        const existingSecret = localStorage.getItem(key);
+        if (existingSecret) {
+            return existingSecret;
+        }
+
+        // Generate high-entropy 512-bit SHA hash secret from fresh UUIDs
+        const rawEntropy = `${await getUUID()}-${await getUUID()}-${await getUUID()}-${Date.now()}`;
+        const newSecret = await hash({
+            s: rawEntropy,
+            algorithm: HashAlgorithm.sha_512
+        });
+
+        localStorage.setItem(key, newSecret);
+        return newSecret;
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    }
+}
+
+/**
+ * Removes the stored local delegate secret for a custodian identity.
+ */
+export function clearLocalCustodianDelegateSecret({
+    primaryTjpAddr,
+}: {
+    primaryTjpAddr: string;
+}): void {
+    if (!primaryTjpAddr) { return; }
+    const key = `${LOCAL_STORAGE_PREFIX}${primaryTjpAddr}`;
+    localStorage.removeItem(key);
+}

package/src/identity/sso-popup-helper.mts

@@ -0,0 +1,155 @@
+/**
+ * @module identity/sso-popup-helper
+ *
+ * DRY client helper for initiating OAuth2 SSO authentication via a popup window
+ * and capturing the returned authorization code.
+ */
+
+import { extractErrorMsg, getUUID } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { getApiBridge } from "../api/ibgib-api-bridge.mjs";
+
+export interface SsoPopupOpts {
+    providerId: 'google' | 'github';
+    parentTjpAddr?: string;
+}
+
+export interface SsoPopupResult {
+    success: boolean;
+    code?: string;
+    stateObj?: any;
+    redirectUri?: string;
+    message?: string;
+}
+
+/**
+ * Executes an OAuth2 SSO login/link authorization flow using a popup window.
+ *
+ * 1. Queries `GET /api/identity/sso/config` for safe public client configs.
+ * 2. Constructs the provider authorization URL with encoded state payload.
+ * 3. Opens a 600x700 popup window and listens for `sso-oauth-callback` postMessage.
+ * 4. Returns `{ success: true, code, stateObj, redirectUri }` upon authorization.
+ */
+export async function executeSsoOAuthPopup({
+    providerId,
+    parentTjpAddr,
+}: SsoPopupOpts): Promise<SsoPopupResult> {
+    const lc = `[${executeSsoOAuthPopup.name}]`;
+    try {
+        // 1. Fetch public SSO configs from server
+        const apiBridge = getApiBridge();
+        const resConfig = await apiBridge.getSsoConfig();
+        if (!resConfig.success || !resConfig.providers) {
+            return { success: false, message: resConfig.message || 'SSO configuration retrieval failed.' };
+        }
+
+        const providers = resConfig.providers as any;
+        const providerConfig = Array.isArray(providers)
+            ? providers.find((p: any) => p.providerId === providerId)
+            : providers[providerId];
+
+        if (!providerConfig) {
+            return {
+                success: false,
+                message: `SSO provider '${providerId}' is not configured on this server environment.`
+            };
+        }
+
+        // 2. Generate high-entropy user nonce & state
+        /**
+         * {@link getUUID} uses {@link globalThis.crypto.getRandomValues}
+         */
+        const userNonce = await getUUID();
+        const stateObj = {
+            providerId,
+            parentTjpAddr,
+            userNonce
+        };
+        const state = btoa(JSON.stringify(stateObj));
+
+        // 3. Construct Auth URL if not pre-constructed
+        let authUrl = providerConfig.authUrl;
+        if (!authUrl.includes('client_id=')) {
+            authUrl = `${authUrl}?client_id=${providerConfig.clientId}&redirect_uri=${encodeURIComponent(providerConfig.redirectUri)}&response_type=code&scope=${encodeURIComponent(providerConfig.scope)}&state=${encodeURIComponent(state)}`;
+        } else if (!authUrl.includes('state=')) {
+            authUrl = `${authUrl}&state=${encodeURIComponent(state)}`;
+        }
+
+        // 4. Open popup window
+        const popup = window.open(
+            authUrl,
+            'sso-oauth-popup',
+            'width=600,height=700,status=yes,toolbar=no,menubar=no,location=yes'
+        );
+
+        if (!popup) {
+            return { success: false, message: 'Popup blocked by browser. Please enable popups for this site.' };
+        }
+
+        // 5. Promise wrapper listening for postMessage or window closure
+        return await new Promise<SsoPopupResult>((resolve) => {
+            let checkClosedInterval: any;
+
+            const messageListener = (event: MessageEvent) => {
+                if (event.origin !== window.location.origin) return;
+                const callbackData = event.data;
+                if (callbackData && callbackData.type === 'sso-oauth-callback') {
+                    window.removeEventListener('message', messageListener);
+                    clearInterval(checkClosedInterval);
+                    resolve({
+                        success: true,
+                        code: callbackData.code,
+                        stateObj: callbackData.stateObj || stateObj,
+                        redirectUri: providerConfig.redirectUri
+                    });
+                }
+            };
+
+            window.addEventListener('message', messageListener);
+
+            checkClosedInterval = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(checkClosedInterval);
+                    window.removeEventListener('message', messageListener);
+                    resolve({ success: false, message: 'Authentication cancelled (window closed).' });
+                }
+            }, 500);
+        });
+
+    } catch (error) {
+        const emsg = extractErrorMsg(error);
+        console.error(`${lc} ${emsg}`);
+        return { success: false, message: emsg };
+    }
+}
+
+/**
+ * Checks if the current window was opened as an OAuth popup (`window.opener` exists)
+ * and has received an authorization code in the URL query string (`?code=...`).
+ * If so, posts `sso-oauth-callback` to the parent window and closes itself.
+ */
+export function checkAndNotifyPopupOpener(): boolean {
+    if (typeof window === 'undefined' || !window.opener) {
+        return false;
+    }
+
+    const url = new URL(window.location.href);
+    const code = url.searchParams.get('code');
+    if (!code) {
+        return false;
+    }
+
+    const rawState = url.searchParams.get('state');
+    let stateObj: any;
+    if (rawState) {
+        try { stateObj = JSON.parse(atob(rawState)); } catch { }
+    }
+
+    window.opener.postMessage({
+        type: 'sso-oauth-callback',
+        code,
+        stateObj
+    }, window.location.origin);
+
+    window.close();
+    return true;
+}

package/src/index.mts

@@ -18,6 +18,9 @@ export * from "./api/ibgib-api-bridge.mjs";
 
 // Identity & Sync services
 export * from "./identity/keystone-sync-service.mjs";
+export * from "./identity/custodian-delegate-helper.mjs";
+// export * from "./identity/sso-callback-helper.mjs";
+export * from "./identity/sso-popup-helper.mjs";
 
 // Identity UI components
 export * from "./ui/component/identity/index.mjs";

package/src/ui/component/identity/add-device/add-device.mts

@@ -277,7 +277,11 @@ export class AddDeviceComponentInstance
             const primaryTjpAddr = getTjpAddr({ ibGib: primaryKeystone, defaultIfNone: 'incomingAddr' });
             if (!primaryTjpAddr) { throw new Error(`(UNEXPECTED) primaryTjpAddr falsy? couldn't get tjpAddr from primaryKeystone? (E: bc8cc8678e1ce4194ab02646160fde26)`); }
             const delegateSecret = await deriveDelegateSecret({ masterSecret });
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+            const syncProfileName = process.env.KEYSTONE_PROFILE_SOVEREIGN_SYNC;
+            if (!syncProfileName || !syncProfileName.trim()) {
+                throw new Error('KEYSTONE_PROFILE_SOVEREIGN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 8f9e0a1b2c3d4e5f67890123456789ab)');
+            }
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(syncProfileName.trim() as any)
                 .withUsername(`${primaryUsername}-sync-${deviceTag}`)
                 .withDescription(`Sync Delegate for ${primaryUsername} on ${deviceTag}`)
                 .withDetails({

package/src/ui/component/identity/identity-header/identity-header.mts

@@ -146,7 +146,8 @@ export class IdentityHeaderComponentInstance
             };
             this.keystoneCache.set(addr, details);
             return details;
-        } catch {
+        } catch (error) {
+            console.error(`${this.lc}[getKeystoneDetails] Registered keystone address ${addr} not found in local browser space: ${extractErrorMsg(error)} (E: a123456789abcdef0123456789c0002)`);
             return { username: '', description: '', isPrimary: false };
         }
     }

package/src/ui/component/identity/keystone-creator/keystone-creator.css

@@ -10,17 +10,105 @@ h2 {
     color: var(--clr-accent, #50fa7b);
 }
 
+.mode-tabs {
+    display: flex;
+    gap: 0.5rem;
+    background: rgba(0, 0, 0, 0.25);
+    padding: 0.25rem;
+    border-radius: 10px;
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
+    margin-bottom: 1rem;
+}
+
+.mode-tab {
+    flex: 1;
+    padding: 0.6rem 0.75rem;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--clr-text-secondary, #a6adc8);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.mode-tab:hover {
+    color: var(--clr-text, #cdd6f4);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.mode-tab.active {
+    background: #45475a;
+    color: #89b4fa;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
 .subtitle {
     color: var(--clr-text-secondary, #a6adc8);
-    font-size: 0.95rem;
+    font-size: 0.92rem;
     margin: 0;
+    line-height: 1.45;
 }
 
 .content {
-    margin-top: 1.5rem;
+    margin-top: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.tab-panel.hidden, .hidden {
+    display: none !important;
+}
+
+.sso-buttons {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 0.75rem;
+}
+
+.sso-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 0.8rem 1.25rem;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    background: #1e1e2e;
+    color: #cdd6f4;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.sso-btn:hover {
+    transform: translateY(-1px);
+    background: #313244;
+    border-color: #89b4fa;
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin: 0.5rem 0;
+    color: #a6adc8;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.divider::before, .divider::after {
+    content: '';
+    flex: 1;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.divider span {
+    padding: 0 0.75rem;
 }
 
 .input-group {
@@ -34,8 +122,25 @@ h2 {
     color: var(--clr-text-secondary, #a6adc8);
 }
 
+.text-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: #11111b;
+    color: #cdd6f4;
+    font-size: 0.95rem;
+    box-sizing: border-box;
+}
+
+.text-input:focus {
+    outline: none;
+    border-color: #89b4fa;
+    box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.2);
+}
+
 .action-row {
-    margin-top: 1rem;
+    margin-top: 0.5rem;
     width: 100%;
 }
 
@@ -65,10 +170,6 @@ h2 {
     margin-top: 0.5rem;
 }
 
-.status-area.hidden {
-    display: none;
-}
-
 .result-area {
     padding: 1.5rem;
     background: rgba(255, 255, 255, 0.03);
@@ -77,7 +178,6 @@ h2 {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    transition: opacity var(--t-med, 0.2s ease);
 }
 
 .result-area.collapsed {
@@ -99,18 +199,4 @@ h2 {
 input::placeholder {
     color: rgba(255, 255, 255, 0.35);
     opacity: 1;
-}
-
-.section-code-verification {
-    margin-top: 1.5rem;
-    padding: 1.25rem;
-    border: 2px dashed #f59e0b;
-    background: rgba(245, 158, 11, 0.05);
-    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
-    border-radius: 12px;
-    transition: all 0.3s ease;
-}
-
-.section-code-verification.hidden {
-    display: none;
 }