feat(auth): add abuse protection for login and OIDC flows with consent-based authorization handling

2026-04-20 09:46:13 +00:00
parent 21f5abb49b
commit 29a21fd3b3
36 changed files with 1129 additions and 84 deletions
@@ -12,7 +12,6 @@ import {
  domtools,
 } from '@design.estate/dees-element';

-// third party catalogs
 import '@uptime.link/webwidget';

 import '@design.estate/dees-catalog';
@@ -29,6 +28,12 @@ declare global {
 export class IdpLoginPrompt extends DeesElement {
  public static demo = () => html`<idp-loginprompt></idp-loginprompt>`;

+  @state()
+  accessor oidcConsentState: plugins.idpInterfaces.request.IReq_PrepareOidcAuthorization['response'] | null = null;
+
+  @state()
+  accessor oidcConsentError = '';
+
  @property()
  accessor productOfInterest: string;

@@ -48,6 +53,155 @@ export class IdpLoginPrompt extends DeesElement {
    domtools.elementBasic.setup();
  }

+  private getOidcAuthorizationContext(): Omit<
+    plugins.idpInterfaces.request.IReq_CompleteOidcAuthorization['request'],
+    'jwt'
+  > | null {
+    const currentUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
+
+    if (currentUrl.searchParams.oauth !== 'true') {
+      return null;
+    }
+
+    const clientId = currentUrl.searchParams.client_id;
+    const redirectUri = currentUrl.searchParams.redirect_uri;
+    const scope = currentUrl.searchParams.scope;
+    const state = currentUrl.searchParams.state;
+
+    if (!clientId || !redirectUri || !scope || !state) {
+      return null;
+    }
+
+    const prompt = ['none', 'login', 'consent'].includes(currentUrl.searchParams.prompt)
+      ? (currentUrl.searchParams.prompt as 'none' | 'login' | 'consent')
+      : undefined;
+
+    return {
+      clientId,
+      redirectUri,
+      scope,
+      state,
+      prompt,
+      codeChallenge: currentUrl.searchParams.code_challenge || undefined,
+      codeChallengeMethod:
+        currentUrl.searchParams.code_challenge_method === 'S256' ? 'S256' : undefined,
+      nonce: currentUrl.searchParams.nonce || undefined,
+    };
+  }
+
+  private redirectOidcError(errorArg: string, descriptionArg?: string) {
+    const oidcContext = this.getOidcAuthorizationContext();
+    if (!oidcContext) {
+      return false;
+    }
+
+    const redirectUrl = new URL(oidcContext.redirectUri);
+    redirectUrl.searchParams.set('error', errorArg);
+    redirectUrl.searchParams.set('state', oidcContext.state);
+    if (descriptionArg) {
+      redirectUrl.searchParams.set('error_description', descriptionArg);
+    }
+    window.location.href = redirectUrl.toString();
+    return true;
+  }
+
+  private getOidcScopeDescription(scopeArg: plugins.idpInterfaces.data.TOidcScope) {
+    const scopeMap: Record<plugins.idpInterfaces.data.TOidcScope, string> = {
+      openid: 'Confirm your identity with this app.',
+      profile: 'Share your display name and username.',
+      email: 'Share your email address.',
+      organizations: 'Share your organizations and their roles.',
+      roles: 'Share your platform roles.',
+    };
+
+    return scopeMap[scopeArg];
+  }
+
+  private getOidcAppHost(appUrlArg: string) {
+    try {
+      return new URL(appUrlArg).hostname;
+    } catch {
+      return appUrlArg;
+    }
+  }
+
+  private async prepareOidcAuthorization(jwtArg: string) {
+    const oidcContext = this.getOidcAuthorizationContext();
+    if (!oidcContext) {
+      return null;
+    }
+
+    const idpState = await IdpState.getSingletonInstance();
+    return idpState.idpClient.requests.prepareOidcAuthorization
+      .fire({
+        jwt: jwtArg,
+        ...oidcContext,
+      })
+      .catch(() => null);
+  }
+
+  private async handleOidcAfterLogin(jwtArg: string) {
+    const oidcContext = this.getOidcAuthorizationContext();
+    if (!oidcContext) {
+      return false;
+    }
+
+    const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm | null;
+    loginForm?.setStatus('pending', 'preparing application authorization...');
+    this.oidcConsentError = '';
+
+    const preparation = await this.prepareOidcAuthorization(jwtArg);
+    if (!preparation) {
+      loginForm?.setStatus('error', 'could not prepare the application authorization');
+      return true;
+    }
+
+    if (preparation.status === 'consent_required') {
+      if (oidcContext.prompt === 'none') {
+        this.redirectOidcError('consent_required');
+        return true;
+      }
+
+      this.oidcConsentState = preparation;
+      return true;
+    }
+
+    await this.completeOidcAuthorization(jwtArg);
+    return true;
+  }
+
+  private async completeOidcAuthorization(jwtArg: string, consentApproved = false) {
+    const oidcContext = this.getOidcAuthorizationContext();
+    if (!oidcContext) {
+      return false;
+    }
+
+    const idpState = await IdpState.getSingletonInstance();
+    const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm | null;
+    loginForm?.setStatus('pending', 'authorizing application...');
+    this.oidcConsentError = '';
+
+    const response = await idpState.idpClient.requests.completeOidcAuthorization
+      .fire({
+        jwt: jwtArg,
+        ...oidcContext,
+        consentApproved,
+      })
+      .catch(() => null);
+
+    if (!response?.redirectUrl) {
+      if (this.oidcConsentState) {
+        this.oidcConsentError = 'Could not authorize the application.';
+      } else {
+        loginForm?.setStatus('error', 'could not authorize the application');
+      }
+      return false;
+    }
+
+    window.location.href = response.redirectUrl;
+    return true;
+  }
+
  public static styles = [
    cssManager.defaultStyles,
    css`
@@ -103,10 +257,147 @@ export class IdpLoginPrompt extends DeesElement {
      .form-footer a:hover {
        opacity: 0.8;
      }
+
+      .consent-card {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 24px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.04);
+      }
+
+      .consent-appname {
+        font-size: 20px;
+        font-weight: 600;
+      }
+
+      .consent-appurl {
+        color: var(--muted-foreground);
+        font-size: 14px;
+        word-break: break-word;
+      }
+
+      .consent-scopes {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .consent-scope {
+        padding: 14px 16px;
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.03);
+      }
+
+      .consent-scope-header {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-size: 12px;
+      }
+
+      .consent-scope-tag {
+        color: #9cd67c;
+      }
+
+      .consent-scope-description {
+        margin-top: 6px;
+        color: var(--muted-foreground);
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      .consent-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+      }
+
+      .consent-button {
+        border: none;
+        border-radius: 999px;
+        padding: 12px 18px;
+        font: inherit;
+        cursor: pointer;
+      }
+
+      .consent-button-secondary {
+        background: rgba(255, 255, 255, 0.08);
+        color: var(--foreground);
+      }
+
+      .consent-button-primary {
+        background: linear-gradient(135deg, #9b7bff, #5fd1ff);
+        color: #0a0a0a;
+        font-weight: 600;
+      }
+
+      .consent-error {
+        color: #ff9a9a;
+        font-size: 14px;
+      }
    `,
  ];

  public render(): TemplateResult {
+    if (this.oidcConsentState) {
+      return html`
+        <idp-centercontainer>
+          <div class="form-header">
+            <h2>Continue to ${this.oidcConsentState.appName}</h2>
+            <p>Review and approve the access this app is requesting.</p>
+          </div>
+          <div class="consent-card">
+            <div class="consent-appname">${this.oidcConsentState.appName}</div>
+            <div class="consent-appurl">${this.getOidcAppHost(this.oidcConsentState.appUrl)}</div>
+            <div class="consent-scopes">
+              ${this.oidcConsentState.requestedScopes.map((scopeArg) => html`
+                <div class="consent-scope">
+                  <div class="consent-scope-header">
+                    <span>${scopeArg}</span>
+                    ${this.oidcConsentState.grantedScopes.includes(scopeArg)
+                      ? html`<span class="consent-scope-tag">Previously allowed</span>`
+                      : null}
+                  </div>
+                  <div class="consent-scope-description">${this.getOidcScopeDescription(scopeArg)}</div>
+                </div>
+              `)}
+            </div>
+            ${this.oidcConsentError ? html`<div class="consent-error">${this.oidcConsentError}</div>` : null}
+            <div class="consent-actions">
+              <button
+                class="consent-button consent-button-secondary"
+                @click=${() => {
+                  this.redirectOidcError('access_denied');
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                class="consent-button consent-button-primary"
+                @click=${async () => {
+                  const idpState = await IdpState.getSingletonInstance();
+                  const jwt = await idpState.idpClient.getJwt();
+                  if (!jwt) {
+                    this.redirectOidcError('login_required');
+                    return;
+                  }
+                  await this.completeOidcAuthorization(jwt, true);
+                }}
+              >
+                Allow and continue
+              </button>
+            </div>
+          </div>
+        </idp-centercontainer>
+      `;
+    }
+
    return html`
      <idp-centercontainer>
        <div class="form-header">
@@ -115,12 +406,12 @@ export class IdpLoginPrompt extends DeesElement {
        </div>
        <dees-form
          id="loginForm"
-          @formData="${(eventArg) => {
+          @formData=${(eventArg) => {
            this.login({
              emailAddress: eventArg.detail.data.emailAddress,
              passwordArg: eventArg.detail.data.password,
            });
-          }}"
+          }}
        >
          <dees-input-text
            id="loginEmailInput"
@@ -137,7 +428,8 @@ export class IdpLoginPrompt extends DeesElement {
          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
        </dees-form>
        <div class="form-footer">
-          Don't have an account? <a @click=${async () => {
+          Don't have an account?
+          <a @click=${async () => {
            const idpState = await IdpState.getSingletonInstance();
            idpState.domtools.router.pushUrl('/register');
          }}>Create one</a>
@@ -147,32 +439,48 @@ export class IdpLoginPrompt extends DeesElement {
  }

  public async firstUpdated() {
-    const domtoolsInstance = await this.domtoolsPromise;
-    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
-    const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
-    const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
+    await this.domtoolsPromise;
+    const idpState = await IdpState.getSingletonInstance();
+    const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm;
+    const loginPasswordInput = loginForm.querySelector('#loginPasswordInput') as DeesInputText;
+    const loginSubmitButton = loginForm.querySelector('#loginSubmitButton') as DeesFormSubmit;
+    const oidcContext = this.getOidcAuthorizationContext();
    const setButtonText = async () => {
      if (loginPasswordInput.value) {
-        console.log('updating text of loginprompt.');
-        loginSubmitButton.text = 'Login';
+        loginSubmitButton.text = oidcContext ? 'Sign in and continue' : 'Login';
      } else {
        loginSubmitButton.text = 'Send magic link (or enter password)';
      }
    };
    loginForm.changeSubject.subscribe(() => {
-      console.log(`checking button text ${loginPasswordInput.value}`);
-      setButtonText();
+      void setButtonText();
    });
-    setButtonText();
+    await setButtonText();
+
+    if (oidcContext) {
+      const loggedIn = await idpState.idpClient.determineLoginStatus(false);
+      if (!loggedIn && oidcContext.prompt === 'none') {
+        this.redirectOidcError('login_required');
+        return;
+      }
+
+      if (loggedIn && oidcContext.prompt !== 'login') {
+        const jwt = await idpState.idpClient.getJwt();
+        if (jwt) {
+          await this.handleOidcAfterLogin(jwt);
+        }
+      }
+    }
  }

  private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
-    // lets disable the submit button
-    const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
+    const loginSubmitButton = this.shadowRoot.querySelector(
+      '#loginSubmitButton'
+    ) as plugins.deesCatalog.DeesFormSubmit;
    loginSubmitButton.disabled = true;
-    // lets define the needed requests
+
    const idpState = await IdpState.getSingletonInstance();
-    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
+    const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm;
    const loginRequestWithUsernameAndPassword =
      idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
        'loginWithEmailOrUsernameAndPassword'
@@ -182,19 +490,19 @@ export class IdpLoginPrompt extends DeesElement {
        'loginWithEmail'
      );

-    // lets do the actual logging in
    if (valueArg.emailAddress && valueArg.passwordArg) {
      loginForm.setStatus('pending', 'logging in...');
      const response = await loginRequestWithUsernameAndPassword
        .fire({
-          username: valueArg.emailAddress, // TODO: rename to emailAddress
+          username: valueArg.emailAddress,
          password: valueArg.passwordArg,
        })
        .catch(() => {
          loginForm.setStatus('error', 'could not log you in. Try Again!');
-          return;
+          return null;
        });
      if (!response) {
+        loginSubmitButton.disabled = false;
        return;
      }
      if (response.refreshToken) {
@@ -202,11 +510,13 @@ export class IdpLoginPrompt extends DeesElement {
        const jwt = await idpState.idpClient.refreshJwt(response.refreshToken);
        if (jwt) {
          loginForm.setStatus('success', 'obtained jwt.');
-          idpState.domtools.router.pushUrl('/account');
+          const oidcHandled = await this.handleOidcAfterLogin(jwt);
+          if (!oidcHandled) {
+            idpState.domtools.router.pushUrl('/account');
+          }
        } else {
          loginForm.setStatus('error', 'something went wrong');
        }
-      } else {
      }
    } else if (valueArg.emailAddress && !valueArg.passwordArg) {
      loginForm.setStatus('pending', 'sending magic link...');
@@ -216,13 +526,13 @@ export class IdpLoginPrompt extends DeesElement {
      if (response.status === 'ok') {
        loginForm.setStatus('success', 'Please check your email!');
      }
-      console.log(response);
    }
+
+    loginSubmitButton.disabled = false;
  };

  public async dispatchJwt(jwtArg?: string) {
    if (jwtArg !== undefined) {
-      console.log(`dispatching jwt from loginprompt.`);
      this.jwt = jwtArg;
      await domtools.plugins.smartdelay.delayFor(200);
      this.dispatchEvent(
@@ -237,9 +547,7 @@ export class IdpLoginPrompt extends DeesElement {
  }

  public async focus() {
-    (
-      this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
-    ).focus();
+    (this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
  }

  public async show() {