Embedded Credential Renderer

class CredentialRenderer {
  constructor(iframeId, credential) {
    this.iframe = document.getElementById(iframeId);
    this.credential = credential;
    this.ready = false;

    window.addEventListener('message', this.handleMessage.bind(this));
  }

  handleMessage(event) {
    const { type, payload } = event.data || {};

    switch (type) {
      case 'RENDERER_READY':
        this.ready = true;
        this.render();
        break;

      case 'UPDATE_HEIGHT':
        this.iframe.style.height = `${payload}px`;
        break;

      case 'OBFUSCATE':
        console.log('User wants to hide:', payload);
        // Update your credential's disclosed claims
        this.onObfuscate?.(payload);
        break;

      case 'RENDER_ERROR':
        console.error('Render error:', payload.message);
        break;
    }
  }

  render() {
    if (!this.ready) return;
    this.iframe.contentWindow.postMessage({
      type: 'RENDER_DOCUMENT',
      payload: { document: this.credential }
    }, '*');
  }

  print() {
    this.iframe.contentWindow.postMessage({ type: 'PRINT' }, '*');
  }
}

// Usage
const renderer = new CredentialRenderer('my-iframe', myCredential);
renderer.onObfuscate = (field) => {
  // Handle selective disclosure
};

import { useEffect, useRef, useCallback } from 'react';

function CredentialRenderer({ credential, onObfuscate }) {
  const iframeRef = useRef(null);
  const readyRef = useRef(false);

  const sendCredential = useCallback(() => {
    if (!readyRef.current || !iframeRef.current) return;
    iframeRef.current.contentWindow.postMessage({
      type: 'RENDER_DOCUMENT',
      payload: { document: credential }
    }, '*');
  }, [credential]);

  useEffect(() => {
    const handleMessage = (event) => {
      const { type, payload } = event.data || {};

      switch (type) {
        case 'RENDERER_READY':
          readyRef.current = true;
          sendCredential();
          break;
        case 'UPDATE_HEIGHT':
          if (iframeRef.current) {
            iframeRef.current.style.height = `${payload}px`;
          }
          break;
        case 'OBFUSCATE':
          onObfuscate?.(payload);
          break;
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [sendCredential, onObfuscate]);

  // Re-render when credential changes
  useEffect(() => {
    sendCredential();
  }, [credential, sendCredential]);

  return (
    <iframe
      ref={iframeRef}
      src="https://aho.com/render/frame"
      style={{ width: '100%', border: 'none', minHeight: '400px' }}
      title="Credential Renderer"
    />
  );
}

// Usage
function App() {
  const [credential, setCredential] = useState(myCredential);

  const handleObfuscate = (field) => {
    console.log('Hide field:', field);
    // Update credential with redacted field
  };

  return <CredentialRenderer credential={credential} onObfuscate={handleObfuscate} />;
}

<template>
  <iframe
    ref="iframeRef"
    src="https://aho.com/render/frame"
    :style="{ width: '100%', border: 'none', minHeight: height + 'px' }"
    title="Credential Renderer"
  />
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  credential: { type: Object, required: true }
});

const emit = defineEmits(['obfuscate']);

const iframeRef = ref(null);
const height = ref(400);
const ready = ref(false);

function sendCredential() {
  if (!ready.value || !iframeRef.value) return;
  iframeRef.value.contentWindow.postMessage({
    type: 'RENDER_DOCUMENT',
    payload: { document: props.credential }
  }, '*');
}

function handleMessage(event) {
  const { type, payload } = event.data || {};

  switch (type) {
    case 'RENDERER_READY':
      ready.value = true;
      sendCredential();
      break;
    case 'UPDATE_HEIGHT':
      height.value = payload;
      break;
    case 'OBFUSCATE':
      emit('obfuscate', payload);
      break;
  }
}

watch(() => props.credential, sendCredential, { deep: true });

onMounted(() => window.addEventListener('message', handleMessage));
onUnmounted(() => window.removeEventListener('message', handleMessage));
</script>