Hexabase TypeScript SDKを使ってメールアドレスの検証・登録フローを作成する #TypeScript

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();

指定したメールアドレス宛に会員登録メールを送る

まず最初にメールアドレス宛にメールを送ります。SDKでは以下のようになります。2つ目の引数はWebアプリケーションのドメインです。

// 特定のグループに追加
const group = await client.currentWorkspace!
  .group("999999"); // 追加するグループ
await group.addByEmail(email);

// メール送信
await client.invite(['user@hexabase.com'], 'your.app.com', {
	sender_address: 'no-reply@hexabase.com',
	invitation_path: 'confirm',
});

この時、ユーザーは以下のようなURLをクリックするように指定されます。

https://your.app.com/confirm?id=AAAAA

メールアドレスの検証

このURLをクリックして飛んだ先のWebアプリケーションでは、このidを用いて検証します。

await client.users.confirm(id)

ユーザー登録

あとは必要な情報を紐付ける形で、ユーザー登録処理を完了します。

await client.users.registerConfirm({
	confirmation_id: id,
  email: 'user@hexabase.com',
  username: 'user'; // オプション
  password: 'password';
  workspace: 'aaa'; // オプション
})

まとめ

メールアドレス認証フローはメールのカスタマイズもでき、すべて自分たちのアプリケーション内で完結できます。メール送信はデフォルトでSendGridですが、自分たちのメールサーバーも利用できます。

ぜひHexabaseで業務アプリケーションを開発してください。