diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts
index 0bfdfd3b2..f340914dc 100644
--- a/web/src/elements/forms/ConfirmationForm.ts
+++ b/web/src/elements/forms/ConfirmationForm.ts
@@ -2,6 +2,7 @@ import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
+import "../buttons/SpinnerButton";
 import { MessageLevel } from "../messages/Message";
 import { showMessage } from "../messages/MessageContainer";
 
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 45c1e8d09..91154ca76 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -4,6 +4,7 @@ import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { MessageLevel } from "../messages/Message";
 import { showMessage } from "../messages/MessageContainer";
+import "../buttons/SpinnerButton";
 
 @customElement("ak-forms-delete")
 export class DeleteForm extends ModalButton {
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index 2590c3485..aaf42fe73 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -3,6 +3,7 @@ import { customElement, html, property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { Form } from "./Form";
+import "../buttons/SpinnerButton";
 
 @customElement("ak-forms-modal")
 export class ModalForm extends ModalButton {
diff --git a/web/src/flows/stages/authenticator_webauthn/utils.ts b/web/src/flows/stages/authenticator_webauthn/utils.ts
index c49e33345..7c4fad31b 100644
--- a/web/src/flows/stages/authenticator_webauthn/utils.ts
+++ b/web/src/flows/stages/authenticator_webauthn/utils.ts
@@ -1,4 +1,5 @@
 import * as base64js from "base64-js";
+import { hexEncode } from "../../../utils";
 
 export function b64enc(buf: Uint8Array): string {
     return base64js.fromByteArray(buf)
@@ -13,14 +14,6 @@ export function b64RawEnc(buf: Uint8Array): string {
         .replace(/\//g, "_");
 }
 
-export function hexEncode(buf: Uint8Array): string {
-    return Array.from(buf)
-        .map(function (x) {
-            return ("0" + x.toString(16)).substr(-2);
-        })
-        .join("");
-}
-
 /**
  * Transforms items in the credentialCreateOptions generated on the server
  * into byte arrays expected by the navigator.credentials.create() call
diff --git a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
index cfe37b775..b1bd85935 100644
--- a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
@@ -8,6 +8,7 @@ import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
 import "../../../elements/forms/FormGroup";
+import { first, randomString } from "../../../utils";
 
 @customElement("ak-provider-oauth2-form")
 export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
@@ -92,12 +93,12 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${gettext("Client ID")}
                         ?required=${true}
                         name="clientId">
-                        <input type="text" value="${ifDefined(this.provider?.clientId)}" class="pf-c-form-control" required>
+                        <input type="text" value="${first(this.provider?.clientId, randomString(40))}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${gettext("Client Secret")}
                         name="clientSecret">
-                        <input type="text" value="${ifDefined(this.provider?.clientSecret /* TODO: Generate secret */)}" class="pf-c-form-control">
+                        <input type="text" value="${first(this.provider?.clientSecret, randomString(128))}" class="pf-c-form-control">
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${gettext("Redirect URIs")}
diff --git a/web/src/pages/users/UserActiveForm.ts b/web/src/pages/users/UserActiveForm.ts
index ed1868521..3a4c41c22 100644
--- a/web/src/pages/users/UserActiveForm.ts
+++ b/web/src/pages/users/UserActiveForm.ts
@@ -3,6 +3,7 @@ import { customElement, html, TemplateResult } from "lit-element";
 import { DeleteForm } from "../../elements/forms/DeleteForm";
 import { MessageLevel } from "../../elements/messages/Message";
 import { showMessage } from "../../elements/messages/MessageContainer";
+import "../../elements/buttons/SpinnerButton";
 
 @customElement("ak-user-active-form")
 export class UserActiveForm extends DeleteForm {
diff --git a/web/src/utils.ts b/web/src/utils.ts
index 4d79f52b2..74778a003 100644
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@@ -79,3 +79,17 @@ export function first<T>(...args: Array<T | undefined | null>): T {
     }
     throw new Error(`No compatible arg given: ${args}`);
 }
+
+export function hexEncode(buf: Uint8Array): string {
+    return Array.from(buf)
+        .map(function (x) {
+            return ("0" + x.toString(16)).substr(-2);
+        })
+        .join("");
+}
+
+export function randomString(len: number): string {
+    const arr = new Uint8Array(len / 2);
+    window.crypto.getRandomValues(arr);
+    return hexEncode(arr);
+}