auth-profile-draft
v1.1.7
Published
HFN OneAuth web component
Downloads
2,439
Readme
HFN OneAuth web component
The oneAuth web component is designed to manage authentication for your application. This component can be used to trigger authentication either automatically when the page loads or on-demand based on user interactions.
Usage
To use the
<hfn-oneauth>component, you need to include it in your application's layout or a specific page where authentication is required.
<hfn-oneauth config='{"authUrl":"https://authadmin.dev.heartfulness.org","realm":"heartfulness-qa","client_id":"heartfulness_website"}' showCancel="true" authType="on-demand"/></hfn-oneauth>
Attributes
config (required):
The configuration for the authentication process, including the authUrl, realm, and client_id.
showCancel (optional):
This attribute enables a cancel button in the error block. It requires the "LandingPage" path to be stored in localStorage. When the cancel button is clicked, the user is redirected back to the landing page.
authType (optional):
- Controls when the authentication process is triggered.
- "on-demand": The authentication is triggered only when explicitly called using the method
document.querySelector("hfn-oneauth").triggerAuth(). This is useful for scenarios where authentication should only occur after a specific user action, like clicking a button. - If authType is not set, the authentication process starts automatically as soon as the page loads.
Handling Authentication
By default, the redirect URI is set to
/oneauth/authorization. After successful authentication through HFN OneAuth, the user is redirected to the/oneauth/authorizationroute. This route must be created in your application to handle the authorization response, process the received token, and then redirect the user back to the landing page stored in localStorage.
Simple HTML Implementation
<!---
<html>
<head>
<script type="module" src="./dist/main.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) => {
const authComp = document.querySelector('hfn-oneauth');
// After successful login, We will get Auth token from the below callback method. Using this token we can fetch SRCM profile information.
authComp.loginCallback = function(res){
if(res?.data?.access_token){
fetch(`https://xxx/me`, {
method:"GET",
headers: {
Accept: "application/json",
Authorization: `Bearer ${res?.data?.access_token}`,
"x-client-id":"xxx",
}
})
.then((r) => {
if (r?.data?.results.length > 0) {
}
})
.catch((e) => {
//In the event of an error, an error block can be displayed, offering options to retry login or cancel, utilizing the handleProfileAuthentication function.
authComp.handleProfileAuthentication(false);
});
}
};
});
</script>
</head>
<body>
<div>
<hfn-oneauth config='{"authUrl":"https://xxx.com","realm":"xxx","client_id":"xxx"}' showCancel="true"/></hfn-oneauth>
</div>
</body>
</html>
-->React & Gatsby Implementation
npm i hfn-oneauth
In React or Gatsby App:
Handle authentication in "/oneauth/authorization" page
<!--
const hfnAuth = useRef();
React.useEffect(() => {
import("hfn-oneauth/main");
});
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}/xxx/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) => {
//In the event of an error, an error block can be displayed, offering options to retry login or cancel, utilizing the handleProfileAuthentication function.
hfnAuth.current.handleProfileAuthentication(false);
});
};
}, [hfnAuth]);
return (
<hfn-oneauth config='{"authUrl":"https://xxx.com","realm":"xxx","client_id":"xxx"}' showCancel="true" authType="on-demand" /></hfn-oneauth>
);
-->Get new active token using refresh token & Logout utils.
<!--
import { getRefreshToken, userLogout } from "hfn-oneauth/main";
// Retrive new token from refresh token
const getActiveToken = async () => {
const params = {
"authUrl":"https://xxx.com",
"realm":"xxx",
"client_id":"xxx"
};
const tokenData = await getRefreshToken(params).catch(() => {
// console.log(e);
});
console.log(tokenData);
};
// Logout - Clear keycloak session
const logout = async () => {
const params = {
"authUrl":"https://xxx.com",
"realm":"xxx",
"client_id":"xxx"
};
const res = userLogout(params);
if (!res?.error) {
// logout success
}
};
<Button onClick={getActiveToken} className="logout-btn btn-cls">
Active Token
</Button>
<Button onClick={logout} className="logout-btn btn-cls">
Logout
</Button>
-->NextJS Implementation
npm i hfn-oneauth
In NextJS App:
Handle authentication in "/oneauth/authorization" page
<!--
const hfnAuth = useRef();
React.useEffect(() => {
import("hfn-oneauth/main");
});
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}/xxx/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) => {
//In the event of an error, an error block can be displayed, offering options to retry login or cancel, utilizing the handleProfileAuthentication function.
hfnAuth.current.handleProfileAuthentication(false);
});
};
}, [hfnAuth]);
return (
<hfn-oneauth config='{"authUrl":"https://xxx.com","realm":"xxx","client_id":"xxx"}' showCancel="true" authType="on-demand" /></hfn-oneauth>
);
Get new active token using refresh token & Logout utils.
<!--
// Retrive new token from refresh token
const getActiveToken = async () => {
if (typeof window !== "undefined") {
const { getRefreshToken } = await import("hfn-oneauth/main");
const params = {
"authUrl":"https://xxx.com",
"realm":"xxx",
"client_id":"xxx"
};
const tokenData = await getRefreshToken(params).catch(() => {
// console.log(e);
});
console.log(tokenData);
}
};
// Logout - Clear keycloak session
const logout = async () => {
const params = {
"authUrl":"https://xxx.com",
"realm":"xxx",
"client_id":"xxx"
};
if (typeof window !== "undefined") {
const { userLogout } = await import("hfn-oneauth/main");
const res = await userLogout(params);
if (!res?.error) {
// Successfully logout
}
}
};
<Button onClick={getActiveToken} className="logout-btn btn-cls">
Active Token
</Button>
<Button onClick={logout} className="logout-btn btn-cls">
Logout
</Button>
-->