sign-in-with-esignet
Renders a button that will navigate the user to esignet website for authentication. Follows Open Id connect protocol.
Installation
# using npm
npm i sign-in-with-esignet
# using yarn
yarn add sign-in-with-esignet
Props
| prop | type | default value | note |
|---|---|---|---|
oidcConfig |
Json Object |
Open Id connect configurations | |
buttonConfig |
Json Object |
Configuration for sign in button |
Prop oidcConfig
| field | type | required | default value | note |
|---|---|---|---|---|
authorizeUri |
string |
Yes | The authorize URI on the authorization server is where an OpenID Connect flow starts. | |
redirect_uri |
string |
Yes | The redirect URI tells the issuer where to redirect the browser back to when the flow is done. | |
client_id |
string |
Yes | Every client (website or mobile app) is identified by a client ID. The client ID is a public value that does not have to be protected. | |
scope |
string |
Yes | Clients can request additional information or permissions via scopes. The openid scope is the only required scope. | |
response_type |
string |
No | code |
The authorization server will respond with a code, which the client can exchange for tokens on a secure channel. |
nonce |
string |
No | A nonce (or number used once) is a random value that is used to prevent replay attacks. | |
state |
string |
Recommanded | The state is an optional value that is carried through the whole flow and returned to the client. Random value will be created if not provided. | |
acr_values |
string |
No | Requested Authentication Context Class Reference values | |
claims |
string |
No | The Client can obtain Claims about the End-User and the Authentication event. For more detail check Claims. | |
claims_locales |
string |
No | End-User's preferred languages and scripts for Claims being returned. | |
ui_locales |
string |
No | End-User's preferred languages and scripts for the user interface | |
display |
string |
No | ASCII string value that specifies how the Authorization Server displays the authentication and consent user interface pages to the end user. Allowed values: page popup touch wap
|
|
max_age |
string |
No | Maximum Authentication Age. This specifies the allowable elapsed time in seconds since the last time the end user was actively authenticated by the OP. | |
prompt |
string |
No | Space delimited case-sensitive list of ASCII string values that specifies whether the Authorization Server prompts the End-User for re-authentication and consent. Allowed values: none login consent select_account
|
Prop buttonConfig
| field | type | valid values | default value | note |
|---|---|---|---|---|
type |
string |
(“standard”, “icon”) | "standard" | The button type: icon, or standard button. |
theme |
string |
(“outline”, “filled_blue”, “filled_black”, “custom”) | “outline” | The button theme. |
shape |
string |
(“sharp_edges”, “soft_edges”, “rounded_edges”) | “sharp_edges” | The button shape. |
labelText |
string |
“Sign in with Esignet” | The button text. | |
logoPath |
string |
esignet logo | Path to the id provider’s logo | |
width |
number |
400px | The button width, in pixels | |
background |
string |
Background property of esignet button | ||
textColor |
string |
Color of label text | ||
borderColor |
string |
Border color of esignet button | ||
borderWidth |
string |
Border width of esignet button | ||
font |
string |
font of the label text | ||
fontFamily |
string |
font family of the label text | ||
customStyle |
string |
Custom styling option |
Usage
# using import
import { SignInWithEsignet } from "sign-in-with-esignet";Example
React JS
//configuration for Open id connect
useEffect(() => {
SignInWithEsignet({
oidcConfig: {
authorizeUri: "https://esignet.dev.mosip.net/authorize",
redirect_uri: "https://healthservices.dev.mosip.net/userprofile",
client_id: "88Vjt34c5Twz1oJ",
scope: "openid profile",
},
buttonConfig: {
shape: "soft_edges",
theme: "filled_orange",
},
signInElement: document.getElementById("sign-in-with-esignet"),
});
}, []);
export default function MyComponent() {
return (
<div id="sign-in-with-esignet"></div>
);
}
/>;HTML
<!DOCTYPE html>
<html>
<body>
<script type="module">
import { SignInWithEsignet } from "<signin button JS url>";
window.onload = function () {
SignInWithEsignet({
oidcConfig: {
authorizeUri: "https://esignet.dev.mosip.net/authorize",
redirect_uri: "https://healthservices.dev.mosip.net/userprofile",
client_id: "88Vjt34c5Twz1oJ",
scope: "openid profile",
},
buttonConfig: {
shape: "soft_edges",
theme: "filled_orange",
},
signInElement: document.getElementById("sign-in-with-esignet"),
});
};
</script>
<div id="sign-in-with-esignet"></div>
</body>
</html>
/>;