FusionAuth Typescript Client

Typescript Client Library

The Typescript client library allows you to integrate FusionAuth with your JavaScript application.

Regardless of the fact that this is written in TypeScript, this client supports both NodeJS and Browser environments without requiring that your application is also written in typescript.

Installing

Source Code:

NPM Package:

To install the FusionAuth Typescript Client package run: 

$ npm install @fusionauth/typescript-client

Browser bundle:

We also release a prebundled version of the client for the browser on our github releases page. This version can be simply included as an html <script> and FusionAuthClient will be available to any scripts on the page.

Examples

Please note that if you will be using this client library in front end code such as a web browser you will not have a secure way to store an API key. You may optionally pass a value of null for the API key parameter and still make API requests that do not require an API key.

The following examples assumes FusionAuth is running on http://localhost:9011 and uses an API key bf69486b-4733-4470-a592-f1bfce7af580, you will need to supply your own API key, and if you are not running FusionAuth locally, your host parameter may be different.

The following examples all use retrieveUserByEmail as a basic use case of FusionAuth. Additionally, while the examples are written in TypeScript, this does not prevent you from using raw JavaScript instead in your own application.

NodeJS

import {FusionAuthClient} from 'FusionAuthClient'
const client = new FusionAuthClient('bf69486b-4733-4470-a592-f1bfce7af580', 'https://local.fusionauth.io');

client.retrieveUserByEmail('user@example.com')
      .then(clientResponse => {
        console.log("User:", JSON.stringify(clientResponse.response.user, null, 2));
      }).catch(console.error);

You can also find this example’s source code in the typescript repo.

Browser

In the browser, all of the exported objects are under the namespace FusionAuth to prevent polluting the global namespace. 

<script src="fusionauth-typescript-client.min.js"></script>
<script>
const client = new FusionAuth.FusionAuthClient('bf69486b-4733-4470-a592-f1bfce7af580', 'https://local.fusionauth.io');

client.retrieveUserByEmail('user@example.com')
      .then(clientResponse => {
        console.log("User:", JSON.stringify(clientResponse.response.user, null, 2));
      }).catch(console.error);
</script>

You can also find this example’s source code in the typescript repo.

Hybrid

You can write the hybrid exactly the same as the NodeJS example (but keep in mind that API keys will be exported so it is not recommended to use API keys at all). The key difference in this case is the build script. Instead of just using tsc to compile and running nodejs on the resulting javascript, you will instead use a tool like browserify or webpack to build your script. This example uses browserify for simplicity.

We can easily build a hybrid project using one of two commands, each associated with the target 

# Compile for nodejs
tsc

# Compile for browser
npm run build-browser
# AKA
npx browserify example.ts --debug -p tsify -t browserify-shim -o dist/example-browser.js

You can also find this example’s source code in the typescript repo.

Related Posts

Example apps

  • Angular - The Authorization Code grant using the Angular framework
  • Device grant - An example of the Device Authorization grant
  • Family management - Family management and consent creation
  • Gatsby oauth - An example of using Gatsby with the Authorization Code grant and PKCE
  • Javascript jwt - JWT creation and decoding examples with javascript
  • Node oauth - Login with the Authorization Code grant
  • React - The Authorization Code grant using the React framework
  • Vue.js - The Authorization Code grant using the Vue.js framework