@ofauth/link-embed v3.0.0

OFAuth

This repository contains the official package for embedding OFAuth Link into your applications.

Installation

npm install @ofauth/link-embed

Usage

Depending on your use case, there are a few different ways to use the integrate the OFAuth Link Embed.

Before using the OFAuth Link Embed, first create a Link client session.

1. Using the ES Module

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

// create a Link handler
const handler: LinkHandler = await OFAuthLinkEmbed.create({
	url: "https://link.ofauth.com/s/cs_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:

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

2. Using the global script

<a
	data-ofauth-link
	href="https://link.ofauth.com/s/cs_xxxxxxxxx"
	data-ofauth-theme="light"
	>Login with OFAuth</a
>

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

<!-- or manually initialize the embed, if you're using a javascript framework or bundler -->
<script>
	import { OFAuthLinkEmbed } from "@ofauth/link-embed"
	OFAuthLinkEmbed.init()
</script>

To import the Web Component:

import "@ofauth/link-embed/component"
// or from: https://unpkg.com/@ofauth/link-embed/dist/component.js

Usage:

<ofauth-link
	url="https://link.ofauth.com/s/cs_xxxxxxxxx"
	theme="dark"
	label="Login with OFAuth" />

<script>
	// listen for the success event
	const link = document.getElementByTag("ofauth-link")
	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
		}

		console.log(event.detail.user)
	})

	link.addEventListener("close", (event) => {
		console.log("Link closed")
	})
</script>

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

Web Component Attributes

Web Component Events

Browser Support

The Link Embed component supports all modern browsers:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)