@criipto/verify-react 5.0.2 → 6.0.0

package/README.md

@@ -1,22 +1,27 @@
 # @criipto/verify-react
 
-Accept MitID, Swedish BankID, Norwegian BankID and more logins in your React app with `@criipto/verify-react`.
+The Idura Verify React SDK lets you authenticate users with European eID providers [supported by Idura](https://docs.idura.app/verify/e-ids/).
 
-## App switch support
-
-`@criipto/verify-react` supports app switching for Swedish BankID and Danish MitID by a best-effort mobile-os detection and setting the relevant Criipto Verify login hints.
+The SDK uses the [PKCE flow](https://docs.idura.app/verify/reference/authorization-flows/pkce/) suitable for public clients.
 
 ## Installation
 
-Using [npm](https://npmjs.org/)
-
 ```sh
 npm install @criipto/verify-react
 ```
 
-## Getting Started
+## Prerequisites
+
+You need an Idura application to initialize the SDK. If you haven't already, follow the [dashboard setup guide](https://docs.idura.app/verify/getting-started/dashboard-setup/) to create one.
+
+The SDK needs two values from your Idura application:
 
-Setup the Criipto Verify SDK by wrapping your application in `CriiptoVerifyProvider`:
+- your Idura domain
+- your application client ID
+
+## Initialize the SDK
+
+Initialize the SDK by wrapping your React app in `CriiptoVerifyProvider`:
 
 ```jsx
 // src/index.js
@@ -28,8 +33,8 @@ import App from './App';
 
 ReactDOM.render(
   <CriiptoVerifyProvider
-    domain="{YOUR_CRIIPTO_DOMAIN}"
-    clientID="{YOUR_CRIIPTO_APPLICATION_CLIENT_ID}"
+    domain="{YOUR_IDURA_DOMAIN}"
+    clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
     redirectUri={window.location.href}
   >
     <App />
@@ -38,15 +43,43 @@ ReactDOM.render(
 );
 ```
 
-You can find your domain and application client id on the [Criipto Dashboard](https://dashboard.criipto.com/).
+The `redirectUri` you pass to `CriiptoVerifyProvider` is where Idura returns the user after login, and it must be registered as a redirect URL on your Idura application. The examples use `window.location.href`, but any route (e.g. a dedicated `/callback` path) works too.
+
+## Call the `useCriiptoVerify` hook
+
+Inside a component wrapped by `CriiptoVerifyProvider`, call `useCriiptoVerify` to read the auth state and start a login.
+
+```jsx
+const {
+  result,
+  claims,
+  error,
+  loginWithRedirect,
+  loginWithPopup,
+  logout,
+  isLoading,
+  isInitializing,
+} = useCriiptoVerify();
+```
+
+- `result`: the login outcome, `result.id_token` or `result.code` on success and an error otherwise
+- `claims`: the decoded `id_token`
+- `error`: configuration and login errors
+- `loginWithRedirect` / `loginWithPopup`: start a login with redirect or in a popup window
+- `logout`: clear the session store and end the SSO session
+- `isLoading` / `isInitializing`: whether the SDK is still working or starting up
+
+## Render login options
 
-Use the `useCriiptoVerify` hook + the `AuthMethodSelector` component in your React app to render a login screen.
+The SDK provides an `AuthMethodSelector` component that renders a method selector screen where your users can choose a login method.
+
+By default, `AuthMethodSelector` shows one button per eID method enabled for your Idura application (**Applications → your app → eIDs** in the dashboard).
 
 ```jsx
 // src/App.js
 import React from 'react';
 import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
-import '@criipto/verify-react/index.css';
+import '@criipto/verify-react/index.css'; // Import the stylesheet, or the buttons render unstyled.
 
 export default function App() {
   const { result, error } = useCriiptoVerify();
@@ -64,20 +97,56 @@ export default function App() {
 }
 ```
 
-Always render the `error` field from `useCriiptoVerify`. It surfaces both **configuration errors** (e.g. invalid `domain` or `clientID`, or CORS) raised when the provider mounts, and **runtime errors** raised during a login attempt (e.g. user cancellation, OAuth2 errors from the IdP). Without rendering `error`, misconfiguration and failed logins will appear silent to the user.
+Always render the `error` field from `useCriiptoVerify`. It surfaces both **configuration errors** (e.g. invalid `domain` or `clientID`, or CORS) raised when the provider mounts, and **runtime errors** raised during a login attempt (e.g. user cancellation, or OAuth2 errors from the [identity provider (IdP)](https://docs.idura.app/verify/reference/glossary/#identity-provider-idp)). Without rendering `error`, misconfiguration and failed logins will appear silent to the user.
+
+### Select eIDs programmatically
+
+To control eID methods from your code instead of the dashboard, pass `acrValues` to `AuthMethodSelector`:
+
+```jsx
+<AuthMethodSelector
+  acrValues={['urn:grn:authn:dk:mitid:substantial', 'urn:grn:authn:dk:mitid:high']}
+/>
+```
+
+See the [Authorize URL Builder](https://docs.idura.app/verify/guides/authorize-url-builder) or individual eID pages for the full list of supported `acr_values`.
+
+## Send the user directly to an eID login screen
+
+If you don't need the method selector, use `loginWithRedirect` (or `loginWithPopup`) and pass a single eID method identifier in `acrValues`.
+
+```jsx
+// src/App.js
+import React from 'react';
+import { useCriiptoVerify } from '@criipto/verify-react';
+
+export default function App() {
+  const { result, loginWithRedirect } = useCriiptoVerify();
+
+  if (result?.id_token) {
+    return <pre>{JSON.stringify(result.id_token, null, 2)}</pre>;
+  }
+
+  return (
+    <button onClick={() => loginWithRedirect({ acrValues: 'urn:grn:authn:dk:mitid:substantial' })}>
+      Log in with MitID
+    </button>
+  );
+}
+```
 
 ## CORS
 
-The library makes fetch requests to Criipto for two reasons:
+The SDK makes fetch requests to Idura for two reasons:
 
 1. To load application configuration when the provider mounts.
 2. To push the authorization request (PAR) when a user clicks a login button.
 
-Make sure that the origin your React app runs on is included in the list of callback URLs for your application. Otherwise, both calls will fail with CORS errors.
+Make sure the origin your React app runs on is included in the list of redirect URLs for your Idura application. Otherwise, both calls will fail with CORS errors.
 
 ## Sessions
 
-If you want to use `@criipto/verify-react` for session management (rather than one-off authentication) you can configure a `sessionStore`:
+If you want to use the SDK for session management (rather than one-off authentication), you can configure a `sessionStore`:
 
 ```jsx
 // src/index.js
@@ -89,8 +158,8 @@ import App from './App';
 
 ReactDOM.render(
   <CriiptoVerifyProvider
-    domain="{YOUR_CRIIPTO_DOMAIN}"
-    clientID="{YOUR_CRIIPTO_APPLICATION_CLIENT_ID}"
+    domain="{YOUR_IDURA_DOMAIN}"
+    clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
     redirectUri={window.location.href}
     sessionStore={window.sessionStorage} // or window.localStorage
   >
@@ -100,11 +169,11 @@ ReactDOM.render(
 );
 ```
 
-When a `sessionStore` is configured the library will store the id_token in your chosen storage (sessionStorage or localStorage) and invalidate the token once it expires.
+When a `sessionStore` is configured, the SDK stores the `id_token` in your chosen storage (`sessionStorage` or `localStorage`) and invalidates it once it expires.
 
-The library will also attempt to retrieve a user token on page load via SSO (if your criipto domain has SSO enabled).
+The SDK will also attempt to retrieve the token on page load via SSO. (This requires SSO enabled on your Idura domain: check **Domains → your domain → SSO** section in the dashboard).
 
-You may wish to increase the "Token lifetime" setting of your Criipto Application.
+For longer sessions, you can increase the **Token lifetime** setting of your Idura application (**Applications → your app → Advanced Options**).
 
 ```jsx
 // src/App.js
@@ -126,7 +195,7 @@ export default function App() {
     <React.Fragment>
       {error ? (
         <p>
-          An error occured:{' '}
+          An error occurred:{' '}
           {error instanceof OAuth2Error
             ? `${error.error} (${error.error_description})`
             : String(error)}
@@ -139,18 +208,34 @@ export default function App() {
 }
 ```
 
-### Logging Out
+### Logging out
 
-`@criipto/verify-react` offers the logout method you can use to clear session storage and log out of any existing SSO session.
+The `logout` method clears the session store and ends any existing SSO session.
 
 ```jsx
-const {logout} = useCriiptoVerify();
-...
-<button onClick={() => logout({redirectUri: window.location.href})}>
-  Log Out
-</button>
+// src/App.js
+import React from 'react';
+import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
+import '@criipto/verify-react/index.css';
+
+export default function App() {
+  const { claims, logout } = useCriiptoVerify();
+
+  if (claims) {
+    return (
+      <React.Fragment>
+        <pre>{JSON.stringify(claims, null, 2)}</pre>
+        <button onClick={() => logout({ redirectUri: window.location.href })}>Log out</button>
+      </React.Fragment>
+    );
+  }
+
+  return <AuthMethodSelector />;
+}
 ```
 
+`logout` takes an optional `redirectUri` (where to send the user afterwards) and `state` (an opaque string used to mitigate CSRF attacks, see [state](https://docs.idura.app/verify/reference/request-parameters/#state)).
+
 ## useEffect + loginWithRedirect
 
 If you are triggering `loginWithRedirect` inside a `useEffect` hook, you need to allow the SDK time to initialize a few values before you redirect the user:
@@ -164,6 +249,10 @@ useEffect(() => {
 }, [isLoading, isInitializing]);
 ```
 
-## Criipto
+## Idura
+
+Learn more about Idura and sign up for a free developer account at [idura.eu](https://idura.eu).
+
+### Why the package is named `@criipto/verify-react`
 
-Learn more about Criipto and sign up for your free developer account at [criipto.com](https://www.criipto.com).
+Idura was previously called Criipto, and most of our SDKs keep the `@criipto` name for backwards compatibility. You can read more about the rebrand in [our blog](https://idura.eu/blog/criipto-is-now-idura).

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import CriiptoAuth, { OAuth2Error, OAuth2Error as OAuth2Error$1, PKCEPublicPart,
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/context.d.ts
-type ResultSource = 'QRCode' | 'SEBankIDQrCode' | 'SEBankIDSameDeviceButton' | 'redirect' | 'popup';
+type ResultSource = 'SEBankIDQrCode' | 'SEBankIDSameDeviceButton' | 'redirect' | 'popup';
 type Result = {
   id_token: string;
   state?: string;
@@ -159,34 +159,6 @@ declare function AuthButtonGroup(props: {
   children: React.ReactNode;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/QRCode.d.ts
-declare const QRCode: React.FC<{
-  margin?: number;
-  className?: string;
-  acrValues?: string[];
-  children: (props: {
-    qrElement: React.ReactElement;
-    /**
-     * Will be true once the QR code has been scanned
-     */
-    isAcknowledged: boolean;
-    /**
-     * Will be true if the user cancels the login on his mobile device
-     */
-    isCancelled: boolean;
-    /**
-     * Whether or not QR codes are enabled for this Criipto Applicaiton
-     */
-    isEnabled: boolean | undefined;
-    error: OAuth2Error$1 | Error | null;
-    retry: () => void;
-    /**
-     * A method for triggering a full screen redirect to authentication (useful if user is on mobile device already)
-     */
-    redirect: () => Promise<void>;
-  }) => React.ReactElement;
-}>;
-//#endregion
 //#region src/components/SEBankIDQRCode.d.ts
 interface Props {
   redirectUri?: string;
@@ -263,5 +235,5 @@ declare function useCriiptoVerify(): {
 //#region src/utils.d.ts
 declare function filterAcrValues(input: string[]): string[];
 //#endregion
-export { type Action, AuthMethodButtonContainer as AuthButton, AuthMethodButtonContainer as AuthMethodButton, AuthMethodButtonComponent as AuthButtonComponent, AuthButtonGroup, AuthMethodSelector, Sweden as AuthMethodSelectorSweden, CriiptoVerifyProvider, type Language, OAuth2Error, QRCode, type Result, SEBankIDQrCode as SEBankIDQRCode, actions, filterAcrValues, useCriiptoVerify };
+export { type Action, AuthMethodButtonContainer as AuthButton, AuthMethodButtonContainer as AuthMethodButton, AuthMethodButtonComponent as AuthButtonComponent, AuthButtonGroup, AuthMethodSelector, Sweden as AuthMethodSelectorSweden, CriiptoVerifyProvider, type Language, OAuth2Error, type Result, SEBankIDQrCode as SEBankIDQRCode, actions, filterAcrValues, useCriiptoVerify };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,9 +1,9 @@
-import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import CriiptoAuth, { OAuth2Error, OAuth2Error as OAuth2Error$1, UserCancelledError, clearPKCEState, generatePKCE, parseAuthorizeResponseFromLocation, savePKCEState } from "@criipto/auth-js";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import CriiptoAuth, { OAuth2Error, OAuth2Error as OAuth2Error$1, clearPKCEState, generatePKCE, parseAuthorizeResponseFromLocation, savePKCEState } from "@criipto/auth-js";
 import jwtDecode from "jwt-decode";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { UAParser } from "@ua-parser-js/pro-enterprise";
-import QRCode$1 from "qrcode";
+import QRCode from "qrcode";
 import classNames from "classnames";
 //#region src/context.ts
 const actions = [
@@ -45,7 +45,7 @@ const CriiptoVerifyContext = createContext({
 });
 //#endregion
 //#region package.json
-var version = "5.0.2";
+var version = "6.0.0";
 //#endregion
 //#region src/i18n/en.ts
 const en = {
@@ -1215,7 +1215,7 @@ function useDraw(qrCode, options) {
 		if (!qrCode) return;
 		let isSubscribed = true;
 		_asyncToGenerator(function* () {
-			const qrImage = yield QRCode$1.toDataURL(qrCode, {
+			const qrImage = yield QRCode.toDataURL(qrCode, {
 				errorCorrectionLevel: "low",
 				scale: 10,
 				width,
@@ -1819,113 +1819,6 @@ function Sweden(props) {
 	});
 }
 //#endregion
-//#region src/components/QRCode.tsx
-const QRCode = (props) => {
-	var _ref, _props$acrValues;
-	const { children, margin, className } = props;
-	const elementRef = useRef(null);
-	const { client, buildOptions, buildAuthorizeUrl, handleResponse, pkce, store, acrValues: configurationAcrValues } = useContext(CriiptoVerifyContext);
-	const [requestId, setRequestId] = useState(() => Math.random().toString());
-	const [isAcknowledged, setAcknowledged] = useState(false);
-	const [isCancelled, setCancelled] = useState(false);
-	const [error, setError] = useState(null);
-	const [criiptoConfiguration, setCriiptoConfiguration] = useState(null);
-	const isEnabled = criiptoConfiguration === null || criiptoConfiguration === void 0 ? void 0 : criiptoConfiguration.client.qr_enabled;
-	const acrValues = (_ref = (_props$acrValues = props.acrValues) !== null && _props$acrValues !== void 0 ? _props$acrValues : configurationAcrValues) !== null && _ref !== void 0 ? _ref : [];
-	useEffect(() => {
-		let isSubsribed = true;
-		client.fetchCriiptoConfiguration().then((c) => {
-			if (!isSubsribed) return;
-			setCriiptoConfiguration(c);
-		});
-		return () => {
-			isSubsribed = false;
-		};
-	}, [client]);
-	const redirect = useCallback(_asyncToGenerator(function* () {
-		var _criiptoConfiguration;
-		if (!criiptoConfiguration) return;
-		const intermediaryUrl = ((_criiptoConfiguration = criiptoConfiguration.client.qr_intermediary_url) !== null && _criiptoConfiguration !== void 0 ? _criiptoConfiguration : criiptoConfiguration.qr_intermediary_url).replace("/{id}", "").replace("{id}", "");
-		const authorizeUrl = new URL(yield buildAuthorizeUrl({ acrValues }));
-		const authorizeParams = new URLSearchParams(authorizeUrl.search);
-		authorizeParams.set("domain", authorizeUrl.host);
-		authorizeUrl.host = new URL(intermediaryUrl).host;
-		authorizeUrl.port = new URL(intermediaryUrl).port;
-		authorizeUrl.pathname = new URL(intermediaryUrl).pathname + "/authorize";
-		authorizeUrl.search = authorizeParams.toString();
-		if (pkce && "code_verifier" in pkce) savePKCEState(store, {
-			response_type: "id_token",
-			pkce_code_verifier: pkce.code_verifier,
-			redirect_uri: authorizeParams.get("redirect_uri")
-		});
-		window.location.href = authorizeUrl.toString();
-	}), [
-		buildAuthorizeUrl,
-		criiptoConfiguration,
-		acrValues
-	]);
-	const authorize = useCallback(() => {
-		return client.qr.authorize(elementRef.current, _objectSpread2(_objectSpread2({}, buildOptions({ acrValues })), {}, { margin }));
-	}, [
-		client,
-		buildOptions,
-		margin,
-		acrValues
-	]);
-	useLayoutEffect(() => {
-		if (!elementRef.current) return;
-		if (error) return;
-		if (!isEnabled) return;
-		const promise = authorize();
-		promise.onAcknowledged = () => {
-			setAcknowledged(true);
-		};
-		promise.then((response) => {
-			if (promise.cancelled) return;
-			handleResponse(response, {
-				pkce: pkce && "code_verifier" in pkce ? pkce : void 0,
-				source: "QRCode"
-			});
-		}).catch((err) => {
-			if (err instanceof UserCancelledError) {
-				setCancelled(true);
-				return;
-			}
-			if (promise.cancelled) return;
-			setError(err);
-			handleResponse(err, { source: "QRCode" });
-		});
-		return () => {
-			promise.cancel();
-		};
-	}, [
-		authorize,
-		pkce,
-		handleResponse,
-		requestId,
-		error,
-		isEnabled
-	]);
-	const handleRetry = () => {
-		setAcknowledged(false);
-		setCancelled(false);
-		setError(null);
-		setRequestId(Math.random().toString());
-	};
-	return children({
-		qrElement: /* @__PURE__ */ jsx("div", {
-			ref: elementRef,
-			className
-		}),
-		isAcknowledged,
-		isCancelled,
-		isEnabled: criiptoConfiguration === null || criiptoConfiguration === void 0 ? void 0 : criiptoConfiguration.client.qr_enabled,
-		error,
-		retry: handleRetry,
-		redirect
-	});
-};
-//#endregion
 //#region src/use-criipto-verify.ts
 function useCriiptoVerify() {
 	const { result, claims, loginWithRedirect, loginWithPopup, acrValues, isLoading, isInitializing, logout, checkSession } = useContext(CriiptoVerifyContext);
@@ -1943,6 +1836,6 @@ function useCriiptoVerify() {
 	};
 }
 //#endregion
-export { AuthMethodButtonContainer as AuthButton, AuthMethodButtonContainer as AuthMethodButton, AuthMethodButtonComponent as AuthButtonComponent, AuthButtonGroup, AuthMethodSelector, Sweden as AuthMethodSelectorSweden, CriiptoVerifyProvider, OAuth2Error, QRCode, SEBankIDQrCode as SEBankIDQRCode, actions, filterAcrValues, useCriiptoVerify };
+export { AuthMethodButtonContainer as AuthButton, AuthMethodButtonContainer as AuthMethodButton, AuthMethodButtonComponent as AuthButtonComponent, AuthButtonGroup, AuthMethodSelector, Sweden as AuthMethodSelectorSweden, CriiptoVerifyProvider, OAuth2Error, SEBankIDQrCode as SEBankIDQRCode, actions, filterAcrValues, useCriiptoVerify };
 
 //# sourceMappingURL=index.js.map