Merge pull request #53 from criipto/upgrade-auth-js

Use PAR

Author: janmeier

README.md

@@ -49,25 +49,32 @@ import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
 import '@criipto/verify-react/index.css';
 
 export default function App() {
-  const { result } = useCriiptoVerify();
+  const { result, error } = useCriiptoVerify();
 
   if (result?.id_token) {
     return <pre>{JSON.stringify(result.id_token, null, 2)}</pre>;
   }
 
   return (
     <React.Fragment>
-      {result?.error ? (
-        <p>
-          An error occurred: {result.error} ({result.error_description}). Please try again.
-        </p>
-      ) : null}
+      {error ? <p>An error occurred: {String(error)}. Please try again.</p> : null}
       <AuthMethodSelector />
     </React.Fragment>
   );
 }
 ```
 
+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.
+
+## CORS
+
+The library makes fetch requests to Criipto 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.
+
 ## Sessions
 
 If you want to use `@criipto/verify-react` for session management (rather than one-off authentication) you can configure a `sessionStore`:
@@ -102,7 +109,7 @@ You may wish to increase the "Token lifetime" setting of your Criipto Applicatio
 ```jsx
 // src/App.js
 import React from 'react';
-import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
+import { useCriiptoVerify, AuthMethodSelector, OAuth2Error } from '@criipto/verify-react';
 
 export default function App() {
   const { claims, error, isLoading } = useCriiptoVerify();
@@ -119,7 +126,11 @@ export default function App() {
     <React.Fragment>
       {error ? (
         <p>
-          An error occured: {error.error} ({error.error_description}). Please try again:
+          An error occured:{' '}
+          {error instanceof OAuth2Error
+            ? `${error.error} (${error.error_description})`
+            : String(error)}
+          . Please try again.
         </p>
       ) : null}
       <AuthMethodSelector />
@@ -153,10 +164,6 @@ useEffect(() => {
 }, [isLoading, isInitializing]);
 ```
 
-## XHR/fetch caveats
-
-The library may require to do fetch requests against Criipto to fetch application configuration. Make sure that the host that the React app runs on is included in the list of callback URLs for your application. Otherwise, you will encounter CORS errors.
-
 ## Criipto
 
 Learn more about Criipto and sign up for your free developer account at [criipto.com](https://www.criipto.com).

package-lock.json

@@ -68,7 +68,7 @@
   },
   "homepage": "https://github.com/criipto/criipto-verify-react#readme",
   "dependencies": {
-    "@criipto/auth-js": "^3.7.2",
+    "@criipto/auth-js": "^4.0.3",
     "classnames": "^2.5.1",
     "jwt-decode": "^3.1.2",
     "qrcode": "^1.5.4",

package.json

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import React, { createContext, useState } from 'react';
 import {
   AuthMethodButtonContainer,
   type AuthMethodButtonContainerProps,
@@ -10,10 +10,14 @@ import SEBankIDQrCode from './SEBankIDQRCode';
 interface AuthButtonGroupContextInterface {
   multiple: boolean;
   acrValues: string[];
+  disabled: boolean;
+  setDisabled: (disabled: boolean) => void;
 }
 const initialContext: AuthButtonGroupContextInterface = {
   multiple: false,
   acrValues: [],
+  disabled: false,
+  setDisabled: () => {},
 };
 export const AuthButtonGroupContext =
   createContext<AuthButtonGroupContextInterface>(initialContext);
@@ -36,10 +40,13 @@ export default function AuthButtonGroup(props: { children: React.ReactNode }) {
     }
     return [];
   });
+  const [disabled, setDisabled] = useState(false);
 
   const context: AuthButtonGroupContextInterface = {
     multiple: acrValues.length > 1,
     acrValues,
+    disabled,
+    setDisabled,
   };
   return (
     <AuthButtonGroupContext.Provider value={context}>

src/components/AuthButtonGroup.tsx

@@ -51,8 +51,10 @@ export function AuthMethodButtonComponent(props: AuthMethodButtonComponentProps)
   const standalone = !group.multiple || isSingle(props.acrValue, group.acrValues);
   const language = (props.language ?? 'en') as Language;
   const action = (props.action ?? 'login') as Action;
+
+  const disabled = (props.disabled || group.disabled) && !props.loading;
   const className = classNames(`criipto-eid-btn`, acrValueToClassName(acrValue), props.className, {
-    'criipto-eid-btn--disabled': props.disabled,
+    'criipto-eid-btn--disabled': disabled,
     'criipto-eid-btn--loading': props.loading,
   });
 
@@ -74,17 +76,20 @@ export function AuthMethodButtonComponent(props: AuthMethodButtonComponentProps)
     </React.Fragment>
   );
 
+  const commonProps = {
+    ...props,
+    className,
+    disabled,
+  };
   const button = href ? (
     <React.Fragment>
-      <AnchorButton {...props} href={href} className={className} onClick={props.onClick}>
+      <AnchorButton {...commonProps} href={href}>
         {inner}
       </AnchorButton>
     </React.Fragment>
   ) : (
     <React.Fragment>
-      <Button {...props} className={className} onClick={props.onClick}>
-        {inner}
-      </Button>
+      <Button {...commonProps}>{inner}</Button>
     </React.Fragment>
   );
 
@@ -108,37 +113,19 @@ export function AuthMethodButtonContainer(props: AuthMethodButtonContainerProps)
   const group = useContext(AuthButtonGroupContext);
   const standalone = !group.multiple || isSingle(props.acrValue, group.acrValues);
   const context = useContext(CriiptoVerifyContext);
-  const { buildAuthorizeUrl } = context;
+  const { initializePAR } = context;
   const language = (props.language ?? context.uiLocales ?? 'en') as Language;
   const action = (props.action ?? context.action ?? 'login') as Action;
   const className = `criipto-eid-btn ${acrValueToClassName(acrValue)}${
     props.className ? ` ${props.className}` : ''
   }`;
   const [backdrop, setBackdrop] = useState<React.ReactElement | null>(null);
-
-  const [href, setHref] = useState(props.href);
-  const redirectUri = props.redirectUri || context.redirectUri;
-
+  const [loading, setLoading] = useState<boolean>(props.loading ?? false);
   useEffect(() => {
-    if (props.href) return;
-
-    let isSubscribed = true;
-    let loginHint: string | undefined = undefined;
+    setLoading(props.loading ?? false);
+  }, [props.loading]);
 
-    buildAuthorizeUrl({
-      redirectUri,
-      acrValues: acrValue,
-      loginHint,
-    })
-      .then((href) => {
-        if (isSubscribed) setHref(href);
-      })
-      .catch(console.error);
-
-    return () => {
-      isSubscribed = false;
-    };
-  }, [props.href, buildAuthorizeUrl, acrValue, context.pkce, redirectUri]);
+  const redirectUri = props.redirectUri || context.redirectUri;
 
   const handleClick: React.MouseEventHandler = (event) => {
     if (props.href) return;
@@ -182,11 +169,30 @@ export function AuthMethodButtonContainer(props: AuthMethodButtonContainerProps)
     }
 
     if (props.onClick) props.onClick(event);
+
+    if (!event.isDefaultPrevented()) {
+      setLoading(true);
+      group.setDisabled(true);
+      initializePAR({
+        redirectUri,
+        acrValues: acrValue,
+        loginHint: '',
+      })
+        .then((authorizeUrl) => {
+          window.location.href = authorizeUrl.toString();
+        })
+        .catch((error) => {
+          setLoading(false);
+          group.setDisabled(false);
+          context.handleResponse(error);
+        });
+    }
   };
 
   const { title, subtitle } = acrValueToTitle(language, acrValue, {
     disambiguate: isAmbiguous(acrValue, group.acrValues),
   });
+
   const contents = props.children ?? (
     <React.Fragment>
       {stringifyAction(language, action) ? `${stringifyAction(language, action)} ` : ''}
@@ -199,9 +205,9 @@ export function AuthMethodButtonContainer(props: AuthMethodButtonContainerProps)
     <React.Fragment>
       <AuthMethodButtonComponent
         {...props}
-        href={href}
         className={className}
         onClick={handleClick}
+        loading={loading}
       />
       {backdrop}
     </React.Fragment>
@@ -215,6 +221,7 @@ export function AuthMethodButtonContainer(props: AuthMethodButtonContainerProps)
         className={className}
         userAgent={props.userAgent}
         logo={<AuthMethodButtonLogo acrValue={acrValue} logo={props.logo} />}
+        disabled={props.disabled}
       >
         <span>{contents}</span>
       </SEBankIDSameDeviceButton>

src/components/AuthMethodButton.tsx

@@ -1,5 +1,10 @@
-import { OAuth2Error, savePKCEState, UserCancelledError } from '@criipto/auth-js';
-import type CriiptoConfiguration from '@criipto/auth-js/dist/CriiptoConfiguration';
+import {
+  OAuth2Error,
+  savePKCEState,
+  UserCancelledError,
+  type CriiptoConfiguration,
+} from '@criipto/auth-js';
+
 import React, {
   useContext,
   useRef,

src/components/QRCode.tsx

@@ -8,6 +8,8 @@ import ForegroundStrategy from './SEBankIDSameDeviceButton/Foreground';
 import ReloadStrategy from './SEBankIDSameDeviceButton/Reload';
 
 import { autoHydratedState, type Links } from './SEBankIDSameDeviceButton/shared';
+import { AuthButtonGroupContext } from './AuthButtonGroup';
+import classNames from 'classnames';
 import { Spinner } from './Spinner/Spinner';
 
 interface Props {
@@ -17,6 +19,7 @@ interface Props {
   fallback: React.ReactElement;
   redirectUri?: string;
   userAgent?: string;
+  disabled?: boolean;
 }
 
 function searchParamsToPOJO(input: URLSearchParams) {
@@ -79,6 +82,8 @@ async function fetchComplete(completeUrl: string) {
 }
 export default function SEBankIDSameDeviceButton(props: Props) {
   const { loginHint } = useContext(CriiptoVerifyContext);
+  const group = useContext(AuthButtonGroupContext);
+
   const rawUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : props.userAgent;
   const strategy = useMemo(
     () => determineStrategy(rawUserAgent, loginHint),
@@ -101,6 +106,8 @@ export default function SEBankIDSameDeviceButton(props: Props) {
   } = useContext(CriiptoVerifyContext);
   const redirectUri = props.redirectUri || defaultRedirectURi;
 
+  const disabled = props.disabled || group.disabled || initiated;
+
   const reset = () => {
     setPKCE(undefined);
     setLinks(null);
@@ -212,12 +219,14 @@ export default function SEBankIDSameDeviceButton(props: Props) {
 
   // Track when the button is clicked to stop refreshing URL
   const handleInitiate = () => {
+    group.setDisabled(true);
     handleLog('Initiated');
     setInitiated(true);
     setError(null);
   };
 
   const handleError = async (error: string) => {
+    group.setDisabled(false);
     setInitiated(false);
     setError(error);
 
@@ -237,7 +246,7 @@ export default function SEBankIDSameDeviceButton(props: Props) {
 
   const element = href ? (
     <a
-      className={`${props.className} ${initiated ? 'criipto-eid-btn--disabled' : ''}`}
+      className={classNames(props.className, { 'criipto-eid-btn--disabled': disabled })}
       href={href}
       onClick={handleInitiate}
     >