Challenge06.md

Challenge 6: Create a new Single Page App (SPA) for patient search

< Previous Challenge - Home - Next Challenge>

Introduction

In this challenge, you will create a new JavaScript Single Page App (SPA) integrated with Microsoft Authentication Library (MSAL) to connect, read and search for FHIR patient data.

Description

• Create a new JavaScript Single-Page App (SPA) Node.js or React app.

  • Node.js: git clone sample code for Node.js JavaScript SPA with MSAL
  • React: Use Create React App frontend build pipeline (toolchain) to generate the initial project structure.

• Integrate and configure the Microsoft Authentication Library (MSAL) with your JavaScript SPA app to fetch data from protected FHIR web API.

  • You need to use MSAL to authenticate and acquired access token as a bearer in your FHIR API HTTP request.

  

• Create a patient lookup by Given or Family name in JavaScript SPA app.

  • Explore the FHIR API collection imported into Postman earlier to obtain the appropriate API request for the patient search query.

• (Optional) Include any other modern UI features to improve the user experience.

• Register your app on AAD tenant with directory admin access to connect web app with FHIR Server for both local and Azure web app URLs.

  • Ensure that the Reply URL matches the local and Azure Web App URL
    • In AAD App Registration of AAD with directory admin access, configure a new Web Platform under Authentication blade
      • Add Redirect URI for both local and Azure Web App URLs
      • Enable Implicit Grant by selecting Access token and ID tokens
      • Configure permissions for Azure Healthcare APIs with User_Impersonation permission (if needed)

• Build and test JavaScript SPA app locally.

  • To run locally, you'll need to change the redirectUri property to: http://localhost:3000/.

• Deploy JavaScript SPA web app to Azure App Service.

  • To run on Azure, you'll need to change the redirectUri property to: <YOUR_AZURE_APP_SERVICE_WEBSITE_URL>.

• Test the JavaScript SPA Patient Search app:

  • Browse to App Service website URL in a new in-private/Incognito window.
  • Sign in with your admin tenant user credential saved in challenge 1.
  • Enter full/partial name in the patient search textbox and click the search button.
  • You should see a list of FHIR patient(s) that matches your search criteria.

Success Criteria

• You have created a JavaScript SPA Patient Search app and deployed it to Azure App Service.
• You have tested patient lookup in the Patient Search web app.

Learning Resources

• Create a new JavaSCript SPA using MSAL to call protected Web API
• GitHub Azure Samples - MSAL JavaScript Single-page Application using Implicit Flow
• Create React App integrated toochain
• Microsoft Authentication Library for React (@azure/msal-react)
• Initialization of MSAL (@azure/msal-react) in React app
• Samples for the MSAL.js 2.x library
• Getting Started: Using React AAD MSAL library components to integrate MSAL with AAD in your React app
• Sample JavaScript code to acquired access token as a bearer in an HTTP request to call protected web API
• How to create a simple search app in React
• Sample React JS code to perform a search
• Deploy your Node.js app using VS Code and the Azure App Service extension
• Hosting options and deployment scenarios to move your node.js app from a local or cloud repository to Azure
• Deploying React apps to Azure with Azure DevOps
• Register your app
• Register a web app public client application