Skip to content

(chore): change browser example to query from the CDN drop in by default #292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kchaw2005 merged 1 commit into from
Jun 24, 2026
Merged

(chore): change browser example to query from the CDN drop in by default #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions js/examples/browser/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,16 @@ pnpm dev

Open http://localhost:4000 in your browser (Vite will auto-open it).

By default, the example uses the built workspace package through Vite, so run
the root `pnpm build` first to keep `dist/index.js` and
`dist/idkit_wasm_bg.wasm` in sync. The `Use CDN version` checkbox reveals the
core package URL and runs the same flow through that CDN global instead:
The browser page loads the latest release CDN build by default. The URL points
at the 4.2.0 package root, so unpkg resolves it through the core package's
`unpkg` entry (`./dist/idkit.global.js`):

```text
https://unpkg.com/@worldcoin/idkit-core/dist/idkit.global.js
https://unpkg.com/@worldcoin/idkit-core@4.2.0
```

This verifies the package was published with `dist/idkit.global.js` and the
sibling `dist/idkit_wasm_bg.wasm` file.
This verifies the package was published with `dist/idkit.global.js`, exposes
`window.IDKit`, and can fetch the sibling `dist/idkit_wasm_bg.wasm` file.

#### Production

Expand Down
79 changes: 14 additions & 65 deletions js/examples/browser/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,11 +345,7 @@ <h1>IDKit Browser Example</h1>
<input type="checkbox" id="cfgUseInviteCode" />
</div>
<div class="config-row">
<label for="cfgUseCdnVersion">Use CDN version</label>
<input type="checkbox" id="cfgUseCdnVersion" />
</div>
<div class="config-row" id="cfgCdnUrlRow" hidden>
<label>CDN URL</label>
<label>IDKit script</label>
<code id="cfgCdnUrl"></code>
</div>
</section>
Expand Down Expand Up @@ -421,12 +417,11 @@ <h3>Error</h3>
updateToggleText();
</script>

<script type="module">
// Import IDKit core (pure TypeScript, no dependencies)
import { IDKit } from "@worldcoin/idkit-core";

const CDN_IDKIT_SCRIPT_URL = "https://unpkg.com/@worldcoin/idkit-core";
let cdnIDKitLoadPromise = null;
<script src="https://unpkg.com/@worldcoin/idkit-core@4.2.0"></script>
<script>
const CDN_IDKIT_SCRIPT_URL =
"https://unpkg.com/@worldcoin/idkit-core@4.2.0";

@Takaros999 Takaros999 Jun 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe remove the version so it always pulls in the latest one

const idkit = window.IDKit;

// Format V4 verify response with visual indicators
function formatVerifyResult(response) {
Expand Down Expand Up @@ -535,15 +530,9 @@ <h3>Error</h3>
const errorDiv = document.getElementById("error");
const errorText = document.getElementById("errorText");
const useInviteCodeToggle = document.getElementById("cfgUseInviteCode");
const useCdnVersionToggle = document.getElementById("cfgUseCdnVersion");
const cdnUrlRow = document.getElementById("cfgCdnUrlRow");
const cdnUrl = document.getElementById("cfgCdnUrl");

cdnUrl.textContent = CDN_IDKIT_SCRIPT_URL;
cdnUrlRow.hidden = !useCdnVersionToggle.checked;
useCdnVersionToggle.addEventListener("change", () => {
cdnUrlRow.hidden = !useCdnVersionToggle.checked;
});

const hideAll = () => {
qrDiv.hidden = true;
Expand All @@ -569,47 +558,7 @@ <h3>Error</h3>
return res.json();
}

async function loadCdnIDKit() {
if (window.IDKit) {
return window.IDKit;
}

if (!cdnIDKitLoadPromise) {
cdnIDKitLoadPromise = new Promise((resolve, reject) => {
const script = document.createElement("script");
script.async = true;
script.src = CDN_IDKIT_SCRIPT_URL;
script.onload = () => {
if (window.IDKit) {
resolve(window.IDKit);
return;
}

cdnIDKitLoadPromise = null;
reject(new Error("CDN script loaded without window.IDKit."));
};
script.onerror = () => {
cdnIDKitLoadPromise = null;
reject(
new Error(`Failed to load CDN script: ${CDN_IDKIT_SCRIPT_URL}`),
);
};
document.head.append(script);
});
}

return cdnIDKitLoadPromise;
}

async function getIDKit() {
if (useCdnVersionToggle.checked) {
return loadCdnIDKit();
}

return IDKit;
}

function createPreset(idkit, presetName) {
function createPreset(presetName) {
return idkit[presetName]({ signal: makeSignal() });
}

Expand All @@ -620,14 +569,14 @@ <h3>Error</h3>
hideAll();

statusDiv.hidden = false;
statusText.textContent = useCdnVersionToggle.checked
? "Loading CDN version..."
: "Fetching RP signature...";

const idkit = await getIDKit();

statusText.textContent = "Fetching RP signature...";

if (!idkit) {
throw new Error(
`CDN script loaded without window.IDKit: ${CDN_IDKIT_SCRIPT_URL}`,
);
}

// Fetch RP signature from the backend
const rpSig = await fetchRpSignature(getAction());
console.log("RP signature response:", rpSig);
Expand All @@ -643,7 +592,7 @@ <h3>Error</h3>
statusText.textContent = "Creating verification request...";

const useInviteCode = useInviteCodeToggle.checked;
const preset = createPreset(idkit, presetName);
const preset = createPreset(presetName);
const requestConfig = {
app_id: getAppId(),
action: getAction(),
Expand Down
Loading