無料でできる！AppwriteのOAuthカスタムドメインにまつわる設定。

Firebaseと似たサービスであるAppwriteを最近使用し始めており、情報共有のために記事を書きます。

Firebaseではカスタマイズドメインを使用するにはBlazeプランへの移行が必要ですが、Appwriteでは無料プランでもカスタマイズドメインを利用できます。これにより、GoogleのOAuth2を使用する際にも独自のドメインを表示でき、見栄えが良くなります。カスタマイズドメインが使えないとhttps://[PROJECT-ID].firebaseapp.com のようなユーザーに警戒感を与えるURLが表示されて、あまり見た目がよろしく有りません。

カスタムドメインの追加はhttps://cloud.appwrite.io/console/[PROJECT-ID]/settings/domainsから簡単に行えます。また、PlatformのOverviewタブからHostnameの項目を探して、カスタムドメインを追加する必要があります。これによりOAuthログイン時のリダイレクトがカスタムドメインでも動作するようになります。

コーディングの際には、setEndpointの引数にappwrite.[カスタムドメイン]のような形で指定する必要があります。また、OAuthログインの成功時と失敗時のリダイレクトURLも必要になります。こちらのURLはローカルとプロダクション環境で変更できるよう環境変数等で対応すると良いと思います。

import { Client, Databases } from "appwrite";

const client = new Client();

const databases = new Databases(client);

client
    .setEndpoint('https://appwrite.customdomain.com/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

// Go to OAuth provider login page
account.createOAuth2Session('google', [LINK_ON_SUCCESS], [LINK_ON_FAILURE]);