react-sign-in-with-esignet
Version:
A react component for rendering “Sign in with..” button on mosip client’s web page for oidc integration.
95 lines (75 loc) • 8.57 kB
Markdown
# 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](https://openid.net/specs/openid-connect-core-1_0.html#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 |
| `customStyle` | `JSON Object` | See Below | | Add custom style to the sign in button
### Prop `customStyle`
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
<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",
}}
/>
```