Add the “Secured by Obelisk Gate” seal

What the seal is

A small card that says “Sign in / Create your account — Secured by Obelisk Gate,” shows the live Obelisk Seal, and sends the user to your own login URL when they click. Its ✓ has two conditions: your registration must be able to complete a sign-in at obeliskgate.com (a listed-but-not-integrated or suspended registration shows no ✓), and the browser must report that the page showing the card is at an address your registration names.

The card is served by obeliskgate.com inside an iframe, so the page around it cannot change what it says. Any page can still embed it, or draw a picture that looks like it. That is why the card checks where it is shown, and why it links to /verify/<your-rp>: the list of addresses Obelisk Gate holds for your registration.

Where the ✓ appears

The card reads location.ancestorOrigins, which the browser fills with the address of every page framing the card; the page itself cannot write it. The card compares those addresses with your registration's https addresses (its callback origins and declared origins, listed at /verify/<your-rp>):

Register every address you show the seal on. While your registration can complete a sign-in, the loader sets data-obelisk-state on your data-obelisk-seal element and fires an obelisk-seal-state event whose detail.state is MATCH, MISMATCH or UNKNOWN, so you can catch an unregistered address on your own page.

Plain HTML — copy & paste

Paste this where you want the seal to appear (your login or sign-up page). Set data-rp to your relying-party slug and data-login-url to your own login-initiation URL.

<script src="https://obeliskgate.com/embed/seal.js" async></script>
<div data-obelisk-seal
     data-rp="your-rp-slug"
     data-login-url="/login"
     data-mode="login"
     data-theme="auto"
     data-size="md"></div>

Attributes — data-rp (required): your client_id (a studio relying-party slug, or the client_id Obelisk Gate issued when you registered your app) ·data-login-url: your own login URL the button opens (falls back to Obelisk's /auth/authorize?client_id=<rp>) · data-mode: login | signup · data-theme: auto | light | dark · data-size: sm | md | lg.

React / Next.js

The same data-obelisk-seal div works in JSX; load the loader script once at the app root (Next.js <Script> with afterInteractive, or a plain tag in _document).

export default function ObeliskSeal() {
  return (
    <>
      <div
        data-obelisk-seal
        data-rp="your-rp-slug"
        data-login-url="/login"
        data-mode="login"
      />
      {/* Load the loader once (e.g. in _app / root layout):
          <Script src="https://obeliskgate.com/embed/seal.js" strategy="afterInteractive" /> */}
    </>
  );
}

Where to paste, per platform

Not registered yet? Request an app registration (self-serve registration is off for now), then preview your seal at /verify/<your-rp>.