Web-keycloak NPM

HFN login web component

Web component for embedding HFN signin/signup funtionality in any applications.

Usage

<hfn-auth-profile config='{"issuer":"issue_url","keycloakAdmin":"admin_dev_url,"realm":"xxxx"}' themeColor= "navy" enableSignup="true" singInOption='{"email":true,"phone":true,"facebook":true,"google":true}' /></hfn-auth-profile>

Simple HTML Implementation

<!---
<html>
    <head>
        <script type="module" src="https://unpkg.com/hfn-auth-profile/index.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <script type="text/javascript">
            window.addEventListener('load', (res) => {

                // After successful login, We will get Auth token from the below callback method. Using this token we can fetch SRCM profile information. 

                document.querySelector('hfn-auth-profile').loginCallback = function(res){
                    fetch("/api/v2/me/", {
                            headers: {
                            Accept: "application/json",
                            Authorization: res?.access_token,
                            }
                        })
                        .then((r) => {
                            if (r?.data?.results.length > 0) {
                                console.log(r?.data?.results)
                            }
                        })
                        .catch((e) => {
                            console.log(e);
                        });
                };
            });
        </script>
    </head>
    <body>
        <div>
            <hfn-auth-profile config='{"issuer":"xxx","keycloakAdmin":"xxx", "realm": "xxxx"}' themeColor= "" enableSignup="" singInOption="" /></hfn-auth-profile>
        </div>
    </body>
</html>
-->

React Implementation

npm i hfn-auth-profile

In React file:

<!-- 
React.useEffect(() => {
    import("hfn-auth-profile");
});

const hfnAuth = useRef();    

useEffect(() => {

    // After successful login, We will get Auth token from the below callback method. Using this token we can fetch SRCM profile information. 

    hfnAuth.current.loginCallback = (res) => {
        fetch("/api/v2/me/", {
            headers: {
            Accept: "application/json",
            Authorization: res?.access_token,
            }
        })
        .then((r) => {
            if (r?.data?.results.length > 0) {
                console.log(r?.data?.results)
            }
        })
        .catch((e) => {
            console.log(e);
        });
    };
}, [hfnAuth]); 

return (
    <hfn-auth-profile ref={hfnAuth} config='{"issuer":"xxx","keycloakAdmin":"xxx", "realm": "xxxx"}'/></hfn-auth-profile>
);


-->

Get new active token using refresh token & Logout utils.

<!-- 
import { Authentication } from "hfn-auth-profile/js/auth/authentication";

const auth = new Authentication();

// Retrive new token from refresh token
const showActiveToken = async () => {
    const params = {
        keycloakAdmin: "keycloak_admin_url",
        clientId: "xxx",
        clientSecret: "yyyy",
    };
    const tokenData = await auth.getActiveToken(params);
    console.log(tokenData);
};

// Logout - Clear keycloak session
const onClickLogout = async () => {
    const payload = {
        issuer: "issue_url",
    };
    const res = await auth.userLogout(payload);
    if (!res?.error) {
        // logout success
    }
};

<Button onClick={showActiveToken} className="logout-btn btn-cls">
    Active Token
</Button>
<Button onClick={onClickLogout} className="logout-btn btn-cls">
    Logout
</Button>

-->

11 months ago

10 months ago

11 months ago

1 year ago

1 year ago

11 months ago