more debug info
backend: read user id from aad as well
fix typo; remove unused code; add npm install


browse  log 



You can also use your local clone with git send-email.

Demo: see ./aad-demo.mp4

Updates not shown in video:

  • Backend now echos headers of interest.
  • Frontend has an additional "Call /.auth/me" feature.

#The general principle

  1. In Authentication settings, add allowed external redirect URL, say, http://host.local:3000/aad-callback/ (localhost would be rejected)

  2. In /etc/hosts, add host.local

  3. Visit this link:

            ^-------^ your azure webapp              your external redirect url ^-------------------------------^
  4. After a successful login, you will be redirect to http://host.local:3000/aad-callback/, which is FE. In FE, read the #token={...} fragment. Here's the docs. An example:

        "authenticationToken": "eyJhbGc...JKno",
        "user": { "userId": "sid:123...45678" }
  5. Stick this authenticationToken value into an X-ZUMO-AUTH header in all requests:

    GET https://<appname>.azurewebsites.net/api/hello/
    X-ZUMO-AUTH: <authenticationToken_value>
  6. Of course, remember to allow your CORS:


#How to reproduce this demo specifically

There are 2 services: ./backend/ to be deployed on AZ, while ./frontend/ to run locally.

Before running anything, copy .env.sample to .env, enter your correct REACT_APP_BACKEND_URL, then source those environment variables using your favorite method (I like direnv personally).

Now you can try running both locally:

make be # http://localhost:8000/api/hello/
make fe # http://localhost:3000

Turn off be, then read on:

#1. Deploy backend as an Azure webapp

# This installs `az` into your $PATH:
pipx install azure-cli

cd frontend && npm install && cd ..

# Uses az to create & deploy webapp;
# You'll get a ./backend/.azure/config file - keep it.
make init-be

Backend uses a BACKEND_ENV envar to identify itself. Since az webapp doesn't allow configuring envars (or I haven't found it), set it on azure portal:

Run make deploy-be to make sure the app restarts with the right envar I guess.

Now go to http://your-app.azurewebsites.net/api/hello/ - you should see an empty web page with the message Greetings from $BACKEND_ENV.

#2. Authentication setup

Go to your app on azure portal, Authentication, Add Identity Provider.

Then Edit Authentication Setting, add http://host.local:3000/ to "Allowed external redirect URLs". Open your /etc/hosts, add host.local.

Now follow steps 3 to 6 in "The general principle" above.