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

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

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

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

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

<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "YOURS",
    authDomain: "YOURS",
    databaseURL: "YOURS",
    storageBucket: "YOURS",
    messagingSenderId: "YOURS"
  };
  firebase.initializeApp(config);
</script>

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

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

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

$ yarn add firebase

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

2. 初期化

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

import * as firebase from 'firebase';

const config = {
  apiKey: "YOURS",
  authDomain: "YOURS",
  databaseURL: "YOURS",
  storageBucket: "YOURS",
  messagingSenderId: "YOURS"
};

module.exports = firebase.initializeApp(config);

3. 読み込んで使用する

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

import firebase from './app/utils/Firebase';

export default class Kagami extends Component {

componentDidMount(){
let email = `test${new Date().getTime()}@test.com`;
let password = "hogehoge";

firebase.auth().createUserWithEmailAndPassword(email, password)
.catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  if (errorCode == 'auth/weak-password') {
    alert('The password is too weak.');
  } else {
    alert(errorMessage);
  }
  console.log(error);
});
}

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

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