Front-end Integration Overview
Authopia’s widget has few possible options to be displayed
Fully fledged widget

Button only

Its UI and translations are configurable while integrating the widget if needed.
As a first step you’ll need to install the package via npm:
npm install @authopia/widget
Next to integrate the widget you need to put this into your frontend code:
Load the widget component:
import { defineCustomElements } from '@authopia/widget/loader';
import '@authopia/widget/dist/authopia-widget/authopia-widget.css';
defineCustomElements(window);
Embed the widget web component
<authopia-widget
email="YOUR EMAIL"
project-id="PASTE YOUR PROJECT ID HERE"
text="Register"
/>
If you want to bind to onSuccess event:
const authopiaWidget = document.querySelector("authopia-widget")
authopiaWidget.onSuccess = function () {
alert('success');
}
If your project uses typescript you can add
global.d.ts
for better typing:
declare namespace JSX {
import { AuthopiaWidgetElement } from '@authopia/widget';
interface IntrinsicElements {
'authopia-widget': AuthopiaWidgetElement;
}
}
After a successful authentication flow an ID token is returned via onSuccess method
Last updated