@criipto/verify-react 5.0.2 → 6.0.1

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.
 
-Use the `useCriiptoVerify` hook + the `AuthMethodSelector` component in your React app to render a login screen.
+## 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
+
+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,87 @@ 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`.
+
+### Configure the request per eID
+
+`login_hint` and `scope` values are eID specific, so a single provider-level setting rarely fits every button. Pass a `beforeAuthorize` function to `CriiptoVerifyProvider` to adjust the request for the eID the user actually picked:
+
+```jsx
+<CriiptoVerifyProvider
+  domain="{YOUR_IDURA_DOMAIN}"
+  clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
+  beforeAuthorize={({ acrValues }) => {
+    if (acrValues[0].startsWith('urn:grn:authn:dk:mitid')) {
+      return { scope: 'openid address' };
+    }
+    if (acrValues[0].startsWith('urn:grn:authn:se:bankid')) {
+      return { loginHint: 'stepUp:mrtd' };
+    }
+  }}
+>
+  <App />
+</CriiptoVerifyProvider>
+```
+
+`beforeAuthorize` runs just before every authorize request is built, whichever way the login was started: `AuthMethodSelector`, `AuthMethodButton`, `SEBankIDQRCode`, `loginWithRedirect` or `loginWithPopup`. Return the values you want to change for that one request, or nothing at all to leave it as configured on the provider.
+
+- `acrValues` is always an array, and holds a single value for logins started from a button or `AuthMethodSelector`
+- `options` holds the request as the SDK would otherwise send it, in case you want to inspect it
+- you can override `loginHint`, `scope`, `prompt`, `uiLocales`, `state`, `nonce`, `extraUrlParams` and the `action`/`message` shorthands
+- `loginHint` is appended to the hints the SDK already adds, so use `action` and `message` rather than writing `action:`/`message:` hints yourself
+- `acrValues`, `redirectUri` and the PKCE and response parameters are managed by the SDK and cannot be overridden here. Use `redirectUri` on the button or selector to change where a single eID returns the user
+
+The hint and scope values differ per eID, see the individual eID pages in the [Idura docs](https://docs.idura.app/verify/e-ids/) for what each one supports.
+
+## 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 +189,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 +200,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 +226,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 +239,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 +280,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

@@ -1,10 +1,10 @@
 import React from "react";
 import * as _criipto_auth_js0 from "@criipto/auth-js";
-import CriiptoAuth, { OAuth2Error, OAuth2Error as OAuth2Error$1, PKCEPublicPart, Prompt, ResponseType } from "@criipto/auth-js";
+import CriiptoAuth, { AuthorizeUrlParamsOptional, OAuth2Error, OAuth2Error as OAuth2Error$1, PKCEPublicPart, Prompt, ResponseType } from "@criipto/auth-js";
 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;
@@ -26,6 +26,39 @@ type Claims = {
   exp: number;
   [key: string]: string | number;
 };
+interface BeforeAuthorizeParams {
+  /**
+   * The acr_values of the authorize request that is about to be made, always normalized to an array.
+   * For logins started from a button or `AuthMethodSelector` this will hold exactly one value.
+   */
+  acrValues: string[];
+  /**
+   * The parameters the SDK is about to use, with `CriiptoVerifyProvider` configuration already applied.
+   */
+  options: AuthorizeUrlParamsOptional;
+}
+/**
+ * Parameters to override for a single authorize request. Any field left out (or set to `undefined`)
+ * keeps the value configured on `CriiptoVerifyProvider`.
+ */
+interface BeforeAuthorizeOverrides {
+  /**
+   * Appended to the login_hint of this request, just like a `loginHint` passed directly to
+   * `loginWithRedirect`. Use `action` and `message` rather than `action:`/`message:` hints,
+   * as those are managed by the SDK.
+   */
+  loginHint?: string;
+  action?: Action;
+  message?: string;
+  scope?: string;
+  prompt?: Prompt;
+  uiLocales?: string;
+  state?: string;
+  nonce?: string;
+  extraUrlParams?: {
+    [key: string]: string | null;
+  };
+}
 //#endregion
 //#region src/provider.d.ts
 interface CriiptoVerifyProviderOptions {
@@ -67,6 +100,14 @@ interface CriiptoVerifyProviderOptions {
    */
   response?: 'token' | 'code';
   completionStrategy?: 'client' | 'openidprovider';
+  /**
+   * Called just before each authorize request is built, for every login flow
+   * (`AuthMethodSelector`, `AuthMethodButton`, `SEBankIDQRCode`, `loginWithRedirect` and `loginWithPopup`).
+   * Return the parameters you wish to change for that particular request, for instance a
+   * `loginHint` that depends on the acr_value the user picked. Returning nothing leaves the
+   * request as configured on the provider.
+   */
+  beforeAuthorize?: (params: BeforeAuthorizeParams) => BeforeAuthorizeOverrides | void;
   /**
    * @deprecated Criipto internal use
    */
@@ -159,34 +200,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 +276,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, type BeforeAuthorizeOverrides, type BeforeAuthorizeParams, 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.1";
 //#endregion
 //#region src/i18n/en.ts
 const en = {
@@ -464,10 +464,14 @@ const MESSAGE_SUPPORTING_ACR_VALUES = [
 	"urn:grn:authn:se:bankid:same-device",
 	"urn:grn:authn:se:bankid:another-device:qr"
 ];
+function normalizeAcrValues(acrValues) {
+	if (!acrValues) return [];
+	return Array.isArray(acrValues) ? acrValues : [acrValues];
+}
 function buildLoginHint(loginHint, params) {
-	const { options, action, message } = params;
-	const acrValues = (options === null || options === void 0 ? void 0 : options.acrValues) ? Array.isArray(options === null || options === void 0 ? void 0 : options.acrValues) ? options === null || options === void 0 ? void 0 : options.acrValues : [options === null || options === void 0 ? void 0 : options.acrValues] : [];
-	let hints = (loginHint ? loginHint.split(" ") : []).concat((options === null || options === void 0 ? void 0 : options.loginHint) ? options === null || options === void 0 ? void 0 : options.loginHint.split(" ") : []).filter((hint) => !hint.startsWith("message:") && !hint.startsWith("action:"));
+	const { options, action, message, extraLoginHint } = params;
+	const acrValues = normalizeAcrValues(options === null || options === void 0 ? void 0 : options.acrValues);
+	let hints = (loginHint ? loginHint.split(" ") : []).concat((options === null || options === void 0 ? void 0 : options.loginHint) ? options === null || options === void 0 ? void 0 : options.loginHint.split(" ") : []).concat(extraLoginHint ? extraLoginHint.split(" ") : []).filter((hint) => !hint.startsWith("message:") && !hint.startsWith("action:"));
 	if (action) {
 		hints = hints.filter((h) => !h.startsWith("action:"));
 		if (acrValues.length === 1) {
@@ -574,6 +578,10 @@ const CriiptoVerifyProvider = (props) => {
 	const action = (_ref = (_props$action = props.action) !== null && _props$action !== void 0 ? _props$action : parseAction(loginHint)) !== null && _ref !== void 0 ? _ref : "login";
 	const message = (_props$message = props.message) !== null && _props$message !== void 0 ? _props$message : parseMessage(loginHint);
 	const sessionStore = props.sessionStore;
+	const beforeAuthorizeRef = useRef(props.beforeAuthorize);
+	useEffect(() => {
+		beforeAuthorizeRef.current = props.beforeAuthorize;
+	}, [props.beforeAuthorize]);
 	const refreshPKCE = function() {
 		var _ref2 = _asyncToGenerator(function* () {
 			if (props.pkce) return props.pkce;
@@ -592,8 +600,8 @@ const CriiptoVerifyProvider = (props) => {
 		};
 	}();
 	const buildOptions = useCallback((options) => {
-		var _props$responseType, _props$state, _props$nonce, _props$prompt, _props$scope, _options$pkce;
-		return _objectSpread2(_objectSpread2({
+		var _props$responseType, _props$state, _props$nonce, _props$prompt, _props$scope, _options$pkce, _beforeAuthorizeRef$c, _overrides$state, _overrides$nonce, _overrides$prompt, _overrides$scope, _overrides$uiLocales, _overrides$action, _overrides$message;
+		const resolved = _objectSpread2(_objectSpread2({
 			redirectUri: defaultRedirectUri(props.redirectUri),
 			responseType: (_props$responseType = props.responseType) !== null && _props$responseType !== void 0 ? _props$responseType : "code",
 			responseMode: props.responseMode
@@ -611,6 +619,25 @@ const CriiptoVerifyProvider = (props) => {
 			}),
 			extraUrlParams: props.criiptoSdk !== void 0 ? { criipto_sdk: props.criiptoSdk } : { criipto_sdk: `@criipto/verify-react@${version}` }
 		});
+		const overrides = (_beforeAuthorizeRef$c = beforeAuthorizeRef.current) === null || _beforeAuthorizeRef$c === void 0 ? void 0 : _beforeAuthorizeRef$c.call(beforeAuthorizeRef, {
+			acrValues: normalizeAcrValues(resolved.acrValues),
+			options: resolved
+		});
+		if (!overrides) return resolved;
+		return _objectSpread2(_objectSpread2({}, resolved), {}, {
+			state: (_overrides$state = overrides.state) !== null && _overrides$state !== void 0 ? _overrides$state : resolved.state,
+			nonce: (_overrides$nonce = overrides.nonce) !== null && _overrides$nonce !== void 0 ? _overrides$nonce : resolved.nonce,
+			prompt: (_overrides$prompt = overrides.prompt) !== null && _overrides$prompt !== void 0 ? _overrides$prompt : resolved.prompt,
+			scope: (_overrides$scope = overrides.scope) !== null && _overrides$scope !== void 0 ? _overrides$scope : resolved.scope,
+			uiLocales: (_overrides$uiLocales = overrides.uiLocales) !== null && _overrides$uiLocales !== void 0 ? _overrides$uiLocales : resolved.uiLocales,
+			loginHint: buildLoginHint(props.loginHint, {
+				options,
+				action: (_overrides$action = overrides.action) !== null && _overrides$action !== void 0 ? _overrides$action : action,
+				message: (_overrides$message = overrides.message) !== null && _overrides$message !== void 0 ? _overrides$message : message,
+				extraLoginHint: overrides.loginHint
+			}),
+			extraUrlParams: _objectSpread2(_objectSpread2({}, resolved.extraUrlParams), overrides.extraUrlParams)
+		});
 	}, [
 		pkce,
 		props.state,
@@ -1215,7 +1242,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 +1846,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 +1863,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