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 |

$3

| 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 |

$3

| 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 |
| customStyle | JSON Object | See Below | | Add custom style to the sign in button

$3

Basically all of the field will accept React.CSSProperties, and any value which is valid in React style is valid in below field

NOTE: Adding customStyle will clear all theme-based CSS.

| field | type | note |
| ------------- | -------- | ------------------------------------------ |
| outerDivStyleStandard | { [key: string]: string } | Adding style to outer div |
| outerDivStyleIcon | { [key: string]: string } | Adding style to outer div icon |
| logoDivStyle | { [key: string]: string } | Adding style div which surround the logo |
| logoImgStyle | { [key: string]: string } | Adding style to logo |
| labelSpanStyle | { [key: string]: string } | Adding style to the label |

Usage

`js

using import

import { SignInWithEsignet } from "sign-in-with-esignet";
`

Example

`js
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",
}}
/>
``