sebankid/qr: fallback to button element if QR cannot be rendered (#34)

* sebankid/qr: fallback to button element if QR cannot be rendered

* sebankid:same-device: proper fallback

src/components/AuthMethodSelector.tsx

@@ -53,17 +53,16 @@ type SwedenProps = Omit<AuthMethodSelectorProps, 'acrValues'> & {
   acrValues: string[]
 }
 
-const QR_ACR_VALUE = 'urn:grn:authn:se:bankid:another-device:qr';
 export function Sweden(props: SwedenProps) {
   const {acrValues} = props;
   const {action, uiLocales} = useContext(CriiptoVerifyContext);
   const language = props.language || uiLocales as Language || 'en';
-  const hasQR = acrValues.includes(QR_ACR_VALUE);
-  const filteredAcrValues = acrValues.filter(s => s !== QR_ACR_VALUE);
+  const hasQR = acrValues.includes(SEBankIDQrCode.acr_values);
+  const filteredAcrValues = acrValues.filter(s => s !== SEBankIDQrCode.acr_values);
 
   const userAgent = getUserAgent(typeof navigator !== 'undefined' ? navigator.userAgent : props.userAgent);
   const mobileOS = userAgent?.os.name === 'iOS' ? 'iOS' : userAgent?.os.name === 'Android' ? 'android' : null;
-  const [showQR, setShowQR] = useState(hasQR && !mobileOS);
+  const showQR = hasQR && !mobileOS;
 
   return (
     <div className="criipto-eid-selector">
@@ -81,14 +80,18 @@ export function Sweden(props: SwedenProps) {
           />
         ))}
         {showQR ? (
-          <SEBankIDQrCode language={language} redirectUri={props.redirectUri} />
+          <SEBankIDQrCode
+            language={language}
+            redirectUri={props.redirectUri}
+            fallback={(
+              <AuthMethodButton 
+                acrValue={SEBankIDQrCode.acr_values} 
+              />
+            )}
+          />
         ) : (hasQR && mobileOS) ? (
           <AuthMethodButton 
-            acrValue={QR_ACR_VALUE} 
-            onClick={(event) => {
-              event.preventDefault();
-              setShowQR(true);
-            }}
+            acrValue={SEBankIDQrCode.acr_values}
           />
         ) : null}
       </AuthButtonGroup>

src/components/SEBankIDQRCode.tsx

@@ -7,6 +7,7 @@ import CriiptoVerifyContext from "../context";
 
 import logo from './SEBankIDQRCode/[email protected]';
 import './SEBankIDQRCode/SEBankIDQRCode.css';
+import AuthMethodButton from "./AuthMethodButton";
 
 interface Props {
   redirectUri?: string,
@@ -28,7 +29,10 @@ interface Props {
     isCompleting: boolean
     error: OAuth2Error | Error | null
     retry: () => void
-})  => React.ReactElement
+  }) => React.ReactElement
+
+  /** Render fallback element while loading */
+  fallback?: React.ReactElement
 }
 
 interface QrResponse {
@@ -47,11 +51,6 @@ function searchParamsToPOJO(input: URLSearchParams) {
   }, {});
 }
 
-// const logo = new Image();
-// logo.src = logoSrc;
-
-// const LOGO_RATIO = 0.15;
-
 export default function SEBankIDQrCode(props: Props) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -180,6 +179,10 @@ export default function SEBankIDQrCode(props: Props) {
     </div>
   );
 
+  if (!qrCode && props.fallback) {
+    return props.fallback;
+  }
+
   if (props.children) {
     return props.children({
       qrElement,
@@ -193,6 +196,8 @@ export default function SEBankIDQrCode(props: Props) {
   return qrElement;
 }
 
+SEBankIDQrCode.acr_values = 'urn:grn:authn:se:bankid:another-device:qr';
+
 type UseDrawOptions = {
   width?: number,
   canvas: HTMLCanvasElement | null,

src/components/SEBankIDSameDeviceButton.tsx

@@ -164,7 +164,6 @@ export default function SEBankIDSameDeviceButton(props: Props) {
     })
     .catch(err => {
       setInitiated(false);
-      setError(err?.toString());
     });
   }, [buildAuthorizeUrl, redirectUri, strategy]);