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>

/>;