💻React

Integration example based on React framework

import { defineCustomElements } from '@authopia/widget/loader';
import '@authopia/widget/dist/authopia-widget/authopia-widget.css';

defineCustomElements(window);

const App = () => (
    <authopia-widget
        email="[email protected]"
        project-id="12345678"
        text="Click"
    />
);

export default App;

Custom integration example based on React framework (typescript based)

import { useEffect, useRef, useState } from 'react';

import { defineCustomElements, JSX } from '@authopia/widget/loader';
import { AuthopiaError } from '@authopia/widget';
import '@authopia/widget/dist/authopia-widget/authopia-widget.css';

defineCustomElements(window);

const isAdmin = true;

const App = () => {
    const widgetRef = useRef<JSX.AuthopiaWidget>();

    const [error, setError] = useState<string | undefined>();

    const onSuccess = () => {
        window.location.href = '/success';
    };

    const onError = (error: AuthopiaError) => setError(error.detail);

    const onValidate = () => {
        if (isAdmin) return true;

        setError('You dont have the right permissions');
        return false;
    };

    useEffect(() => {
        const { current } = widgetRef;

        if (current) {
            current.onSuccess = onSuccess;
            current.onFail = onError;
            current.onValidate = onValidate;
        }
    }, [widgetRef, onSuccess, onError, onValidate]);

    return (
        <form>
            <input id="email-input" type="email" />
            {!!error && <span>{error}</span>}
            <authopia-widget
                email-input-id="email-input"
                mode="login"
                project-id="12345678"
                ref={widgetRef}
                text="Log in"
                type="submit"
            />
        </form>
    );
};

export default App;