Hexabase（ヘキサベース）は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、認証を永続的にする方法を解説します。

インストール

インストールはnpmやyarnを使って行います。

# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js

インポート

インポートすると、 HexabaseClient というオブジェクトが取得できます。

import { HexabaseClient } from "@hexabase/hexabase-js";

初期化

HexabaseClientを初期化します。

const client = new HexabaseClient();

認証の永続性について

認証データは以下の4パターンで管理できます。

何もしない
ブラウザを再読込すると、認証情報が消えます。
セッション
ブラウザのタブごとに認証情報が管理されます。ブラウザのタブを閉じると認証情報が消えます。
ローカルストレージ
ブラウザのlocalStorageに認証情報が保存されます。ブラウザを閉じても認証情報が残ります。
Cookie
ブラウザのCookieに認証情報が保存されます。ブラウザを閉じても認証情報が残ります。

永続方式を指定する

client.setPersistence を使って、永続方式を指定します。

// LocalStorageを使う
await client.setPersistence(localStorage);

// SessionStorageを使う
await client.setPersistence(sessionStorage);

Cookieの場合は js-cookie を使って設定します。

npm install js-cookie

import Cookies from 'js-cookie';

// Cookieを使う
await client.setPersistence(Cookies);

Node.jsの場合は、 node-localstorage を利用します。

npm install node-localstorage

import { LocalStorage } from 'node-localstorage';

// LocalStorageを使う
await client.setPersistence(new LocalStorage('./scratch'));

他のライブラリを使う場合

もし他の場合を使う場合には、以下のインタフェースがあれば利用できます。

// LocalStorage/SessionStrage系
interface Persistence {
	getItem(key: string): Promise<string | null> | string | null;
	setItem(key: string, value: string): Promise<void> | void;
	removeItem(key: string): Promise<void> | void;
}

// Cookie系
interface Persistence {
	get(key: string): Promise<string | null>;
	set(key: string, value: string): Promise<void>;
	remove(key: string): Promise<void>;
}

認証

後はメールアドレスとパスワードを使って認証します。 Persistence を指定していれば、トークンを保存します。

await client.login({email, password });

認証の復元

認証情報は await client.setPersistence を実行したタイミングで復元されます。その後は client.currentUser でユーザー情報を取得できます。

await client.setPersistence(localStorage);

// ユーザー情報を取得
const user = await client.currentUser;

デモ

以下は、Cookieを使って認証情報を永続化する例です。

Cookieデモ

LocalStorageやSessionStorageを使う場合は、以下のデモを参照してください。

LocalStorageデモ

まとめ

認証情報を永続化することで、アプリケーション操作がスムーズになります。Hexabase TypeScript SDKを使って、使いやすい業務システムを構築してください。

Hexabaseには他にもバイナリファイルのアップロードやデータストアなどの機能があります。それらの機能も利用してください。

Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート