React Native – Firebaseでユーザ作成を実装する

Google買収後、Firebaseのドキュメントもマテリアルデザインになりいい感じです。
Firebaseは、RNがでてきてすぐに対応したBaasの一つです。途中で、SDKが使えなくなり、古いバージョンで使うみたいなハックがあったように記憶しています。今は、問題なく動く(はず)です。

今回は、ちゃんと動くどうかを確かめる上でもユーザ作成あたりをさくっと実装してみます。

Firebaseのサイトに行き、アカウントを作成し、プロジェクトを作成して、”ウェブアプリにFirebaseを追加”をクリックしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-27-13-31-30

すると、下記のようなAPIキー情報もろもろが出てくるのでメモっておきます。

忘れずにEmail認証をenableしておきましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-27-13-46-03

React Nativeプロジェクトに追加するには、

1. Firebaseモジュールのインストール

早い噂のyarnを使ってますが、npm install firebase --saveと同義。

2. 初期化

この手の外部サービスは、app/utils/Firebase.jsのようにutils以下に入れるのが私の流儀です。

3. 読み込んで使用する

今回は利用できるかのテストなので、componentDidMountにハードコードしてますが、ちゃんと使うにはテキストフィードを用意して、emailとパスワードを取得すれば良いと思います。

これをreloadすると、下記のようにユーザが作成されたのがわかると思います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-27-13-44-23

Firebaseあっさり使えましたね。APIもParseと似ているので楽に使えそうです。

Scroll to top