Oidc-auth-beta NPM

unicc-oidc-auth

This library contains a component that implements a QR code authentication using UNICC OIDC Bridge.

Once the QR code is rendered on the screen, you should read it with your custom mobile app so the data can be shown.

If the timer expires before you are able to validate the QR code, it will get a new one automatically twice at most.

Installation

yarn add unicc-oidc-auth

npm install unicc-oidc-auth

Usage

Render a OidcAuth component supplying the mandatory props:

import { OidcAuth } from  "unicc-oidc-auth";
import "unicc-oidc-auth/dist/index.css";

(...)
<OidcAuth 
	appUrl={appUrl}
	oidcUrl={oidcUrl}
	oidcPresReqConfId={oidcPresReqConfId}
	oidcClientId={oidcClientId}
/>
(...)

Prop	Description	Mandatory
appUrl	Client app URL	:white_check_mark:
oidcUrl	OIDC Bridge URL	:white_check_mark:
oidcPresReqConfId	OIDC Bridge Presentation Configuration ID	:white_check_mark:
oidcClientId	OIDC Bridge Client ID	:white_check_mark:
wrapper	Custom wrapper function

Styling

In case you want to customize the QR code, the timer and/or the data shown, you can use wrapper prop, which signature and arguments are below:

const wrapper = (args: OidcAuthWrapperArgs) => JSX.Element

Arg	Type	Description
qrCode	JSX.Element	QR Code render
timeRemaining	JSX.Element	Timer render
defaultAccountDataWrapper	JSX.Element	Default account data render
accountData	AccountData	Account data object
isLoading	boolean	Flag that indicates if it's loading, either QR Code or data
hasError	boolean	Flag that indicates whether there was an error

License

Apache 2.0

Copyright

@emotion/react @emotion/styled @mui/material @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react-dom axios jwt-decode react react-countdown react-dom react-qr-code react-scripts sass web-vitals

@everything-registry/sub-chunk-2372

0.0.1

9 months ago