3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[React Native + Expo + Firebase] シンプルなログインフォーム(Redux使用なし)

Last updated at Posted at 2020-03-13

React Nativeとfirebaseを連携したいと考えており
ひとまずログインフォームを実装してみました。
(注)あくまでも自分のコードメモです。

こちらの記事を参考にしています。
React NativeとFirebaseを使って、iosアプリのログインフォーム機能を作ってみた

機能

firebaseのAuthentication連動
○アカウントが被ってなければ登録してログイン
○登録アカウントで入力すればログイン
※スタイルシートはとりあえず空にしています

簡易的ではあるがReactNativeとfirebaseでログイン機能を実装できました。
記事では素のReactNativeで動かしていますが、Expoを利用しても動きました。

※現在ではファンクションコンポーネントが公式でも推奨されていますが、
記事ではクラスコンポーネントで書かれているのでひとまずそれにならっています。
cf.ファンクションコンポーネントとクラスコンポーネント参考記事
[React Native + Expo] News表示アプリを作成[part1] Hooks対応

手順

プロジェクト構築後、firebaseのモジュールを追加

$ npm install --save firebase
components/LoginForm.js
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, TextInput, ActivityIndicator } from 'react-native';
import firebase from 'firebase';
 
class LoginForm extends Component {
  state = { email: '', password: '', error: '', loading: false};
 
  onButtonPress() {
    const { email, password } = this.state;
    this.setState({error: '', loading: true});
 
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((this.onLoginSuccess.bind(this)))
      .catch(() => {
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then((this.onLoginSuccess.bind(this)))
          .catch((this.onLoginFail.bind(this)));
      });
  }
 
  onLoginSuccess() {
    this.setState({
      email: '',
      password: '',
      loading: false,
      error: ''
    });
  }
 
  onLoginFail() {
    this.setState({
      loading: false,
      error: 'Authentication Failed'
    });
  }
 
  loadSpinner() {
    if (this.state.loading) {
      return <ActivityIndicator size="small" />
    }
 
    return (
      <TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle}>
        <Text>
          新規登録 or ログイン
        </Text>
      </TouchableOpacity>
    )
  }
 
  render() {
    return (
      <View>
        <View>
          <TextInput
              placeholder="user@gmail.com"
              autoCorrect={false}
              value={this.state.email}
              onChangeText={email => this.setState({ email })}
            />
        </View>
        <View style={styles.wrap}>
          <TextInput
              secureTextEntry
              placeholder="password"
              autoCorrect={false}
              value={this.state.password}
              onChangeText={password => this.setState({ password })}
            />
        </View>
 
        <View style={styles.wrap}>
          {this.loadSpinner()}
        </View>
      </View>
    )
  }
}
 
const styles = {
  // スタイルを記述
}
 
export default LoginForm;
App.js
import React, { Component } from 'react';
import {View, Text, TouchableOpacity, SafeAreaView} from 'react-native';
import firebase from 'firebase';
import LoginForm from './components/LoginForm';
 
class App extends Component {
  state = { loggedIn: null };
 
  componentDidMount() {
    const firebaseConfig = {
      // 各自生成された値を入れる
      apiKey: "Your_code",
      authDomain: "Your_code",
      databaseURL: "Your_code",
      projectId: "Your_code",
      storageBucket: "Your_code",
      messagingSenderId: "Your_code",
      appId: "Your_code"
    }
    if (!firebase.apps.length) { // これをいれないとエラーになったのでいれてます。
      firebase.initializeApp(firebaseConfig);
    }
 
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }
 
  renderForm() {
    if (this.state.loggedIn) {
      return(
        <View style={styles.wrap}>
          <TouchableOpacity onPress={() => firebase.auth().signOut()} style={styles.buttonStyle}>
            <Text style={styles.textStyle}>ログアウト</Text>
          </TouchableOpacity>
        </View>
      )
    } else {
      return(<LoginForm />)
    }
  }
 
  render() {
    return (
      <SafeAreaView>
        <View>
          <Text>{this.state.loggedIn ? "ログイン中です" : "ログインして下さい"}</Text>
        </View>
        {this.renderForm()}
      </SafeAreaView>
    )
  }
}
 
const styles = {
  // スタイルを記述
}

export default App;
3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?