Link Embed

import { OFAuthLinkEmbed } from '@ofauth/link-embed';

const handler = OFAuthLinkEmbed.create({
  theme: 'auto',
  async onSuccess(metadata) {
    console.log('Connected:', metadata.connection.id);
    await storeConnection(metadata.connection.id);
  },
  onClose(metadata) {
    console.log('Closed:', metadata.type);
  },
  async onInvalidSession() {
    const response = await fetch("/api/create-link-session");
    const session = await response.json();
    if (session.mode !== "hosted") {
      throw new Error(`Expected hosted Link session, received ${session.mode}`);
    }
    handler.open(session.url);
  }
});

// Open the authentication popup
async function connectOnlyFans() {
  const response = await fetch("/api/create-link-session");
  const session = await response.json();
  if (session.mode !== "hosted") {
    throw new Error(`Expected hosted Link session, received ${session.mode}`);
  }
  handler.open(session.url);
}

interface SuccessMetadata {
  successUrl: string;
  redirect: boolean;
  connection: {
    id: string;         // Connection ID to store
    userData: {
      id: string;
      name: string;
      username: string;
      avatar: string | null;
    };
  };
}

<a
  data-ofauth-link
  href="https://link.ofauth.com/cs_xxxxxxxxx"
  data-ofauth-theme="auto"
>
  Connect OnlyFans Account
</a>

<script
  src="https://unpkg.com/@ofauth/link-embed/dist/embed.global.js"
  defer
  data-auto-init
></script>

<script>
  document.querySelector('[data-ofauth-link]')
    .addEventListener('success', (e) => {
      console.log('Connected:', e.detail.metadata.connection.id);
    });
</script>