Forem: Andrew Elans

Power Pages: Export to CSV - no dependencies

Andrew Elans — Wed, 15 Apr 2026 14:08:29 +0000

This post covers a pattern for exporting filtered supplier data to CSV from a Power Pages portal in the following setup:

Page /suppliers renders the user interface where filters are applied to request required data. Example: powerpages.com/suppliers?status=active&country=norway&withpackages=1
Data API requests are made to api/suppliers — a Liquid web template with application/json as MIME type, accepting request.query parameters to fetch filtered data from Dataverse.
To export CSV, the user clicks a button that requests api/suppliers/export. The web template behind that page accepts the same query params from the URL. The page is restricted to the Procurement team only.
The Export button is rendered only to procurement members. The /csv web template short-circuits the response with an error for anyone else.

Two approaches are covered. The first — a single Liquid web template with nested FetchXML queries — works fine for small datasets but hits a hard wall at scale. The fix is a pre-joined Dataverse table populated by a Power Query dataflow, giving you a single flat FetchXML query that returns fast regardless of filter complexity.

The CSV download mechanics will be covered in a follow-up post.

The initial approach — nested FetchXML in Liquid

The supplier search pulls from multiple Dataverse tables: aa_lfa1 (vendor master), aa_aribasupplier (Ariba sync data), aa_package (simplified UNSPSC category), aa_finance (financial risk data), and aa_agreement (framework agreements). For paginated search results this is fine — 10 records at a time, each with a handful of inner FetchXML calls linked by aa_sapid.

For a CSV export the same pattern looks like this:

{%- fetchxml suppliers -%}
<fetch count="500" distinct="true" page="1">
  <entity name="aa_lfa1">
    <attribute name="aa_lfa1id"></attribute>
    <attribute name="aa_sapid"></attribute>
    <attribute name="aa_name"></attribute>
    <attribute name="aa_countryname"></attribute>
    <attribute name="aa_city"></attribute>
    <attribute name="aa_vat_no"></attribute>
    <attribute name="aa_status"></attribute>
    <filter type="and">
      {% if request.params['country'] %}
        <condition attribute="aa_countryname" operator="begins-with" value="{{request.params['country']}}"></condition>
      {% endif %}
      {% if request.params['name'] %}
        <condition attribute="aa_name" operator="like" value="%{{request.params['name']}}%"></condition>
      {% endif %}
      {%comment%} ...more filter conditions... {%endcomment%}
    </filter>
  </entity>
</fetch>
{%- endfetchxml -%}
[
  {%- for supplier in suppliers.results.entities -%}
  {
    "sap_id": "{{supplier.aa_sapid}}",
    "name": "{{supplier.aa_name}}",
    {%- fetchxml aribaSups -%}
      <fetch><entity name="aa_aribasupplier">
        <attribute name="aa_prequallevel" />
        <link-entity name="aa_lfa1" from="aa_sapid" to="aa_sapid" link-type="inner">
          <filter><condition attribute="aa_lfa1id" operator="eq" value="{{supplier.aa_lfa1id}}"></condition></filter>
        </link-entity>
      </entity></fetch>
    {%- endfetchxml -%}
    "prequal": "{{aribaSups.results.entities[0].aa_prequallevel}}",
    {%- fetchxml packages -%}
      <fetch><entity name="aa_package">
        {%comment%} ...join to aa_masterpackagelist... {%endcomment%}
      </entity></fetch>
    {%- endfetchxml -%}
    "packages": "{{packages...}}",
    {%comment%} ...other fetches for agreements, finance, etc... {%endcomment%}
  }{% unless forloop.last %},{% endunless %}
  {%- endfor -%}
]

The problem is the math: 500 suppliers × 6 inner FetchXML calls = 3,000 sequential Dataverse queries in a single request. In practice, 500 records takes over 2 minutes — right at Power Pages' request timeout ceiling. The export either times out or returns partial data.

distinct="true" on the outer fetch adds further overhead. It's needed to collapse duplicates caused by join-based filters, but forces a SELECT DISTINCT across all those joins before pagination even starts.

The fix — pre-join with a Power Query dataflow

Instead of joining at query time in Liquid, join once on a schedule using a Power Query dataflow and write the result to a flat Dataverse table. The export template then hits a single table with no inner fetches.

Step 1 — set up the aggregation queries

Each related table needs to be aggregated to one row per vendor before joining, otherwise the joins fan out rows and produce duplicates.

Packages (aa_package_agg) — concatenate all package codes per vendor:

let
  Source = CommonDataService.Database("dataverse.crm.dynamics.com"),
  Nav = Source{[Schema = "dbo", Item = "aa_package"]}[Data],
  Cols = Table.SelectColumns(Nav, {"aa_masterpackagelist_lookupname", "aa_lfa1"}),
  Expanded = Table.ExpandRecordColumn(Cols, "aa_lfa1", {"aa_sapid"}, {"sap_id"}),
  Grouped = Table.Group(Expanded, {"sap_id"}, {
    {"packages", each Text.Combine(List.Sort(List.RemoveNulls(List.Transform([aa_masterpackagelist_lookupname], Text.From))), ","), type text}
  })
in
  Grouped

Other tables are added as separate dataflow queries and aggregated where relevant — the pattern is the same: select columns, filter nulls, group by aa_sapid, aggregate with Text.Combine or List.Max depending on the field type.

Step 2 — the main export query

With the aggregated queries in place, the main query is a series of left outer joins starting from the vendor master:

let
  #"Merged queries" = Table.NestedJoin(aa_lfa1, {"aa_sapid"}, aa_aribasupplier_agg, {"aa_sapid"}, "aa_aribasupplier", JoinKind.LeftOuter),
  # ...other joins here...
  #"Expanded aa_agreement" = Table.ExpandTableColumn(#"Merged queries 3", "aa_agreement", {"aa_agreement_active_count"})
in
  #"Expanded aa_agreement"

Load only this final query to a Dataverse table (e.g. aa_suppliersummary). Set the other queries to not load. In the destination settings, use merge with aa_sapid as the primary key — this means a failed refresh won't leave you with an empty table.

Step 3 — the export web template

The Liquid template is now a single FetchXML against the flat table with all your existing filter conditions. No inner loops, no per-row queries:

{%- assign userRole = 'standard' -%}
{%- assign procurementTeamId = 'a3a5a17e-4b64-ab11-bfe3-000d3a48fb2a' -%}
{%- 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' -%}
    {%- assign query = request.query | split: '&amp;' -%}
    {%- fetchxml suppliers -%}
    <fetch count="5000" page="1" returntotalrecordcount="true" {% if request.params.aribaquest %} distinct="true" {% endif %}>
        <entity name="aa_suppliersummary">
            <attribute name="aa_sapid"></attribute>
            <attribute name="aa_name"></attribute>
            <attribute name="aa_countryname"></attribute>
            <attribute name="aa_city"></attribute>
            <attribute name="aa_vat_no"></attribute>
            <attribute name="aa_status"></attribute>
            <attribute name="aa_packages"></attribute>
            <attribute name="aa_prequal_level"></attribute>
            <attribute name="aa_pending_prequal"></attribute>
            <attribute name="aa_rating"></attribute>
            <attribute name="aa_last_eval_year"></attribute>
            <attribute name="aa_agreement_active_count"></attribute>
            <filter type="and">
                {%- if request.params['country'] -%}
                    <condition attribute="aa_countryname" operator="begins-with" value="{{request.params['country']}}"></condition>
                {%- endif -%}
                {%- if request.params['name'] -%}
                    <condition attribute="aa_name" operator="like" value="%{{request.params['name']}}%"></condition>
                {%- endif -%}
                {%comment%} ...other query filters... {%endcomment%}
            </filter>
            {%- if request.params.aribaquest -%}
                {%- assign param = request.params.aribaquest | split: '|' -%}
                <link-entity name="aa_aribasupplerqueststatus" from="aa_sapid" to="aa_sapid" link-type="inner">
                    <filter type="and">
                        <condition attribute="aa_qfullname" operator="eq" value="{{ param[0] | xml_escape }}" />
                        {%- if param.size == 2 -%}
                            <condition attribute="aa_qstatus" operator="eq" value="{{ param[1] | xml_escape }}" />
                        {%- endif -%}
                    </filter>
                </link-entity>
            {%- endif -%}
        </entity>
    </fetch>
    {%- endfetchxml -%}
    [
        {%- for supplier in suppliers.results.entities -%}
        {
            "sap_id": "{{supplier.aa_sapid}}",
            "name": "{{supplier.aa_name | replace: '"', '\"'}}",
            {%comment%} ...other fields... {%endcomment%}
            "packages": "{{supplier.aa_packages}}"
        }{%- unless forloop.last -%},{%- endunless -%}
        {%- endfor -%}
    ]
{%- else -%}
    {"error": "Not assigned to procurement group."}
{%- endif -%}

The team membership check uses the pattern covered in Power Pages: how to get contact's Dataverse team membership in web template with Liquid — export is gated to procurement team members only, returning a JSON error for anyone else.

One more optimization — conditional `distinct`

Some filters add a link-entity inner join (e.g. aribaquest), which can fan out rows if a vendor has multiple matching records. distinct="true" collapses those back to one row per vendor, but forces a SELECT DISTINCT on every request even when no join is active. Since aa_suppliersummary is a flat table, distinct is only needed when such a join is in play:

<fetch count="5000" page="1" returntotalrecordcount="true" {% if request.params.aribaquest %} distinct="true" {% endif %}>

Only pay the DISTINCT cost when the join is actually active.

The result

Before: 500 records, 6 inner FetchXML calls per row, ~2 minutes, frequent timeouts
After: 5,000 records, single FetchXML against a flat table, 2 seconds

The 5,000 record limit is Dataverse's hard FetchXML ceiling per page, but that's sufficient for this corporate scenario. With client-side pagination (incrementing the page param from JS) you can page through larger sets if needed. The CSV generation itself will be covered in the next post.

The tradeoff is data freshness — the export reflects the last dataflow run rather than live Dataverse data. For a supplier directory that syncs on a schedule anyway, that's an acceptable tradeoff.

Azure SQL Database - Cross-Database Queries on the Same Server

Andrew Elans — Thu, 09 Apr 2026 09:16:17 +0000

If you have two databases on the same Azure SQL logical server and try a three-part name query like you would on-prem SQL Server - it won't work.

Here's how to set it up using Elastic Query.

Prerequisites

Elastic Query only supports SQL authentication - Entra ID (AAD) and Managed Identity are not supported for cross-database credentials.

If your server has Microsoft Entra ID only authentication enabled, you'll need to disable it:

Azure Portal → SQL Server → Settings → Microsoft Entra ID → uncheck Support only Microsoft Entra authentication for this server.

This is a server-level setting that applies to all databases. If AAD-only is a company policy, there is a workaround to cross-query dbs with Power Automate - I'll cover that in a separate post.

The setup

Server: sql-server-dev-001
Source database: sqldb-prod-001 (where you run queries)
Target database: sqldb-dev-001 (where the data lives)

1. Check if cross-database queries work

From sqldb-prod-001, try querying a table in sqldb-dev-001:

SELECT * FROM [sqldb-dev-001].SalesLT.vGetAllCategories

If you get this error, you need to set up Elastic Query:

Reference to database and/or server name in 'sqldb-dev-001.SalesLT.vGetAllCategories' is not supported in this version of SQL Server.

2. Generate a password

In Azure Portal, open Cloud Shell and generate a password:

openssl rand -base64 40

Copy the output.

3. Store the password in Azure Key Vault

Go to your Key Vault, Secrets > Generate/Import:

Name: sqldb-dev-001-crossdb-password
Value: paste the generated password

This gives you a single source of truth for rotation later.

4. Create a contained user in the target database

Connect to sqldb-dev-001 and create a user with the password from Key Vault:

CREATE USER [sqldb-dev-001-identity]
WITH PASSWORD = '<password-from-keyvault>';

ALTER ROLE db_datareader ADD MEMBER [sqldb-dev-001-identity];

5. Check if a Database Master Key exists

In the source database (sqldb-prod-001), a master key must exist for scoped credentials to work. Check if you already have one:

SELECT * FROM sys.symmetric_keys
WHERE name = '##MS_DatabaseMasterKey##';

If a row comes back - skip to the next step.

If no rows are returned, create one. This password is only used to encrypt the master key itself - it's not referenced again in this setup. Generate it with:

openssl rand -base64 40

Store it in Key Vault as sqldb-dev-001-masterkey-password, then create the key:

CREATE MASTER KEY ENCRYPTION BY PASSWORD = '<password-from-keyvault>';

6. Create the scoped credential

Still in sqldb-prod-001:

CREATE DATABASE SCOPED CREDENTIAL [sqldb-dev-001-credential]
WITH IDENTITY = 'sqldb-dev-001-identity',
     SECRET = '<password-from-keyvault>';

Verify it was created:

SELECT name, credential_identity
FROM sys.database_scoped_credentials;

7. Create the external data source

CREATE EXTERNAL DATA SOURCE [sqldb-dev-001]
WITH (
    TYPE = RDBMS,
    LOCATION = 'sql-server-001.database.windows.net',
    DATABASE_NAME = 'sqldb-dev-001',
    CREDENTIAL = [sqldb-dev-001-credential]
);

What is an external table?

An external table is a live link to a table or view in another database. No data is copied or synced - every query executes against the target database in real-time and returns current results. It's essentially a remote view with the network overhead of a cross-database call on each query.

You can't query the external data source directly - there's no ad-hoc SELECT * FROM [external-source].Schema.Table syntax. That's the same three-part name pattern Azure SQL blocks. You need to create an external table for each table or view you want to access.

8. Create an external table

Map a table from the target database:

CREATE EXTERNAL TABLE [SalesLT].[vGetAllCategories] (
    [ParentProductCategoryName] NVARCHAR(50),
    [ProductCategoryName] NVARCHAR(50),
    [ProductCategoryID] INT
)
WITH (
    DATA_SOURCE = [sqldb-dev-001],
    SCHEMA_NAME = 'SalesLT',
    OBJECT_NAME = 'vGetAllCategories'
);

9. Test it

SELECT * FROM [SalesLT].[vGetAllCategories];

No three-part names needed - the external table handles the cross-database routing.

Cleanup reference

If you need to tear things down, drop in reverse order:

-- Source database
DROP EXTERNAL TABLE [SalesLT].[vGetAllCategories];
DROP EXTERNAL DATA SOURCE [sqldb-dev-001];
DROP DATABASE SCOPED CREDENTIAL [sqldb-dev-001-credential];

-- Target database
DROP USER [sqldb-dev-001-identity];

Notes

Elastic Query has some performance overhead compared to local queries - it's not ideal for high-frequency joins
The contained user only needs db_datareader for SELECT access. Add db_datawriter if you need write access
Store the password in Key Vault, not in code or config
When rotating the password, update both the contained user and the scoped credential

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.

Forem: Andrew Elans

Power Pages: Export to CSV - no dependencies

The initial approach — nested FetchXML in Liquid

The fix — pre-join with a Power Query dataflow

Step 1 — set up the aggregation queries

Step 2 — the main export query

Step 3 — the export web template

One more optimization — conditional distinct

The result

Azure SQL Database - Cross-Database Queries on the Same Server

Prerequisites

The setup

1. Check if cross-database queries work

2. Generate a password

3. Store the password in Azure Key Vault

4. Create a contained user in the target database

5. Check if a Database Master Key exists

6. Create the scoped credential

7. Create the external data source

What is an external table?

8. Create an external table

9. Test it

Cleanup reference

Notes

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

One more optimization — conditional `distinct`

Page `aad-redirect`

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