Add blank.html to React App build for MSAL (hash_empty_error)

Question

Multiple sources have proposed adding a blank.html page to React Applications that implement MSAL (Microsoft Authentication Library) to resolve the "hash_empty_error". MSAL Github Issues, Stack Overflow Question.

We have what I can only imagine is a very common setup (Github Actions integration with Azure Static Web Apps). So when we push, Github Actions builds and deploys our app to Azure Static Apps. How would we add the required blank.html in this case?

This is the yml file that I imagine we need to modify to add this blank html page. This is basically just the default template Github Actions provides for deploymnet to Azure Static Web Apps:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    env:
      REACT_APP_ENV: "prod"
      CI: false
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Any help on this would be greatly appreciated. We have lost days on this MSAL hash_empty_error.

Answer 1

To mitigate this MSAL hash_empty_error error, as suggested by jasonnutter:

• A common cause of this is the page used as the redirect uri redirects and/or removes the hash before MSAL has a chance to parse it. When your redirect URI is loaded in a popup with a hash response (myapplication.com/redirect#code=), if your application redirect and/or clear the hash then for popup/silent requests, you can set your redirect URI to a blank HTML.

Note: For redirects (loginRedirect/acquireTokenRedirect), you cannot use a blank html page for the redirect uri.

References: Microsoft Authentication React "hash_empty_error" when using loginPopup and Hash value cannot be processed because it is empty