ユーザー認証を作る3ステップ

React NativeとFirebaseだけでアプリのユーザー認証をしてみました。
手順は3ステップ！簡単です！

Firebaseでプロジェクトを作成する
Firebaseで認証を追加する
React Nativeでサインアップ・ログインする

１. Firebaseでプロジェクトを作成する

まずは、Firebase（）側の準備、プロジェクトを追加し、任意の設定で作成してください。
https://console.firebase.google.com/u/1/?hl=ja

左上の設定アイコンをマウスホバーし、プロジェクト設定をクリックします。
Setting画面が開き、全般タブのプロジェクトIDとウェブAPIキー、クラウドメッセージングタブの送信者IDはこの後使用します。

2. Firebaseで認証を追加する

左ナビゲーションの、Authenticationをクリックし、ログイン方法タブで任意のログイン方法を有効に設定します。今回は、メールアドレス/パスワードを選択します。

3. React Nativeでサインアップ・ログインする

続いて、アプリに実装していきます。
任意のディレクトリに firebase.js を作成し、以下のようにサインアップとログインのためのメソッドを記述します。そして、実装する画面のボタンのonPress処理などで、サインアップメソッドを呼び出しましょう。
※ api-key、project-id、sender-idには、上で確認したウェブAPIキー、プロジェクトID、送信者IDをそれぞれ入力してください。

firebase.js

import firebase from 'firebase';

// Firebase 初期化
const config = {
    apiKey: "api-key",
    authDomain: "project-id.firebaseapp.com",
    databaseURL: "https://project-id.firebaseio.com",
    projectId: "project-id",
    storageBucket: "project-id.appspot.com",
    messagingSenderId: "sender-id",
};
firebase.initializeApp(config);

// ユーザ登録
export const signup = (email, password) => {
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(user => {
        if (user) {
            console.log("Success to Signup")
        }
    })
    .catch(error => {
        console.log(error);
    })
}

// メール＆パスワードログイン
export const login = (email, password) => {
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(response => {
        alert("Login Success!");
    })
    .catch(error => {
        alert(error.message);
    });
}


export default firebase;

Sigunup.js

// ... 省略

// ユーザー登録の実装
import { signup } from 'tapioca/components/firebase';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };
    }

    // ユーザー登録のメソッド
    signUp = () => {
        const { email, password } = this.state;
        signup(email, password);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputWrap}>
                    <Text style={styles.label}>メールアドレス</Text>
                    <TextInput
                        style={styles.textInput}
                        onChangeText={(email) => this.setState({email})}
                        value={this.state.email}
                        placeholder="メールアドレスを入力してください"
                        placeholderTextColor="#777"
                    />
                </View>

                <View style={styles.inputWrap}>
                    <Text style={styles.label}>パスワード</Text>
                    <TextInput
                        style={styles.textInput}
                        onChangeText={(password) => this.setState({password})}
                        value={this.state.password}
                        placeholder="パスワードを入力してください"
                        placeholderTextColor="#777"
                    />
                </View>

                <View style={{paddingTop: 32}}>
                    <Button
                        title="送信"
                        onPress={() => this.signUp()} // ユーザー登録メソッドを実行
                    />
                </View>
            </View>
        )
    }
}

// ... 省略

export default Login;

ログインは、上記のSignup.jsにおいて、sigunupメソッドを、loginメソッドに置き換えるだけです！

// ユーザーログインの実装
import { login } from 'tapioca/components/firebase';

// ... 省略

    // ユーザーログインのメソッド
    login = () => {
        const { email, password } = this.state;
        login(email, password);
    }

// ... 省略

まとめ

firebaseを使ったユーザー認証実装は、とても簡単でした。
面倒なバックエンド処理を全てfirebaseがやってくれます。
LaravelでjwtAuthを実装した時は、トークン再発行などで少し苦戦したので、このお手軽さには感動です。

React Native と Firebaseでユーザー認証を作る

ユーザー認証を作る3ステップ

１. Firebaseでプロジェクトを作成する

2. Firebaseで認証を追加する

3. React Nativeでサインアップ・ログインする

まとめ