Nhost JS SDK

Nhost JS SDK is used to handle Auth and Storage.

#Installation

$ npm install nhost-js-sdk

or

$ yarn add nhost-js-sdk

#Setup

/src/utils/nhost
import nhost from "nhost-js-sdk";

const config = {
  base_url: "https://backend-REPLACE.nhost.app",
};

nhost.initializeApp(config);

const auth = nhost.auth();
const storage = nhost.storage();

export { auth, storage };

To use cookies (not recomended), use this config:

const config = {
  base_url: "https://backend-REPLACE.nhost.app",
  use_cookies: true,
};

#Usage auth and storage across in your app

import { auth, storage } from "src/utils/nhost";

#Auth

Register

auth.register(email, password);

Register with user_data

auth.register(email, password, { display_name: "Joe Doe" });

Login

auth.login(email, password);

Logout

auth.logout();

onAuthStateChanged

auth.onAuthStateChanged((logged_in) => {
  console.log("auth state changed!");
  console.log({ logged_in });
});

Check if user is authenticated

Can return one of [true, false, null].

  • true means users is logged in
  • false means users is not logged in
  • null means that nhost-js-sdk is trying to login the user, but don't know yet if the user is logged in or not.
auth.isAuthenticated();

Get JWT token

Get the full JWT token

auth.getJWTToken();

Get JWT claim

Get specific claim from the JWT token.

auth.getClaim("x-hasura-user-id");

Activate account

auth.activate(<ticket>);

Change email address

Note: The user must be logged in.

auth.changeEmail(new_email);

Request new email change

auth.changeEmailRequest(new_email);

Change to requested email

auth.changeEmailChange(ticket);

Change password

auth.changePassword(old_password, new_password);

Request new password

auth.changePasswordRequest(email);

Change password using ticket

auth.changePasswordChange(new_password, ticket);

Generate MFA QR-code

Note: User must be logged in.

auth.MFAGenerate();

Enable MFA

auth.enable(code);

Disable MFA

auth.enable(code);

Login using TOTP

Note: ticket comes from the auth.login() response if the user has MFA enabled.

auth.MFATotp(code, ticket);

#Storage

Upload

storage.put(path, file, metadata?, onUploadProgress?);

Delete

storage.delete(path);

Get metadata

storage.getMetadata(path);

#Setup in different environments

React Native

Install:

$ yarn add @react-native-community/async-storage

More info: https://react-native-community.github.io/async-storage/docs/install.

import nhost from "nhost-js-sdk";
import AsyncStorage from "@react-native-community/async-storage";

const config = {
  base_url: "https://backend-xxxx.nhost.app",
  client_storage: AsyncStorage,
  client_storage_type: "react-native",
};

nhost.initializeApp(config);

const auth = nhost.auth();
const storage = nhost.storage();

export { auth, storage };

Ionic

import nhost from "nhost-js-sdk";
import { Plugins } from "@capacitor/core";
const { Storage } = Plugins;

const config = {
  base_url: "https://backend-xxxx.nhost.app",
  client_storage: Storage,
  client_storage_type: "capacitor",
};

nhost.initializeApp(config);

const auth = nhost.auth();
const storage = nhost.storage();

export { auth, storage };

Expo

Install:

$ expo install expo-secure-store

More info: https://docs.expo.io/versions/latest/sdk/securestore/.

import nhost from "nhost-js-sdk";
import * as SecureStore from "expo-secure-store";

const config = {
  base_url: "https://backend-xxxx.nhost.app",
  client_storage: SecureStore,
  client_storage_type: "expo-secure-storage",
};

nhost.initializeApp(config);

const auth = nhost.auth();
const storage = nhost.storage();

export { auth, storage };