Skip to main content

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.

Installation​

Install the client library from NPM:

npm i mte-relay-browser-public-client

Import or require mteFetch from the package.

import { mteFetch } from "mte-relay-browser-public-client";

The source code can be found in multiple formats in our Github repository.

  • /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.

Quick Start​

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

Example:

import { mteFetch } from "mte-relay-browser-public-client";

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,
});

Axios compatible Implementation​

Axios is a popular network request library created before the standardization of fetch() and many web applications still use it. To use MTE Relay with an existing code base that uses Axios, we recommend switching to Redaxios, which uses fetch() under the hood, but provides the same API as Axios.

First, try to replace Axios with Redaxios and test that the application still works appropriately. Then you may provide a custom fetch function, which is where you can provide mteFetch.

Install Redaxios:

npm i redaxios

Replace Axios with Redaxios, and provide a custom fetch function.

import redaxios from "redaxios";
import { mteFetch } from "mte-relay-browser-public-client";

const apiClient = redaxios.create({
  baseURL: "https://mte-relay-server.domain.com",
  fetch: mteFetch, // use mteFetch instead of native fetch
});