Support external step for Authentication providers in login flow

src/auth/ha-auth-external.ts

@@ -0,0 +1,65 @@
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow";
+import { fireEvent } from "../common/dom/fire_event";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { HaForm } from "../components/ha-form/ha-form";
+
+@customElement("ha-auth-external")
+export class HaAuthExternal extends HaForm {
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
+  @property({ attribute: false }) public stepTitle?: string;
+
+  @property({ attribute: false }) public step!: DataEntryFlowStepExternal;
+
+  protected render(): TemplateResult {
+    return html`
+      <h2>${this.stepTitle}</h2>
+      <div class="content">
+        ${this.localize("ui.panel.page-authorize.external.description")}
+        <div class="open-button">
+          <a href=${this.step.url} target="_blank" rel="opener">
+            <mwc-button raised>
+              ${this.localize("ui.panel.page-authorize.external.open_site")}
+            </mwc-button>
+          </a>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    window.open(this.step.url);
+    window.addEventListener("message", async (message: MessageEvent) => {
+      if (message.data.type === "externalCallback") {
+        fireEvent(this, "step-finished");
+      }
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        .open-button {
+          text-align: center;
+          padding: 24px 0;
+        }
+        .open-button a {
+          text-decoration: none;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-external": HaAuthExternal;
+  }
+  interface HASSDomEvents {
+    "step-finished": undefined;
+  }
+}

src/auth/ha-auth-flow.ts

@@ -23,6 +23,7 @@ import type {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
+import "./ha-auth-external";
 
 type State = "loading" | "error" | "step";
 
@@ -171,18 +172,7 @@ export class HaAuthFlow extends LitElement {
         }
 
         return html`
-          ${this._renderStep(this.step)}
-          <div class="action">
-            <mwc-button
-              raised
-              @click=${this._handleSubmit}
-              .disabled=${this._submitting}
-            >
-              ${this.step.type === "form"
-                ? this.localize("ui.panel.page-authorize.form.next")
-                : this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
-          </div>
+          ${this._renderStep(this.step)} ${this._renderAction(this.step)}
         `;
       case "error":
         return html`
@@ -266,11 +256,35 @@ export class HaAuthFlow extends LitElement {
               `
             : ""}
         `;
+      case "external":
+        return html`<ha-auth-external
+          .localize=${this.localize}
+          .step=${this.step!}
+          .title=${this.authProvider.name}
+          @step-finished=${this._externalStepFinished}
+        ></ha-auth-external>`;
       default:
         return nothing;
     }
   }
 
+  private _renderAction(step: DataEntryFlowStep) {
+    if (step.type === "external") {
+      return nothing;
+    }
+    return html` <div class="action">
+      <mwc-button
+        raised
+        @click=${this._handleSubmit}
+        .disabled=${this._submitting}
+      >
+        ${step.type === "form"
+          ? this.localize("ui.panel.page-authorize.form.next")
+          : this.localize("ui.panel.page-authorize.form.start_over")}
+      </mwc-button>
+    </div>`;
+  }
+
   private _storeTokenChanged(e: CustomEvent<HTMLInputElement>) {
     this._storeToken = (e.currentTarget as HTMLInputElement).checked;
   }
@@ -364,7 +378,7 @@ export class HaAuthFlow extends LitElement {
     if (this.step == null) {
       return;
     }
-    if (this.step.type !== "form") {
+    if (this.step.type !== "form" && this.step.type !== "external") {
       this._providerChanged(this.authProvider);
       return;
     }
@@ -403,6 +417,10 @@ export class HaAuthFlow extends LitElement {
       this._submitting = false;
     }
   }
+
+  private _externalStepFinished(ev: CustomEvent) {
+    this._handleSubmit(ev);
+  }
 }
 
 declare global {

src/translations/en.json

@@ -7144,6 +7144,10 @@
               }
             }
           }
+        },
+        "external": {
+          "description": "This step requires you to visit an external website to be completed.",
+          "open_site": "Open website"
         }
       },
       "page-demo": {