You can connect a JavaScript single-page application (SPA) to MDriven Turnkey REST services. The documented pattern applies to pure JavaScript, React, Angular, Vue, and other SPA implementations.

An SPA obtains an ID token from an OAuth provider and sends that token to a Turnkey REST endpoint in the Authorization header.

Integration requirements

Before an external SPA can call Turnkey, address the following:

Requirement	Documented pattern
CORS	Configure Turnkey to allow calls from the external application origin.
Authentication	Obtain a JWT-format ID token from an OAuth provider and send it as a Bearer token in the Authorization header.
Origin acceptance	Allow the calling origin through the model's origin check.
Audience and user acceptance	Accept the JWT audience through the model's audience check. The documented expression returns the user name only when an approved external application has the token audience.
REST call	Call a Turnkey REST command and process the JSON response in the SPA.

The SPA documentation also identifies staying logged in with a cookie after initial authentication as an integration concern. The supplied source does not provide its configuration steps.

Configure the external application checks

The JavaScript SPA documentation gives the following model expressions for allowing a known origin and accepting a user from a known JWT audience:

-- GetAllowOriging
if KnownExternalApp.allinstances->exists(x|(x.Origin=org) and (x.IsOk)) then
  true
else
  false
endif

-- AcceptAndTransformUserName
if KnownExternalApp.allinstances->exists(x|(x.Audience=audience) and (x.IsOk)) then
  user
else
  ''
endif

Configure the corresponding external-application data:

1. Add the SPA origin and mark the entry as approved with IsOk.
2. Set Audience to the application identity supplied by the OAuth provider.
3. Configure the OAuth application registration as an SPA rather than only as a Web application.
4. Create a SysExternalJWTDefinition for each unique JWT kid value.
5. Copy the provider key's n value to the definition's modulus attribute. The source recommends making that attribute long enough for the complete value, for example 500 characters.

Call a Turnkey REST command

The following plain JavaScript example follows the documented request pattern. It obtains an ID token through the application's login flow, sends the token to the RestExample command, and processes the JSON response.

function readTurnkey() {
  getTokenPopup(loginRequest)
    .then(response => {
      const headers = new Headers();
      const bearer = `Bearer ${response.idToken}`;
      const endpoint =
        "http://localhost:5052/TurnkeyRest/Get?command=RestExample";

      headers.append("Authorization", bearer);

      return fetch(endpoint, {
        method: "GET",
        headers: headers
      });
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}

The documented example uses http://localhost:5052/TurnkeyRest/Get?command=RestExample.

Troubleshooting

• Ensure the OAuth application registration is configured as an SPA, not only as a Web application.

See also

• Connecting JavaScript SinglePageApplications to Turnkey (SPA)