UI: Use uuid dependency instead of crypto.randomUUID() (#19410)

* use uuidv4() instead of randomUUID()

* add changelog

* just add one new test

changelog/19410.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes reliance on secure context (https) by removing methods using the Crypto interface
+```

ui/app/components/auth-form.js

@@ -8,6 +8,7 @@ import { computed } from '@ember/object';
 import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends';
 import { task, timeout } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
+import { v4 as uuidv4 } from 'uuid';
 
 const BACKENDS = supportedAuthBackends();
 
@@ -308,7 +309,7 @@ export default Component.extend(DEFAULTS, {
       }
       // add nonce field for okta backend
       if (backend.type === 'okta') {
-        data.nonce = crypto.randomUUID();
+        data.nonce = uuidv4();
         // add a default path of okta if it doesn't exist to be used for Okta Number Challenge
         if (!data.path) {
           data.path = 'okta';

ui/package.json

@@ -223,6 +223,7 @@
     "highlight.js": "^10.4.1",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.13",
-    "node-notifier": "^8.0.1"
+    "node-notifier": "^8.0.1",
+    "uuid": "^9.0.0"
   }
 }

ui/tests/integration/components/auth-form-test.js

@@ -11,6 +11,7 @@ import sinon from 'sinon';
 import Pretender from 'pretender';
 import { create } from 'ember-cli-page-object';
 import authForm from '../../pages/components/auth-form';
+import { validate } from 'uuid';
 
 const component = create(authForm);
 
@@ -325,4 +326,35 @@ module('Integration | Component | auth form', function (hooks) {
 
     server.shutdown();
   });
+
+  test('it should set nonce value as uuid for okta method type', async function (assert) {
+    assert.expect(1);
+
+    const server = new Pretender(function () {
+      this.post('/v1/auth/okta/login/foo', (req) => {
+        const { nonce } = JSON.parse(req.requestBody);
+        assert.true(validate(nonce), 'Nonce value passed as uuid for okta login');
+        return [
+          200,
+          { 'content-type': 'application/json' },
+          JSON.stringify({
+            auth: {
+              client_token: '12345',
+            },
+          }),
+        ];
+      });
+      this.get('/v1/sys/internal/ui/mounts', this.passthrough);
+    });
+
+    this.set('cluster', EmberObject.create({}));
+    await render(hbs`<AuthForm @cluster={{this.cluster}} />`);
+
+    await component.selectMethod('okta');
+    await component.username('foo');
+    await component.password('bar');
+    await component.login();
+
+    server.shutdown();
+  });
 });

ui/yarn.lock

@@ -17379,6 +17379,11 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"