flexpa/login

This is a reference covering:

Flexpa Login UI:

Events and state:

Install

You can quickly add a health plan login to any React application. You can create one of those with Next.js, create-react-app, or Remix.

Install @flexpa/login:

npm install --save @flexpa/login

Import the component and render it on a page:

import { FlexpaLogin } from "@flexpa/login"

export default <FlexpaLogin sandbox />

Note that for security reasons your application must be served from http://localhost:3000 to use sandbox mode.

A health plan member can search for their plan and <FlexpaLogin> will filter results against the FlexpaEndpoint config for flexpa/id. For sandbox.flexpa.com that means any of the public sandboxes. For example, if we search for "United" we see UnitedHealthcare. Clicking the result will start the SMART App launch flow.

<FlexpaLogin sandbox />

Loading

You can receive the FlexpaJWT at the end of the authorization flow by using the onVerified prop. Like the example below where we use onVerified with this function:

(state) => {
  console.log("Successfully retrieved JWT", state.flexpaJwt)
}

onVerified

onVerified will always be passed the FlexpaState object containing the flexpaJwt value you need to save to make authenticated requests later. The FlexpaState object will also contain other values needed to make requests manually to the Gateway.

<FlexpaLogin sandbox onVerified={(state) => {
  console.log("Successfully retrieved JWT", state.flexpaJwt);
  // feel free to safe the JWT in your app for later use, i.e:
  // setFlexpaJwt(state.flexpaJwt);
}} />

Loading

You can also use <FlexpaLogin> as a Higher Order Component. Any children you pass to it will be rendered once a login is verified, but you won't have access to the FlexpaJWT.

<FlexpaLogin sandbox>
  <header>
    <div className="text-3xl font-bold">Health plan verified</div>
  </header>
</FlexpaLogin>

Loading

Flexpa State

The state object that is returned to you in the onVerified callback will have this shape:

type FlexpaState = {
  idUrl?: string,
  gatewayUrl?: string,
  flexpaJwt?: string,
  decodedJwt?: JWTVerifyResult,
  patient?: string
};
  • idUrl: the URL for the flexpa/id server
  • gatewayUrl: the URL for the flexpa/gateway server
  • flexpaJwt: important the JWT used to make requests to gatewayUrl
    • (keep track of this!)
  • deocdedJwt: the decoded contents of the flexpaJwt
  • patient: the ID of the currently logged in Patient

Generate example JWT

Use this link to generate a Flexpa JWT on demand:

Create JWT
  • Default 5 minute timeout
  • Use HUser00007 / PW00007! as a user name and password for a test patient login
  • Works with Flexpa Gateway deployed at https://api.sandbox.flexpa.com/fhir/

See also