[security]: remove external dependency for loading QR codes for 2FA

Author: DaneEveritt

package.json

@@ -63,6 +63,7 @@
         "@types/debounce": "^1.2.0",
         "@types/events": "^3.0.0",
         "@types/node": "^14.11.10",
+        "@types/qrcode.react": "^1.0.1",
         "@types/query-string": "^6.3.0",
         "@types/react": "^16.9.41",
         "@types/react-copy-to-clipboard": "^4.3.0",

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -11,14 +11,14 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import asModal from '@/hoc/asModal';
 import ModalContext from '@/context/ModalContext';
+import QRCode from 'qrcode.react';
 
 interface Values {
     code: string;
 }
 
 const SetupTwoFactorModal = () => {
     const [ token, setToken ] = useState('');
-    const [ loading, setLoading ] = useState(true);
     const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
 
     const { dismiss, setPropOverrides } = useContext(ModalContext);
@@ -108,11 +108,7 @@ const SetupTwoFactorModal = () => {
                                         css={tw`w-64 h-64 rounded`}
                                     />
                                     :
-                                    <img
-                                        src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
-                                        onLoad={() => setLoading(false)}
-                                        css={tw`w-full h-full shadow-none rounded-none`}
-                                    />
+                                    <QRCode renderAs={'svg'} value={token} css={tw`w-full h-full shadow-none rounded-none`}/>
                                 }
                             </div>
                         </div>
@@ -124,7 +120,6 @@ const SetupTwoFactorModal = () => {
                                     type={'text'}
                                     title={'Code From Authenticator'}
                                     description={'Enter the code from your authenticator device after scanning the QR image.'}
-                                    autoFocus={!loading}
                                 />
                             </div>
                             <div css={tw`mt-6 md:mt-0 text-right`}>

yarn.lock

@@ -1228,6 +1228,13 @@
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
 
+"@types/qrcode.react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.1.tgz#0904e7a075a6274a5258f19567b4f64013c159d8"
+  integrity sha512-PcVCjpsiT2KFKfJibOgTQtkt0QQT/6GbQUp1Np/hMPhwUzMJ2DRUkR9j7tXN9Q8X06qukw+RbaJ8lJ22SBod+Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/query-string@^6.3.0":
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.3.0.tgz#b6fa172a01405abcaedac681118e78429d62ea39"