DEV Community

Andrew Elans
Andrew Elans

Posted on

Azure Static Web Apps: login_hint with API on Node.js

#api #azure #node #tutorial

The first trial of implemententing login_hint with Azure Functions was done here dev.to/andrewelans/azure-static-web-apps-add-loginhint-with-functions;

This post shows how to implement the same with Azure Web App on Node.js connected as API to SWA.

Problem

In Azure Static Web Apps (SWA) login_hint parameter is dropped and never passed to the login.microsoftonline.com endpoint.

Source code

This repo has full explanation and source code github.com/AndrewElans/azure-swa-loginhint-enabled

Tools

  • Azure Static Web App
  • Azure Web App in Node.js v24 linked as API backend in SWA

Default Easy Auth flow in short

  1. User navigates to SWA's URL https://swa.azurestaticapps.net/.auth/login/aad?login_hint=bing.whatman@contoso.com
  2. Redirect to https://swa.azurestaticapps.net/.auth/login/aad?post_login_redirect_uri=/.auth/complete&staticWebAppsAuthNonce=aTakZLY%2fCmXnnD%2foxHxXW%2fWDcXGAy27B84se3dzrpE7UcwEFqKGy2VNnXRqvPInletF6R26ZDfdMSD0kKda41Y8%2b3BXO%2bHUoG3VEbaJpSkhdQ%2fRFWgFb1nKNWZ80dtzW

  3. Redirect 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&prompt=select_account&response_mode=form_post&resource=https%3A%2F%2Fgraph.microsoft.com&nonce=9108b12ec87a4effa26bd5287d792605_20251223165427&state=redir%3D%252F.auth%252Fcomplete

    As we see login_hint is not included in Step 3 which normally shall look like this:

    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&login_hint=bing.whatman%40contoso.com&response_mode=form_post&resource=https%3A%2F%2Fgraph.microsoft.com&nonce=9108b12ec87a4effa26bd5287d792605_20251223165427&state=redir%3D%252F.auth%252Fcomplete

Fix

  • Implement a middleware on Node.js with built-in http.createServer and http2 connect request since the original EasyAuth flow uses pseudo-headers :authority, :path that are a part of the HTTP/2 protocol.

    • http.createServer is served as https by default by Azure

  • Add login_hint in the middle of the process by ammending the request url to the login.microsoftonline.com endpoint using right cookies obtained in the process.

  • If process fails, fallback to normal auth flow redirecting to /.auth/login/aad

Fixed auth flow steps

  • Client navigates to https://swa.azurestaticapps.net
  • If active session is not present (EasyAuth defaults to 8 hours), client redirects to /login/ as set in staticwebapp.config.json
  • client redirects to /aad-redirect/ to get login_hint either from location.search or from localStorage and redirects to /api/login-aad?user=bing.whatman
  • backend picks up route /api/login-aad and get ?user from urlObj.searchParams
  • if user is not present, redirect to default EasyAuth route https://swa.azurestaticapps.net/.auth/login/aad, else
  • send http2 request to https://swa.azurestaticapps.net/.auth/login/aad and get redirect URI (location) and StaticWebAppsAuthContextCookie cookie.
  • send http2 request to the recieved location https://swa.azurestaticapps.net/.auth/login/aad?post_login_redirect_uri=/.auth/complete&staticWebAppsAuthNonce=TrdHVY...bJ with cookie StaticWebAppsAuthContextCookie and get URL to login.microsoftonline.com as location and nonce cookie
  • in the received location replace prompt=select_account with login_hint=bing.whatman@contoso.com and state=redir%3D%252F.auth%252Fcomplete with state=redir%3D%252Fapi%252Flogin-aad-complete
  • modify StaticWebAppsAuthContextCookie by replacing domain=swa.azurestaticapps.net; with <empty string>
    • NB!!! since backend has another URL than SWA, this cookie will not be set by the browser if this domain is present
  • redirect back to the browser with modified staticWebAppsAuthContextCookieModified and nonce and modified location
  • broswer sets StaticWebAppsAuthContextCookie and Nonce and redirects to login.microsoftonline.com with login_hint
  • upon auth completion the browser redirects to backend route /api/login-aad-complete
  • backend get cookies StaticWebAppsAuthContextCookie, AppServiceAuthSession1, AppServiceAuthSession and sends these with http2 request to https://swa.azurestaticapps.net/.auth/complete receiving back StaticWebAppsAuthCookie
  • backend redirects back to the SWA's url /login-aad-complete/ setting StaticWebAppsAuthCookie cookie and deleting Nonce and StaticWebAppsAuthContextCookie
  • /login-aad-complete/ redirects to / as per staticwebapp.config.json

Top comments (0)