Viewing Medications


After having a Patient go through the <FlexpaLogin /> flow, we can view their currently prescribed medications by using our out-of-the-box React Components, or by constructing the FHIR query ourselves.

This guide will focus on using one of our out-of-the-box components, the <MedicationCard />.

Retrieving medications

The resource we are going to need in this example is a MedicationRequest.

  • MedicationRequest.status can have many different values, including: active, on-hold, stopped, completed.

We can use MedicationRequest.status to find Medications currently prescribed to a Patient, by looking for status: 'active'.

The <MedicationCard /> will do this for you. Below you can see an example of a <MedicationCard /> being rendered. We will also walk through how to recreate this example.

Image of a sample MedicationCard component, showing active medication belonging to a patient

To build this you will need two of our components:

  • FlexpaLogin - to prompt the Patient to login to their health plan system & grant API access.
  • MedicationCard - To query & view the MedicationRequests after we have been granted API access.


import { FlexpaLogin, MedicationCard } from '@flexpa/login';

  <MedicationCard />

Live Demo


You can complete a full end to end patient login experience by clicking on the pre-loaded Humana example above. Use these credentials: HUser00002 and PW00002! for a test Humana health plan.

Image of the Humana claim process

Humana demonstrates a standardized login flow that all patients will experience. Patients participate in an informed consent process (reference: OAuth scopes), granting your application access to health care data like MedicationRequests or Coverage.

After the Patient accepts, our <MedicationCard /> component will be rendered. Showing some metadata around the Patient's medications that are currently active. It should look similar to this (same image as above):

Image of a sample MedicationCard component, showing active medication belonging to a patientcomponent

You have now successfully viewed a patient's prescribed medications using Flexpa! 🎉

How does it work?

The <MedicationCard /> component takes advantage of Flexpa's FHIR Hooks.

const { state: { flexpaJwt, gatewayUrl, patient } } = useFlexpaConfig();
const { data: medications, error } = useFHIRSearch<MedicationRequest>('MedicationRequest', {
  authorization: flexpaJwt,
  baseURL: gatewayUrl,
  query: {

That ultimately breaks down into two parts:

  • A correctly formatted FHIR API HTTP request associated with the resource (in this case MedicationRequest)
  • Sending that request to flexpa/gateway to seamlessly get routed to the correct destination FHIR server

the hook useFHIRSearch is actively doing both of these things, making it easy to build your own components in the future.

As an equivalent cURL request, that all looks like this:

$ curl -H "Authorization: Bearer fake-jwt"

Where to next?



  • FlexpaEndpoint and Medicare Advantage plans