Link Embed Library

npm install @ofauth/link-embed

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

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

// 1. Create a handler (URL is not required at creation)
const handler = OFAuthLinkEmbed.create({
	theme: 'auto',
	async onSuccess(metadata) {
		console.log('Authentication successful:', metadata);
		// You can perform async actions here before the embed closes
		await fetch('/api/notify-success', {
			method: 'POST',
			body: JSON.stringify({ user: metadata.connection.userData.id })
		});
	},
	onClose(metadata) {
		console.log('Authentication closed:', metadata);
	},
	async onInvalidSession() {
        console.log("Session invalid, creating a new one...");
        const response = await fetch("/api/create-link-session");
        const { url } = await response.json();
        handler.open(url);
    }
});

// 2. Open the authentication popup with a session URL from your backend
async function startAuth() {
    const response = await fetch("/api/create-link-session");
    const { url } = await response.json();
	handler.open(url);
}

// Call startAuth() when you're ready, e.g., on a button click
// startAuth();

interface LinkHandler {
	open(url?: string): void;               // Opens the authentication popup. Can be called with a new URL.
	close(options?: { force?: boolean }): void; // Closes and destroys the authentication popup.
	setUrl(url: string): void;              // Sets or updates the URL for the next time `open()` is called.
	cleanup(): void;                         // Optional, used to cleanup html elements manually. Called automatically when embed has closed.
}

<!-- Authentication trigger button -->
<a
	data-ofauth-link
	href="https://link.ofauth.com/cs_xxxxxxxxx"
	data-ofauth-theme="auto"
	class="auth-button"
>
	Connect OnlyFans Account
</a>

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

const authButton = document.querySelector('[data-ofauth-link]');

// Listen for authentication events
authButton.addEventListener('success', (event) => {
	const metadata = event.detail.metadata;
	console.log('Authentication successful:', metadata);
});

authButton.addEventListener('close', (event) => {
	const metadata = event.detail.metadata;
	console.log('Authentication closed:', metadata);
});

authButton.addEventListener('invalid_session', (event) => {
	console.log('The link session is invalid or has expired.');
    // You might want to refresh the page or get a new link
});

// Import the component
import '@ofauth/link-embed/component';

<ofauth-link
	url="https://link.ofauth.com/cs_xxxxxxxxx"
	theme="auto"
	label="Connect OnlyFans Account"
></ofauth-link>

const authComponent = document.querySelector('ofauth-link');

authComponent.addEventListener('success', (event) => {
	const metadata = event.detail.metadata;
	console.log('Authentication successful:', metadata);
});

authComponent.addEventListener('close', (event) => {
	const metadata = event.detail.metadata;
	console.log('Authentication closed:', metadata);
});

authComponent.addEventListener('invalid_session', (event) => {
	console.log('The link session is invalid or has expired.');
    // You might want to get a new link and update the component's url property
});

const handler = OFAuthLinkEmbed.create({
	async onInvalidSession() {
        console.log("Session is invalid or expired, creating a new one...");
        const response = await fetch("/api/create-link-session"); // Your backend endpoint
        const { url } = await response.json();
        
        // Re-open the embed with the new session URL
        handler.open(url);
    },
    onClose: (metadata) => {
        // This will still fire after an invalid session is handled
        console.log('Embed closed. Type:', metadata.type);
    }
});

// When user clicks "Connect"
async function start() {
    const response = await fetch("/api/create-link-session");
    const { url } = await response.json();
    handler.open(url);
}

interface SuccessMetadata {
	successUrl: string;     // /v2/link/init successUrl with {CONNECTION_ID} resolved
	redirect: boolean;      // if redirect should occur based on your configuration
	connection: {
		id: string;         // The connection ID to store and use with Access API
		userData: {
			id: string;
			name: string;
			username: string;
			avatar: string;
		};
	};
}

// Example: Store connection ID when authentication succeeds
const handler = OFAuthLinkEmbed.create({
	async onSuccess(metadata) {
		// metadata.connection.id is the connection ID
		await fetch('/api/store-connection', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({
				connectionId: metadata.connection.id,
				userId: currentUserId // Your internal user ID
			})
		});
	}
});

interface CloseMetadata {
	type: 'user_exit' | 'error' | 'forced_exit';
	step?: 'pre-login' | 'login' | '2fa' | 'approval' | 'success' | 'error';
	error: {
		error_type: string;
		error_message: string;
	} | null;
}

/* Style web component button */
ofauth-link::part(button) {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	padding: 14px 28px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

ofauth-link::part(button):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

const handler = OFAuthLinkEmbed.create({
	url: authUrl,
	onSuccess: (metadata) => {
		console.log('Success:', metadata);
	},
	onClose: (metadata) => {
		if (metadata.error) {
			console.error('Authentication error:', metadata.error);
		} else {
			console.log('User cancelled at step:', metadata.step);
		}
	}
});

const handler = OFAuthLinkEmbed.create({
	onInvalidSession: async () => {
		const url = await createLinkSession();
		handler.open(url);
	}
});

// The iframe is created and loaded when create() is called
const handler = OFAuthLinkEmbed.create({
	url: authUrl,
	// ... configuration
});

// Opening is instant since the iframe is already loaded
handler.open();

// In React useEffect cleanup
useEffect(() => {
	const handler = createHandler();
	
	return () => {
		handler.destroy(); // Removes iframe and cleans up event listeners
	};
}, []);