React Native + expo + FirebaseでFBログインを実装してみる

経緯

最近React Native + expo を触っていて、手習いとしてFirebase + FBログインを実装したのでメモ
本当はAuth0を使おうと思っていたけど時間がなかったのでFirebaseで。

やっていく

基本的には、以下の通りに進めていく。今回はiOSを試してみる。
Facebook - Expo Documentation

まずはFacebook Developer ページからアプリケーションを作成して、Facebookログイン プロダクトを追加する。 その後、プラットフォームを追加 > iOS を選択して、「バンドルID」にhost.exp.Exponent を指定する。
こんな感じ

設定画面

そして、そのうち使うので、アプリIDと、シークレットキーをメモっておこう。

FBの設定

次にFirebase Authentication を設定する。
Firebaseに登録をして、FBログインを有効にする。

スクショとったときにはもう有効になってしまっていた 笑

そして、ここに先ほどメモったIDとシークレットキーを入れる。

設定内容

最後に、ガンガンReact Nativeのコードをかいていく。
まずは expo init して雛形を作成して、App.jsを以下のように変えていく。
npm install firebase なども忘れずに。
apiKey などの config部分は、Firebaseのプロジェクト概要部分から、Webを選んで中身を置き換えてくださいな。

プロジェクト設定部分

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import * as firebase from 'firebase';

var config = {
  apiKey: "APIKEY",
  authDomain: "HOGE.firebaseapp.com",
  databaseURL: "HUGA.firebaseio.com",
  projectId: "IDID",
  storageBucket: "PIYO.appspot.com",
  messagingSenderId: "NUMBER"
};
firebase.initializeApp(config);

import { Container, Content, Header, Form, Input, Item, Button, Label } from 'native-base'; 

export default class App extends React.Component {
  constructor(props){
    super(props)

    this.state = ({
      email: '',
      password: ''
    })
  }

  signUpUser = ( email, password ) => {

    try {
      if(this.state.password.length<6)
      {
        alert('パスワードが短いよー 6文字以上にしてくれー')
        return;
      }

      firebase.auth().createUserAndRetrieveDataWithEmailAndPassword(email, password)

    } catch (error) {
      console.log(error.toString());
    }

  }

  loginUser = ( email, password ) => {

    try {
      firebase.auth().signInWithEmailAndPassword(email, password).then(function (user) {
        console.log(user); 
      })
    } catch (error) {
       console.log(error.toString());
    }

  }

  async loginWithFacebook() {

    const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('632193713899286', { permissions: ['public_profile'] })

    if (type == 'success') {
      const credential = firebase.auth.FacebookAuthProvider.credential(token)

      firebase.auth().signInWithCredential(credential).catch((error) => {
        console.log(error)
      })
    }
  }

  render() {
    return (
      <Container style={styles.container}>
        <Form>
          <Item>
            <Label>Email</Label>
            <Input
              autoCorrect={false}
              autoCapitalize="none"
              onChangeText={(email) => this.setState({ email })} 
            />
          </Item>

          <Item>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              autoCorrect={false}
              autoCapitalize="none"
              onChangeText={(password) => this.setState({password})}
            />
          </Item>

          <Button style={{ marginTop: 10 }}
            full
            rounded
            success
            onPress={() => this.loginUser(this.state.email, this.state.password)}
          >
            <Text style={{ color: 'white' }}>Login</Text>
          </Button>

          <Button style={{ marginTop: 10 }}
            full
            rounded
            primary
            onPress={() => this.signUpUser(this.state.email, this.state.password)}
          >
            <Text style={{ color: 'white' }}>Sign Up</Text>
          </Button>

          <Button style={{ marginTop: 10 }}
            full
            rounded
            primary
            onPress={() => this.loginWithFacebook()}
          >
            <Text style={{ color: 'white' }}>Login with Facebook</Text>
          </Button>

        </Form>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    padding: 10
  },
});

結果

動いたぜ。いえーい

動いた