hfn-auth-profile
v0.3.9
Published
HFN auth web component
Downloads
9
Readme
HFN login web component
Web component for embedding HFN signin/signup funtionality in any applications.
Usage
<hfn-auth-profile config='{"issuer":"issue_url","googleSSOClientId":"XXYYY"}' themeColor= "navy" enableSignup="true" singInOption='{"email":true,"phone":true,"facebook":true,"google":true}' gRecaptchaSiteKey="XXXSD_WEWE" /></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(`{baseURL}/api/v2/me/`, {
headers: {
Accept: "application/json",
Authorization: `Bearer {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":"issue_url","googleSSOClientId":"XXYYY"}' themeColor= "" gRecaptchaSiteKey="XXXSD_WEWE" enableSignup="" singInOption="" /></hfn-auth-profile>
</div>
</body>
</html>
-->React Implementation
npm i hfn-auth-profile
In React file:
<!--
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(`{baseURL}/api/v2/me/`, {
headers: {
Accept: "application/json",
Authorization: `Bearer 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":"issue_url","googleSSOClientId":"XXYYY"}' gRecaptchaSiteKey="XXXSD_WEWE" /></hfn-auth-profile>
);
-->Get new active token using refresh token & Logout utils.
<!--
import { getActiveToken, userLogout } from "hfn-auth-profile/main";
// Retrive new token from refresh token
const showActiveToken = async () => {
const params = {
issuer: "issue_url",
clientId: "xxx",
clientSecret: "yyyy",
};
const tokenData = await getActiveToken(params).catch(() => {
// console.log(e);
});
console.log(tokenData);
};
// Logout - Clear keycloak session
const onClickLogout = async () => {
const payload = {
issuer: "issue_url",
};
const res = 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>
-->NextJS Implementation
npm i hfn-auth-profile
In NextJS file:
<!--
React.useEffect(() => {
import("hfn-auth-profile/main");
});
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(`{baseURL}/api/v2/me/`, {
headers: {
Accept: "application/json",
Authorization: `Bearer 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":"issue_url","googleSSOClientId":"XXYYY"}' gRecaptchaSiteKey="XXXSD_WEWE" /></hfn-auth-profile>
);
-->Get new active token using refresh token & Logout utils.
<!--
// Retrive new token from refresh token
const showActiveToken = async () => {
if (typeof window !== "undefined") {
const { getActiveToken } = await import("hfn-auth-profile/main");
const tokenData = await getActiveToken(keycloakConfig).catch(() => {
// console.log(e);
});
console.log(tokenData);
}
};
// Logout - Clear keycloak session
const onClickLogout = async () => {
const payload = {
issuer: "issue_url",
};
if (typeof window !== "undefined") {
const { userLogout } = await import("hfn-auth-profile/main");
const res = await userLogout(payload);
if (!res?.error) {
// Successfully logout
}
}
};
<Button onClick={showActiveToken} className="logout-btn btn-cls">
Active Token
</Button>
<Button onClick={onClickLogout} className="logout-btn btn-cls">
Logout
</Button>
-->