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を使って認証情報を永続化する例です。
LocalStorageやSessionStorageを使う場合は、以下のデモを参照してください。
まとめ
認証情報を永続化することで、アプリケーション操作がスムーズになります。Hexabase TypeScript SDKを使って、使いやすい業務システムを構築してください。
Hexabaseには他にもバイナリファイルのアップロードやデータストアなどの機能があります。それらの機能も利用してください。