MTE Relay Web Client Implementation

MTE Relay Client for Web

The MTE Relay client library for web applications exposes a single function called mteFetch that is meant to mirror and extend the native fetch API available in all modern browsers. This library handles all the data encoding/decoding and you don't have to do anything special before or after the request. Simply import the method, and use it the same as you would use the native fetch method.

Instructional Videos

Installation

The MTE Relay server provides access to the client-side JavaScript library required to encode/decode data in your web application. Once the server is set up, the client JS code is available at the following routes

• /public/mte-relay-browser.js - A CommonJS module, compatible with most build systems and bundlers.
• /public/mte-relay-browser.mjs - An ESM module, compatible with modern import/export syntax.
• /public/mte-relay-browser.iife.js - An IIFE module, for traditional style applications not using a bundler.

You may include a link to the JS file using a script tag, or you may copy/paste the contents of the file into your source code.

<script src="https://<RELAY_SERVER>/public/mte-relay-browser.js"></script>

Quick Start

Use mteFetch() to send and receive data! Check the network tab to see the encrypted data.

Example:

import { mteFetch } from "./path-to/mte-relay-browser.js";

const response = await mteFetch("https://<RELAY_SERVER>/api/login", {
  method: "POST",
  body: JSON.stringify({ username: "John", password: "P@ssw0rd!" }),
});

const data = await response.json();

MTE Relay options

mteFetch() accepts three arguments:
mteFetch(url, [options,] [mteOptions])

The third argument, mteOptions, is an optional object that can be used to configure mteFetch functionality for that specific request. Each property set here is optional, and overrides the default options set in initMteRelayClient.

• encodeType
  • Type: MTE | MKE
• encodeUrl
  • Type: boolean
• encodeHeaders
  • Type: boolean | string[]
• pathPrefix
  • Type: string
• useStreaming
  • Type: boolean
  • Default: true
  • Streaming responses is the most performant way to receive responses. However, if you are expecting a redirect response and want to follow the redirect, you will need to set useStreaming: false for that specific request. This is uncommon.

Example:

mteFetch('https://<RELAY_SERVER>/api/login', {
  headers: {
    authorization: 'Bearer 123456'
  },
  method: 'POST',
  body: JSON.stringify({
    email: 'John@email.com',
    password: 'P@ssw0rd!'
}, {
  encodeType: 'MTE'
  encodeHeaders: true,
  encodeUrl: true,
  pathPrefix: "/mte-relay"
  useStreaming: true,
});