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.

For local development use PROJECT ID of your Sandbox project in the admin panel, otherwise you would need to set up an HTTPS environment and change localhost to your project's domain for the widget to work properly.

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