DEV Community: Andrew Elans

Power Pages: how to get contact's Dataverse team membership in web template with Liquid

Andrew Elans — Wed, 08 Apr 2026 13:05:49 +0000

When building internal portals on Power Pages, you often need to drive UI logic based on who the logged-in user is in Dataverse - not just their portal web roles, but their actual Dataverse team memberships. This post shows the correct approach and why the obvious path doesn't work.

The naive approach - and why it fails

The logged-in user in a portal is a contact record. Your first instinct might be to traverse owninguser on the contact to get the backing systemuser, then look up their team memberships from there:

{% assign systemuserId = entities.contact[user.contactid]['owninguser'].id %}
{% assign teams = entities.systemuser[systemuserId]['teammembership_association'] %}

This doesn't work. In the portal context, owninguser on the contact is always the same portal service account - not the actual logged-in person. You'll get the same result for every user.

The correct approach - start from the team

Instead of starting from the user and looking up their teams, start from the known team and check whether the current user is a member. The team entity exposes teammembership_association, and you can filter it by internalemailaddress against user.emailaddress1:

{% assign procurementTeamId = 'a3a5a17e-4a64-ef11-bfe3-000d3a48fb1c' %}
{% assign procurementTeamMember = entities.team[procurementTeamId]['teammembership_association'] | where: 'internalemailaddress', user.emailaddress1 | select: 'internalemailaddress' %}

If the result is non-empty, the current user is a member of that team.

Driving UI with team membership

Web templates in Power Pages are shared across all portal users, but you often need to surface UI elements - buttons, sections, forms, tabs - that are only relevant to members of a specific Dataverse team. By resolving team membership server-side in Liquid, you can conditionally render those elements before the page reaches the browser, without any client-side Web API calls or duplicating logic in the portal web role model. The team membership in Dataverse becomes the single source of truth.

A clean pattern is to assign a role variable first, then use it to branch your UI:

{% assign userRole = 'standard' %}
{% assign procurementTeamId = 'a3a5a17e-4a64-ef11-bfe3-000d3a48fb1c' %}
{% assign procurementTeamMember = entities.team[procurementTeamId]['teammembership_association'] | where: 'internalemailaddress', user.emailaddress1 | select: 'internalemailaddress' %}

{% if procurementTeamMember and procurementTeamMember != empty %}
    {% assign userRole = 'procurement' %}
{% endif %}

{% if userRole == 'procurement' %}
    <h1>Hi Procurement User</h1>
{% else %}
    <h1>Hi Standard User</h1>
{% endif %}

This keeps the membership check separate from the rendering logic, which scales well when you have multiple teams to check - set all your role variables up front, then branch your UI below.

A note on table permissions

For the Liquid query to work, Read table permissions must be granted to both the Team and System User tables in the Power Pages management app, scoped to Authenticated Users. Without these, the entities traversal will return blank regardless of what data exists in Dataverse.

The entities object in Liquid supports N:N relationship traversal in both directions - from systemuser and from team. The key insight for portal use cases is that you need to start from the team side, since owninguser on contact always resolves to the portal service account, not the logged-in user.

That's it. Start from the known team GUID, filter teammembership_association by the user's email, and use the result to drive conditional UI - all server-side, no client-side API calls needed.

A note on how this was found

I was looking for a reliable way to connect a portal contact to their backing systemuser in Liquid - something that doesn't seem to be documented anywhere in a straightforward way. Part of what makes this tricky is that there is no direct link or relationship between the contact table record and the systemuser record in Dataverse. They are separate entities, and bridging them in the portal context requires an indirect approach. The team-first pattern shown here is one solution. I'll cover another approach in a follow-up post.

Black & White VS Code Theme

Andrew Elans — Sun, 05 Apr 2026 14:33:12 +0000

If you're tired of syntax-highlighted rainbow soup and want your editor to get out of the way, try Simple Black White Theme.

It's exactly what it sounds like - a monochrome VS Code theme that strips away colour noise and lets you focus on structure. No distractions, no palette debates, just code.

For me personally, syntax highlighting colours add noise rather than clarity. I find I read code better when everything is the same colour and I rely on structure - indentation, naming, grouping - instead of a rainbow telling me what's a keyword and what's a string.

The problem with stock

Out of the box, the theme is almost perfect. A few UI elements lack contrast or visual feedback - hover states, search highlights, git indicators. Things you don't notice until you're actually working in it.

The tweaks

Drop this into your settings.json to fill in the gaps:

// VS Code settings.json
"workbench.colorTheme": "Simple BW Light",

"workbench.colorCustomizations": {
  "[Simple BW Light]": {
    // Make ghost text (Copilot suggestions etc.) actually readable
    "editorGhostText.foreground": "#000000",

    // Blue highlight on matched characters in lists (find file, command palette)
    "list.highlightForeground": "#2a8de7",

    // Subtle grey hover state so you know where your cursor is
    "list.hoverBackground": "#cfd4d9",

    // Faint background on selected-but-unfocused items (e.g. sidebar while editing)
    "list.inactiveSelectionBackground": "#adb5bd4d",

    // Blue tint on focused list items
    "list.focusBackground": "#329af040",

    // Keep text dark across all list selection states
    "list.inactiveSelectionForeground": "#212529",
    "list.activeSelectionForeground": "#212529",
    "list.focusForeground": "#212529",

    // Red for errors, orange for warnings - visible but not screaming
    "list.errorForeground": "#d43b3b",
    "list.warningForeground": "#ba5908",

    // Solid dark line on the active indent guide
    "editorIndentGuide.activeBackground1": "#212529",

    // Blue tint on search matches in the editor
    "editor.findMatchHighlightBackground": "#329af050",

    // Subtle highlight on variable definitions (const, let declarations)
    "editor.wordHighlightStrongBackground": "#00000025",

    // Dim git-ignored files in the explorer without hiding them
    "gitDecoration.ignoredResourceForeground": "#00000050",

    // Blue highlight on matched text in IntelliSense suggestions
    "editorSuggestWidget.highlightForeground": "#2a8de7"
  }
},

"editor.tokenColorCustomizations": {
  "textMateRules": [
    // Override the default comment style - slightly transparent dark grey
    // instead of invisible-light or italic
    {
      "scope": "comment, punctuation.definition.comment, comment.block.preprocessor, comment.documentation, comment.block.documentation",
      "settings": {
        "fontStyle": "",
        "foreground": "#5e6062c9"
      }
    }
  ]
}

Why bother

The tweaks above keep the minimalist aesthetic but add just enough visual feedback that the editor doesn't fight you on everyday tasks like searching, navigating files, or spotting git changes.

Give it a week. You might not go back.

Azure Static Web Apps: Simple Logout Without login_hint

Andrew Elans — Sun, 05 Apr 2026 12:22:20 +0000

Azure Static Web Apps: Simple Logout Without login_hint

In my previous posts I covered how to pass login_hint to EasyAuth for a smoother sign-in experience. But there's a simpler approach to the logout/login flow that avoids login_hint entirely and is more user-friendly.

The problem with default EasyAuth logout

When you redirect a user to /.auth/logout, EasyAuth signs them out on the Azure AD server. This kills not just their SWA session but every active SSO session tied to that account - Azure Portal, Outlook, Teams, any other app using the same identity.

For an internal app where users are signed into a dozen Microsoft services, that's a bad experience.

A better approach: sign out of SWA only

Instead of a full server-side logout, we can clear the EasyAuth session on the SWA while keeping the Azure AD session alive. The user gets signed out of our app but stays signed into everything else.

The trick is to call the logout endpoints with fetch instead of a redirect:

fetch to /.auth/logout with mode: 'no-cors' (critical - without this the browser blocks the request)
Then fetch to /.auth/logout/complete to clear the EasyAuth cookies

After both calls complete, redirect to / which triggers the sign-in flow where the user sees an account picker.

Angular

async logOut(): Promise<void> {
  if (window.location.host.endsWith('azurestaticapps.net')) {
    const noCors: RequestInit = { mode: 'no-cors' };
    const redirectUri = '?post_logout_redirect_uri=/.auth/me';
    await fetch('/.auth/logout' + redirectUri, noCors).then(() =>
      fetch('/.auth/logout/complete' + redirectUri, noCors),
    );
  }
  window.location.href = '/'; // triggers sign in
}

Vanilla JS

document.getElementById('signout-btn').addEventListener('click', async function (e) {
  // Replace page content with logout message
  document.body.replaceChildren(
    document.createRange().createContextualFragment(`
      <div style="height:calc(100vh - 16px);font-family:'Segoe UI Light','Helvetica Neue',Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center;">
        <div style="text-align:center;">
          <h2>Logout in progress</h2>
          <p>Please do not close the page</p>
        </div>
      </div>`),
  );

  if (location.hostname.includes('azurestaticapps.net')) {
    const noCors = { mode: 'no-cors' };
    await fetch('/.auth/logout?post_logout_redirect_uri=/_layout/tokenhtml/', noCors)
      .then(() =>
        fetch('/.auth/logout/complete?post_logout_redirect_uri=/_layout/tokenhtml/', noCors),
      );
  }

  // If using MSAL browser, sign out through MSAL as well:
  const msal = this.msalPcaObj;
  const account = msal.getActiveAccount();
  await msal.logoutRedirect({
    account,
    postLogoutRedirectUri: location.href,
  });

  // If not using MSAL, redirect to trigger sign in:
  // window.location.href = '/';
});

Optional: full logout with a toggle

If some users do need a full server-side logout (closing all SSO sessions), you can add a checkbox that switches between the fetch-based approach and a standard redirect to /.auth/logout. This gives users control over whether they want a quick re-login or a complete sign-out.

YouTube: Make the Video Timer Always Visible

Andrew Elans — Sat, 04 Apr 2026 06:03:54 +0000

When listening to lectures on YouTube, I often type notes in a separate notebook. I usually want to reference the current timestamp alongside each note.

The problem is that YouTube only shows the current time when you hover over the video or toggle play/pause - then it quickly disappears. Switching windows, tapping play/pause, glancing at the time, and switching back gets old fast.

The timer lives in this element:

<span class="ytp-time-current">37:58</span>

When the controls are hidden, the timer stops ticking. You can also grab the time in seconds from the video element directly:

document.querySelector('video').currentTime

The Fix: Disable the Auto-Hide

YouTube's player controls are hidden by a function that publishes an autohideupdate event. Commenting out that call keeps the controls - and the timer - permanently visible.

Steps

Open DevTools and find the Search panel in the bottom drawer (or press Ctrl+Shift+F).
Search for autohideupdate. You'll get four hits, all in a file called base.js. At the time of writing, the URL looks like this:
```
www.youtube.com/s/player/89e685a2/player_ias.vflset/en_GB/base.js
```
The hash (89e685a2) will change with each player release.
Select the result containing ...H!==U&&Q.publish("autohideupdate",U). This takes you to the relevant line in base.js.
Click the Pretty Print button ({ }) to make the minified code readable.
Right-click in the source pane, select Override Content, and choose a local folder for overrides.

Comment out the auto-hide publish call:

Dd = function(Q, U, q) {
    Q.GC();
    var H = J2(Q);
    q ? (Q.C |= U,
    U & 1 && Q.u2.start(),
    U & 2 && Q.ZE.start(),
    U & 2048 && Q.AG.start()) : (Q.C &= ~U,
    U & 1 && Q.u2.stop(),
    U & 2 && Q.ZE.stop(),
    U & 2048 && Q.AG.stop(),
    U & 512 && Q.hG.stop());
    Q.C & 512 && !(Q.C & 128) && g.Z6(Q.hG, Q.XZ);
    U = J2(Q);
    // H !== U && Q.publish("autohideupdate", U)
    // disabled: keeps controls always visible
}

Save the file, then right-click the page and choose Empty Cache and Hard Reload (DevTools must be open).

The timer is now permanently visible.

Note: DevTools must remain open for local overrides to take effect.

Make media buttons F7,F8,F9 to work with Udemy in browser on MacOS

Andrew Elans — Sat, 04 Apr 2026 05:42:10 +0000

If you follow along with Udemy courses while coding in VS Code (or any other editor), you've probably hit this annoyance: the F7/F8/F9 media keys don't work properly with the Udemy video player. Play/pause fights with itself, and skip forward/back do nothing at all.

Here's why, and two ways to fix it.

The Problem

Udemy's player has a function called syncPlayStateToPlayer that constantly tries to reconcile its internal play/pause state with the actual video element. When you press F8 (play/pause) from another application, the browser's Media Session API toggles the video - but then Udemy's sync function fires and reverts it. The result: nothing happens, or the video flickers.

F7 and F9 (previous/next track) simply aren't wired up at all.

Fix 1: Chrome DevTools Local Override

This is the "proper" local hack. It patches the source file directly so the fix survives page navigation within the course.

Open DevTools (or Safari's Web Inspector)
In the Sources panel, search for a file starting with course-taking-udlite-app...js
Right-click the file and select Override content (Chrome) or add it to Local Overrides
Find the function syncPlayStateToPlayer and add return as the first statement:

this.syncPlayStateToPlayer = () => {
  return // <-- added: short-circuits the sync
  clearTimeout(this.playStateSyncTimeout);
  try {
    if (!this.playingStateNeedsSyncing) {
      return
    }
    if (this.isVideoPlayerInitialized && this.store.isSourceReady) {
      this.isPlaying ? this.play() : this.pause()
    }
    this.playStateSyncTimeout = setTimeout(this.syncPlayStateToPlayer, O.Yj)
  } catch (e) {}
}

The early return kills the sync loop entirely. The rest of the function becomes dead code.

Fix 2: Console Snippet (full version with all handlers)

This is lighter and doesn't require digging through minified source. It does three things:

Walks the React fiber tree from the <video> element to find the component instance
Replaces syncPlayStateToPlayer with a no-op
Registers Media Session handlers for F7 (rewind) and F9 (skip forward)

(() => {
  const v = document.querySelector('video');
  const k = Object.keys(v).find(k => k.startsWith('__reactFiber$'));
  let f = v[k];
  while (f) {
    const i = f.stateNode;
    if (i && i.syncPlayStateToPlayer) {
      i.syncPlayStateToPlayer = () =>
        i.isPlaying = !document.querySelector('video').paused;
      console.log('Patched');
      break;
    }
    f = f.return;
  }

  // F9 media button
  navigator.mediaSession.setActionHandler('previoustrack', () => {
    document.querySelector('[data-purpose="rewind-skip-button"]')?.click();
  });

  // F7 media button
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    document.querySelector('[data-purpose="forward-skip-button"]')?.click();
  });

  function toggle(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    const v = document.querySelector('video');
    v.paused ? v.play() : v.pause();
  }

  // sync space key if video is played/paused with F8
  document.addEventListener('keydown', (e) => {
    if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
      toggle(e);
    }
  }, true);

  // sync click on video if video is played/paused with F8
  document.addEventListener('click', (e) => {
    const el = e.target;
    const isOverlay = el.tagName === 'VIDEO' || 
      [...el.classList].some(c => c.startsWith('shaka-control-bar--popover-area-'));
    if (isOverlay) {
      toggle(e);
    }
  }, true);
})();

How to save it

In Chrome DevTools, go to Sources > Snippets, create a new snippet, paste the code, and save. Run it once after each page load (right-click the snippet > Run, or Ctrl+Enter).

Result

If you're coding along with a Udemy course in VS Code, you can control playback without switching to the browser tab:

F8 - play/pause (works after patching the sync)
F7 - skip back (mapped to Udemy's rewind button)
F9 - skip forward (mapped to Udemy's forward button)

No alt-tabbing and hunting for the browser. Just press a key and keep coding.

Caveats

The snippet needs to be re-run on each full page refresh (navigating between lectures within a course will in some cases require it)
This relies on Udemy's current React internals and data-purpose attributes - it could break if they refactor

Easy fix with a bookmark when you need it

I use minify to and produce this minified version clicking Terser Defaults:

javascript:void((()=>{const e=document.querySelector("video");const t=Object.keys(e).find((e=>e.startsWith("__reactFiber$")));let a=e[t];while(a){const e=a.stateNode;if(e&&e.syncPlayStateToPlayer){e.syncPlayStateToPlayer=()=>e.isPlaying=!document.querySelector("video").paused;console.log("Patched");break}a=a.return}navigator.mediaSession.setActionHandler("previoustrack",(()=>{document.querySelector('[data-purpose="rewind-skip-button"]')?.click()}));navigator.mediaSession.setActionHandler("nexttrack",(()=>{document.querySelector('[data-purpose="forward-skip-button"]')?.click()}));function o(e){e.preventDefault();e.stopImmediatePropagation();const t=document.querySelector("video");t.paused?t.play():t.pause()}document.addEventListener("keydown",(e=>{if(e.code==="Space"&&e.target.tagName!=="INPUT"&&e.target.tagName!=="TEXTAREA"){o(e)}}),true);document.addEventListener("click",(e=>{const t=e.target;const a=t.tagName==="VIDEO"||[...t.classList].some((e=>e.startsWith("shaka-control-bar--popover-area-")));if(a){o(e)}}),true)})())

Make new bookmark and paste this code in the URL field. Each time a new lecture starts, click a fav and that's it.

Azure Static Web Apps: Add login_hint with Node.js API Backend

Andrew Elans — Wed, 07 Jan 2026 07:44:44 +0000

The first trial of implementing login_hint with Azure Functions was done here: Azure Static Web Apps: Add login_hint with Functions.

This post shows how to achieve the same using an Azure Web App on Node.js, connected as the API backend to SWA.

Full source code: github.com/AndrewElans/azure-swa-loginhint-enabled

The Problem

Azure Static Web Apps drops the login_hint query parameter from the EasyAuth login flow. It never reaches the login.microsoftonline.com authorization endpoint.

Default EasyAuth Flow

User navigates to:

https://swa.azurestaticapps.net/.auth/login/aad?login_hint=bing.whatman@contoso.com

SWA redirects to its internal auth route, appending a nonce:

https://swa.azurestaticapps.net/.auth/login/aad
  ?post_login_redirect_uri=/.auth/complete
  &staticWebAppsAuthNonce=aTakZLY...

SWA redirects to Microsoft's authorize endpoint - without login_hint:

https://login.microsoftonline.com/.../oauth2/v2.0/authorize
  ?response_type=code+id_token
  &client_id=...
  &scope=openid+profile+email
  &prompt=select_account     <-- forces account picker
  &response_mode=form_post
  ...

The login_hint parameter we passed in Step 1 is gone. The user gets the account picker instead of a streamlined login.

The Fix

Intercept and replay the EasyAuth flow server-side using HTTP/2, injecting login_hint into the Microsoft authorize URL before redirecting the browser.

Stack

Azure Static Web App
Azure Web App (Node.js v24), linked as SWA's API backend

Why HTTP/2?

The EasyAuth redirect chain uses HTTP/2 pseudo-headers (:authority, :path). The middleware uses Node.js built-in http.createServer for the server and http2.connect for outbound requests to replay the flow correctly.

http.createServer is served as https by default on Azure Web App.

Fixed Auth Flow

Here is the full flow, step by step.

Phase 1: Client-side redirect

Client navigates to https://swa.azurestaticapps.net
No active session (EasyAuth defaults to 8 hours) - SWA redirects to /login/ per staticwebapp.config.json
/login/ redirects to /aad-redirect/, which reads login_hint from location.search or localStorage
Client redirects to /api/login-aad?user=bing.whatman

Phase 2: Server-side HTTP/2 flow

Backend picks up /api/login-aad and reads ?user from urlObj.searchParams
If user is missing, fallback: redirect to the default EasyAuth route /.auth/login/aad
Send HTTP/2 request to https://swa.azurestaticapps.net/.auth/login/aad - receive the redirect URI (location) and StaticWebAppsAuthContextCookie
Send HTTP/2 request to the received location (/.auth/login/aad?post_login_redirect_uri=...&staticWebAppsAuthNonce=...) with StaticWebAppsAuthContextCookie - receive the login.microsoftonline.com URL as location, plus the nonce cookie

Phase 3: URL modification

In the received Microsoft authorize URL:
- Replace prompt=select_account with login_hint=bing.whatman@contoso.com
- Replace state=redir%3D%252F.auth%252Fcomplete with state=redir%3D%252Fapi%252Flogin-aad-complete
Modify StaticWebAppsAuthContextCookie: strip domain=swa.azurestaticapps.net; (the backend has a different hostname - the browser will reject the cookie if this domain is present)

Phase 4: Browser redirect to Microsoft

Redirect back to the browser with:
- Modified StaticWebAppsAuthContextCookie
- Nonce cookie
- Modified login.microsoftonline.com location
Browser sets cookies and redirects to Microsoft login with login_hint - no account picker

Phase 5: Auth completion

Microsoft redirects back to the backend route /api/login-aad-complete
Backend collects cookies (StaticWebAppsAuthContextCookie, AppServiceAuthSession1, AppServiceAuthSession) and sends them via HTTP/2 to https://swa.azurestaticapps.net/.auth/complete - receives StaticWebAppsAuthCookie
Backend redirects to SWA's /login-aad-complete/, setting StaticWebAppsAuthCookie and deleting the nonce and context cookies
/login-aad-complete/ redirects to / per staticwebapp.config.json

Key Detail: Cookie Domain Stripping

This is the non-obvious gotcha. When the backend replays the EasyAuth flow, the StaticWebAppsAuthContextCookie comes back with domain=swa.azurestaticapps.net. Since the backend runs on a different hostname, the browser will silently refuse to set this cookie.

The fix: strip the domain attribute from the Set-Cookie header before sending it to the browser.

// Before
StaticWebAppsAuthContextCookie=...; domain=swa.azurestaticapps.net; path=/; ...

// After
StaticWebAppsAuthContextCookie=...; path=/; ...

Fallback

If any step in the HTTP/2 flow fails, the middleware redirects to the standard EasyAuth route /.auth/login/aad. The user still logs in - they just get the account picker.

Source Code

Full implementation with detailed comments: github.com/AndrewElans/azure-swa-loginhint-enabled

Azure Static Web Apps: login_hint with Azure Functions v1

Andrew Elans — Tue, 23 Dec 2025 17:37:22 +0000

This post shows implementation of the login_hint which does not work with Azure Static Web Apps (SWA) by default.

References to the problem

Easy Auth Flow

Going to https://swa.azurestaticapps.net/.auth/login/aad?login_hint=user@mail.com user is redirected to:

https://swa.azurestaticapps.net/.auth/login/aad?post_login_redirect_uri=/.auth/complete&staticWebAppsAuthNonce=aTakZLY%2fCmXnnD%2foxHxXW%2fWDcXGAy27B84se3dzrpE7UcwEFqKGy2VNnXRqvPInletF6R26ZDfdMSD0kKda41Y8%2b3BXO%2bHUoG3VEbaJpSkhdQ%2fRFWgFb1nKNWZ80dtzW and then to:

https://login.microsoftonline.com/c74da02d-281d-4a45-a4af-cc520eafa6e3/oauth2/v2.0/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fswa.azurestaticapps.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=6c3476f8-54c2-4322-8401-f7774963a1e1&scope=openid+profile+email&response_mode=form_post&resource=https%3A%2F%2Fgraph.microsoft.com&nonce=9108b12ec87a4effa26bd5287d792605_20251223165427&state=redir%3D%252F.auth%252Fcomplete

Problem

login_hint is lost and never passed to the login.microsoftonline.com endpoint.

Fix

I implement a middleware with Azure Functions v4 on Node with http2 request.

Why http2? The auth flow uses pseudo-headers :authority, :path that are a part of the HTTP/2 protocol.

I will provide full setup of the project later.

Steps

User goes to https://swa.azurestaticapps.net/api/whoami?login_hint=user@mail.com
HTTP request is received by function app.http("whoami"... and triggers a handler function.
The handler gets original SWA url, login_hint from the request object, catches redirects, registers cookies and finally returns a full url for the login.microsoftonline.com endpoint with proper nonce cookie.
The function returns a redirect response to the SWA page that handles final authentication.
If fails, function returns a redirect to /.auth/login/aad, logs are registered with the context.log and can be checked in portal.azure.com

Here's the function code that has been tested with multiple user accounts.

import { app } from "@azure/functions";
import { connect } from "node:http2";

let count = 5;

async function getData(url, pWithResolvers, headersObj = {}, loginHint) {
    const p = pWithResolvers ?? Promise.withResolvers();
    const clientSession = connect(url);

    clientSession.on("error", (err) => console.error(err));

    const req = clientSession.request({
        ...headersObj,
    });

    req.on("response", (headers) => {
        req.on("error", (e) => {
            context.log(`problem with request:`, {
                msg: e.message,
                stack: e.stack,
                e: e,
            });
            clientSession.close();
            p.reject(e.message);
        });

        const status = headers[":status"];
        const cookie = headers["set-cookie"];

        if (status === 302 && --count) {
            const location = new URL(headers["location"]);
            const newHeaders = {
                ":authority": location.host,
                ":method": "GET",
                ":path": location.pathname + location.search,
                ":scheme": "https",
                ...(cookie ? { Cookie: cookie.join("; ") } : {}),
            };

            clientSession.close();

            return getData(location.href, p, newHeaders, loginHint);
        }

        const data = loginHint
            ? {
                    url: url.replace(
                        "prompt=select_account",
                        `login_hint=${loginHint}`,
                    ),
                    headersObj: {
                        ":authority": headersObj[":authority"],
                        ":method": headersObj[":method"],
                        ":path": headersObj[":path"].replace(
                            "prompt=select_account",
                            `login_hint=${loginHint}`
                        ),
                        ":scheme": headersObj[":scheme"],
                        Cookie: headersObj["Cookie"],
                    },
                }
            : { url, headersObj };

        clientSession.close();
        p.resolve(data);
    });

    req.end();

    return p.promise;
}

app.http("whoami", {
    handler: async (request, context) => {
        /* context.log(request) => HttpRequest {
            query: URLSearchParams { 'login_hint' => 'bla', 'prompt' => 'none' },
            params: { login_hint: 'bla', prompt: 'none' }
        } */
        try {
            const originalUrl = request.headers.get("x-ms-original-url");
            const loginHint = request.query.get("login_hint") ?? "";
            const data = await getData(
                originalUrl,
                null,
                {
                    ":authority": "swa.azurestaticapps.net",
                    ":method": "GET",
                    ":path": "/.auth/login/aad",
                    ":scheme": "https",
                },
                loginHint,
            ).catch((e) => {
                throw new Error('whoami failed', {cause: {msg: e.message, stack: e.stack, cause: e.cause, e: e}})
            });

            /* data => {
                url: "https://login.microsoftonline.com/c74da02d-281d-4a45-a4af-cc520eafa6e3/oauth2/v2.0/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fswa.azurestaticapps.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=6c3476f8-54c2-4322-8401-f7774963a1e1&scope=openid+profile+email&response_mode=form_post&resource=https%3A%2F%2Fgraph.microsoft.com&nonce=9108b12ec87a4effa26bd5287d792605_20251223165427&state=redir%3D%252F.auth%252Fcomplete",
                headersObj: {
                    ":authority": "login.microsoftonline.com",
                    ":method": "GET",
                    ":path":
                        "/c74da02d-281d-4a45-a4af-cc520eafa6e3/oauth2/v2.0/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fswa.azurestaticapps.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=6c3476f8-54c2-4322-8401-f7774963a1e1&scope=openid+profile+email&response_mode=form_post&resource=https%3A%2F%2Fgraph.microsoft.com&nonce=9108b12ec87a4effa26bd5287d792605_20251223165427&state=redir%3D%252F.auth%252Fcomplete",
                    ":scheme": "https",
                    Cookie:
                        "Nonce=xSJPvaizZDNrIEoi7WpbKykpYx/hYbj02Kh/AmUE6rwAS4NdrQqCVoY46gYT3ltBl0TTgMfTiqw/k/F0Zgql0zuXALXylBdhpxZJ6qatKTMCCPWXRFsVoDFReBgiKMq8; path=/; secure; HttpOnly",
                },
            } */

            context.log({ ...data, ...request, "x-ms-original-url": originalUrl });

            return {
                status: 302,
                headers: {
                    Location: data.url,
                    "Set-Cookie": [data.headersObj.Cookie]
                }
            };
        } catch(e) {
            context.log({msg: e.message, stack: e.stack, cause: e.cause, e: e});
            return {
                status: 302,
                headers: {
                    Location: "https://swa.azurestaticapps.net/.auth/login/aad",
                }
            };
        }
    },
});

staticwebapp.config.json

{
    "trailingSlash": "auto",
    "responseOverrides": {
        "401": {
            "statusCode": 302,
            "redirect": "/aad-redirect/"
        }
    },
    "routes": [
        {
            "route": "/api/whoami*",
            "allowedRoles": ["anonymous", "authenticated"]
        },
        {
            "route": "/api/*",
            "allowedRoles": ["authenticated"]
        },
        {
            "route": "/aad-redirect",
            "allowedRoles": ["anonymous", "authenticated"]
        },
        {
            "route": ".auth/login/github",
            "statusCode": 404
        },
        {
            "route": "/*",
            "allowedRoles": ["authenticated"]
        }
    ],
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["*.{js,css,png,gif,jpg,jpeg,ico}", "/api/*"]
    },
    "auth": {
        "rolesSource": "/api/getroles",
        "identityProviders": {
            "azureActiveDirectory": {
                "registration": {
                    "openIdIssuer": "https://login.microsoftonline.com/c74da02d-281d-4a45-a4af-cc520eafa6e3/v2.0/",
                    "clientIdSettingName": "AZURE_CLIENT_ID",
                    "clientSecretSettingName": "AZURE_CLIENT_SECRET_APP_SETTING_NAME"
                },
                "login": {
                    "loginParameters": ["resource=https://graph.microsoft.com", "prompt=select_account"]
                }
            }
        }
    },
    "platform": {
        "apiRuntime": "node:22"
    }
}

Page `aad-redirect`

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript">
        localStorage.setItem('aad-redirect', true); 
        // this is used to restore last page state location.search + location.hash
        // I could use param post_login_redirect_url=.referrer instead but in this case location.hash is always lost
        // For now, if key aad-redirect if present, last state is taken from localStorage when page loads

        let loginHint = '';
        if (location.search.includes('login_hint=')) {
            const params = new URLSearchParams(location.search);
            const value = params.get('login_hint');
            if (value) {
                loginHint = `?login_hint=${value}`
            }
        }

        location.replace(`/api/whoami${loginHint}`)
    </script>
</head>

<body>

</body>

</html>

Notes

prompt=select_account is used by default and replaced by login_hint if the former is present.
If swa is provisioned with the free hosting plan, you can neither customize aad flow nor enable login_hint due to a lack of azure app registration linked to the SWA
When swa is created, a generic enterprise application is created with name Azure Static Web Apps for this and all other swas which handle built-in aad authentication.
To use login_hint, upgrade to standard hosting plan is required. After this a new app registration shall be created with:
1. a new client secret name and value and passed in the auth key of staticwebapp.config.json as explained here learn.microsoft.com/en-us/azure/static-web-apps/authentication-custom.
2. In Token configuration -> Add optional claim login_hint

Top-level await on iOS Safari/Chrome fails

Andrew Elans — Mon, 22 Dec 2025 12:25:11 +0000

Ref. caniuse

Had to dig a bit why on mobile Chrome/Safari behavior was different than on desktop and found that top level await fails in some scenarios.

Google WebKit bug top-level await.

Logic

Main module

Loading scripts in sequence, order is important.

await import('./msal-config.js');
await import('./public-assets.js');
await import('./msal-index.js');
await import('./assets/navbar-02.js')

navbar-02.js

console.log('<<<<<<<<<<<< navbar-02.js start')
import { snippetsObj, navButtonsSet } from './whoami-01.js';

// snippetsObj and navButtonsSet are used to render SPA view

console.log('<<<<<<<<<<<< navbar-02.js end')

whoami-01.js

console.log('<<<<<<<<<<<< whoami-01.js start')
const navButtonsSet = new Set();
const snippetsObj = {
    routesMap: new Map(),
    savedStates: new Map()
};

// some logic that checks user's access, 
// and loads right snippets into snippetsObj 
// and navButtonsSet
await m.pipeFn(fn1, fn2, fn3, ... fn10); 

export { snippetsObj, navButtonsSet }

console.log('<<<<<<<<<<<< whoami-01.js end')

Flow in desktop browser

<<<<<<<<<<<< dynamic-01-whoami.js start
<<<<<<<<<<<< dynamic-01-whoami.js end
<<<<<<<<<<<< dynamic-02-navbar.js start
<<<<<<<<<<<< dynamic-02-navbar.js end

Flow in iOS Safari

<<<<<<<<<<<< dynamic-01-whoami.js start
<<<<<<<<<<<< dynamic-02-navbar.js start
<<<<<<<<<<<< dynamic-02-navbar.js end
<<<<<<<<<<<< dynamic-01-whoami.js end

Fix

The best option is to refactor to simplify import logic. Here is quick fix.

whoami-01.js rewritten

const navButtonsSet = new Set();
const snippetsObj = {
    routesMap: new Map(),
    savedStates: new Map()
};

const p = Promise.withResolvers();

// wrap in IIFE and export promise
(async () => {
    await m.pipeFn(
        fn1, 
        fn2, 
        fn3, 
        ..., 
        fn10, 
        () => p.resolve({navButtonsSet, snippetsObj}) // last fn added to resolve the promise with populated objects
    )
})()

export default p.promise

navbar-02.js rewritten

Option 1

import defaultExport from './whoami-01.js';
const {snippetsObj, navButtonsSet } = await defaultExport;

Option 2

const {snippetsObj, navButtonsSet } = await import('./dynamic-01-whoami.js')
.then(mod => mod.default);

Azure Storage CORS disappears: bug or feature?

Andrew Elans — Tue, 18 Nov 2025 12:26:49 +0000

When updating network configuration in portal.azure.com -> Storage account -> Security + networking -> Networking, your whole CORS setup is erased, usually not immediately, but after some minutes...

For example try to modify your IPv4 allowed list and check that your previous CORS settings are gone forever.

If this is a feature, please explain the logic of it...

Power Pages SPA: components Part 2

Andrew Elans — Mon, 03 Nov 2025 16:28:02 +0000

Ref. github.com/AndrewElans/PowerPagesSPA-PowerPagesSetup.

We would need to deactivate/remove or tweak the default Power Pages components and add new.

Go to make.powerapps.com -> select environment `250101`

Select Apps -> All -> find Power Pages Management app, or called Power Pages-administrasjon -> click Play.

Websites

Rename Site 250101 - site-250101 to Site 250101

Web Files

Delete all except Cat-PC.png. Open this file and place under Parent Page Page Not Found instead of Home.

Cat-PC.png is the default Power Pages picture of a cat with headphones and PC that is rendered in Page Not Found.

All other files will be provisioned with Vite build uploaded manually for granular control.

Why page-not-found? Files under this page are public files and can be accessed by Anonymous users as explained in the Power Pages SPA: login redirect post, part Default pages with public access.

bootstrap.bundle.js EDITED (search 'fixedbyae' v.5.3.3)`. This file has been edited to fix the modal component behavior as explained in this post.

Note: if you cannot upload the .js file, you have likely missed it in Power Pages SPA: main setup how to enable the js extension, part Privacy + Security so check back there.

Web Templates

Select all and delete except the following:

Pages Breadcrumb (these if disabled will return)
Default studio template
Footer
Header

Add new placeholder templates

All with code <!doctype html>. Names can be any, .html is not needed, _ is not needed, just helps better grouping/sorting.

_index.html
_page-not-found.html
_blank.html

We will modify these with Vite.

Header

See code in the github repo with comments.

When a user does not have an active portal session in a browser, the user is redirected to the /SignIn... route for action as follows:

Our changed header will now automatically redirect to enter user credentials. It will also be catching routing with hash, e.g. #contracts and URL-encode it to %23contracts (if not encoded, redirect to the route #contracts will not work after authentication is successful). It will also be adding login_hint if available for silent authentication.

Footer

Replace code with 

We will need to add 3 new templates later:

index -> for Home route
page-not-found -> for msal redirect token and functionality to handle routes
blank -> for Static Assets and Dynamic Assets pages

Page Templates

Add 3 new with Type Web Template, select corresponding web template in Web Template, deactivate Use Website Header and Footer except _index.

_index -> Use Website Header and Footer On
_page-not-found
_blank

Web Pages

Add new pages:

_Static Assets -> url static-assets -> parent Home -> page template _blank
_Dynamic Assets -> url dynamic-assets -> parent Home -> page template _blank

Change page templates:

Home -> to _index
Page Not Found -> to _page-not-found

Profile (route /profile) and Search (route /search) we don't need and disabled in Site Settings.

Access Denied(route /access-denied) we keep but don't use. If we deactivate it, the site will give back Error 500 on any page including Home like this:

So, the page Access Denied is important to keep as this is checking if the user has access or not and then renders the sign in route if not.

Web Page Access Control Rules

Diactivate 2 rules that are provided by default.

Create new:

1) Name restrict read Home

Web page Home -> right Restrict read -> access type Exclude direct child web files -> Save -> Web Roles -> Add existing web role -> Authenticated users -> Add

2) Name

Site Settings

Update as follows:

Authentication/OpenIdConnect/AzureAD/RegistrationEnabled true
Authentication/Registration/AzureADLoginEnabled true
Authentication/Registration/InvitationEnabled false
Authentication/Registration/ProfileRedirectEnabled false
Profile/Enabled false
Search/Enabled false

N.B. When Site Settings are changed, resync of the portal in https://make.powerpages.microsoft.com/ is required, but sometimes the changes are not synced immediately, so wait some minutes to see the changes (refresh of the portal cache sometimes help but sometimes not. What can help track if changes are synced is this setting Authentication/OpenIdConnect/AzureAD/Caption that is a title of the button originally titled Microsoft Entra ID. So whenever you change the settings, update the title of this button, and if it's changed, you will see that the changes are synced. I noticed also, there may be some limitation on the title length or presence of spaces, so if it's renamed to bnt1, the button will still have the original full name.

resources.azure.com is deprecated

Andrew Elans — Sat, 01 Nov 2025 16:37:12 +0000

Azure Resource Explorer resources.azure.com is a convenient and straighforward way to manage some resources where you could change some settings by sending a PATCH/PUT request through the explorer UI.

For example, for Web Apps you can update identityProviders or requireAuthentication paths or public routs/paths (excludedPaths) using this link:

resources.azure.com/subscriptions/your-guid/resourceGroups/rg-dev-001/providers/Microsoft.Web/sites/your-app/config/authsettingsV2/list

A year ago they announced it for deprecation here github.com/projectkudu/AzureResourceExplorer/issues/374 however it's still available to this date.

Some days ago a replacement app was announced in this thread located here preview.portal.azure.com/#view/Microsoft_Azure_Resources/ResourceExplorer.ReactView.

Another was to access this app:
Go to preview.portal.azure.com -> find Resource Manager -> Tools -> Resource explorer

Not all functionality is present however. For example, authsettingsV2 is not available for edit as I asked about here

Power Pages SPA with Azure Cosmos DB

Andrew Elans — Thu, 30 Oct 2025 16:25:55 +0000

Make Azure Cosmos DB to work with Power Pages.

You can securely query Azure Cosmos DB with MSAL token obtained in a browser. Token will be verified and access either granted or not.

Azure Cosmos DB allows to set up granular control with RBAC to databases or documents. It could be a fast and convenient Dataverse alternative when it comes to getting or sending large arrays of data.

Details here github.com/AndrewElans/PowerPagesSPA-CosmosDB

DEV Community: Andrew Elans

Power Pages: how to get contact's Dataverse team membership in web template with Liquid

The naive approach - and why it fails

The correct approach - start from the team

Driving UI with team membership

A note on table permissions

A note on how this was found

Black & White VS Code Theme

The problem with stock

The tweaks

Why bother

Azure Static Web Apps: Simple Logout Without login_hint

Azure Static Web Apps: Simple Logout Without login_hint

The problem with default EasyAuth logout

A better approach: sign out of SWA only

Angular

Vanilla JS

Optional: full logout with a toggle

YouTube: Make the Video Timer Always Visible

The Fix: Disable the Auto-Hide

Steps

Make media buttons F7,F8,F9 to work with Udemy in browser on MacOS

The Problem

Fix 1: Chrome DevTools Local Override

Fix 2: Console Snippet (full version with all handlers)

How to save it

Result

Caveats

Easy fix with a bookmark when you need it

Azure Static Web Apps: Add login_hint with Node.js API Backend

The Problem

Default EasyAuth Flow

The Fix

Stack

Why HTTP/2?

Fixed Auth Flow

Phase 1: Client-side redirect

Phase 2: Server-side HTTP/2 flow

Phase 3: URL modification

Phase 4: Browser redirect to Microsoft

Phase 5: Auth completion

Key Detail: Cookie Domain Stripping

Fallback

Source Code

Azure Static Web Apps: login_hint with Azure Functions v1

Easy Auth Flow

Problem

Fix

Steps

staticwebapp.config.json

Page aad-redirect

Notes

Top-level await on iOS Safari/Chrome fails

Logic

Main module

navbar-02.js

whoami-01.js

Flow in desktop browser

Flow in iOS Safari

Fix

whoami-01.js rewritten

navbar-02.js rewritten

Option 1

Option 2

Azure Storage CORS disappears: bug or feature?

Power Pages SPA: components Part 2

Go to make.powerapps.com -> select environment 250101

Websites

Web Files

Web Templates

Add new placeholder templates

Header

Footer

Page Templates

Web Pages

Web Page Access Control Rules

Site Settings

resources.azure.com is deprecated

Power Pages SPA with Azure Cosmos DB

Page `aad-redirect`

Go to make.powerapps.com -> select environment `250101`