1. OnlyFans Authentication
  2. Frontend components

OnlyFans Authentication

Frontend components

You can integrate OFAuth's login directly into your website using our embed library. There are two ways to implement this:

1. Using the JavaScript library for advanced use cases and more control.

Install the embed library:

        npm install @ofauth/link-embed

      
        import {
	OFAuthLinkEmbed,
	type LinkHandler,
	type EmbedLinkMessageSuccess
} from '@ofauth/link-embed';

// initialize the link embed
OFAuthLinkEmbed.init();

// create a Link handler
const handler: LinkHandler = await OFAuthLinkEmbed.create({
	url: 'https://auth.ofauth.com/s/xxxxxxxxx',
	theme: 'dark',
	onLoad: () => {
		console.log('ready');
	},
	onSuccess: (data: EmbedLinkMessageSuccess) => {
		// handle the success event, e.g. redirect to the successURL that was provided when the Link session was created
		if (data.redirect) {
			window.location.href = data.successURL;
		}
	},
	onClose: () => {
		console.log('closed');
	}
});

// handler has { open: () => void, close: () => void, destroy: () => void, ready: boolean }
// ready is true when the iframe is fully loaded

// open the Link embed modal
handler.open();

// close the Link embed modal
handler.close();

// destroy and remove all elements from the DOM
handler.destroy();

The handler API provides better performance by pre-initializing the login iframe. The iframe is created but hidden when create() is called, and only displayed when open() is called.

Handler API Reference

The create() method accepts a configuration object with the following options:

Option Type Description
url string Required. The Link client session URL
theme 'light' | 'dark' Optional. The theme of the embedded Link
onSuccess (data) => void Optional. Callback when an account is successfully linked
onLoad () => void Optional. Callback when the iframe is loaded
onClose () => void Optional. Callback when Link embed is closed

The create() method returns a Promise that resolves to a handler object with the following methods:

Method Description
open() Opens the Link embed modal
exit() Closes the Link embed modal
destroy() Cleans up the Link embed instance
ready Boolean indicating if the Link embed is ready to be opened

2. Using the global script for a quick and easy integration on any website.

        <!-- These are equivalent, place them anywhere on your page -->
<ofauth-link url="https://auth.ofauth.com/s/xxxxxxxxx" theme="dark" label="Login with OFAuth" />
<!-- OR -->
<a data-ofauth-link href="https://auth.ofauth.com/s/xxxxxxxxx" data-ofauth-theme="light"
	>Login with OFAuth</a
>

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

<script>
	// listen for the success event
	document.getElementByTag('ofauth-link').addEventListener('success', (event) => {
		// handle the success event, e.g. redirect to the successURL that was provided when the Link session was created
		if (data.redirect) {
			window.location.href = data.successURL;
		}
	});
</script>
TIP

You can style the button element any way you want, just make sure to keep the data-ofauth-link attribute.

Web Component Attributes

Attribute Type Description
url string Required. The Link client session URL
theme 'light' | 'dark' Optional. The theme of the embedded Link
label string Optional. The button text

Web Component Events

Event Detail Description
success Link success data Fired on successful account linking
exit None Fired when Link is closed

Browser Support

The Link Embed component supports all modern browsers:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
Previous <- Integrating OFAuth into your application
Next Overview ->