Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【React Native】React Native + Expo + firebaseで認証を行う

firebaseによる認証

firebaseはアプリ開発に必要な機能を一通り備えていますが、Webサービスに必須な認証ももちろん備えています。
メールアドレス・パスワードによるベーシックな認証を始め、各種SNS連携を用いたOAuth認証をサポートしています。

Firebase Authentication  |  Firebase

今回はfirebaseがサポートする認証のうち、メールアドレス・パスワードを用いた基本的な認証モジュールを試してみました。

Usage

前回の記事で、firebaseを導入していることを前提とします。

rennnosukesann.hatenablog.com

Source

// 認証状態変更時イベントハンドラ
firebase.auth().onAuthStateChanged((user) => {
  if (user != null) {
    console.log("We are authenticated now!");
  }
});

// ユーザ登録
// メールアドレスとパスワードを登録
function signup(email, password){
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(user) {
    if (user) {
      console.log("Success to Signup!")
    }
  });
}

// 認証
function login(email, password){
  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(response){
    alert("Login Success!");
  })
  .catch(function(error) {
    alert(error.message);
  });
}

// ユーザ情報
let email = `email@mail.com`;
let password = `********`;

// ユーザ登録
//signup(email, password);

// ログイン
login(email, password);

firebase.auth().createUserWithEmailAndPasswordでメールアドレス及びパスワードによるユーザ情報の登録を行います。
対応するユーザを引き当て認証・ログインを行うときは、firebase.auth().signInWithEmailAndPasswordを用いています。

上記例ではDB上にユーザ情報を登録していない状態なので、下のような画面が表示されてしまいます。

f:id:rennnosukesann:20180531233444j:plain:w300

signup()メソッドを呼ぶと、firebaseにユーザを登録します。

  signup(email, password);

f:id:rennnosukesann:20180531234126p:plain:w300

うまくいきました!

参考

rennnosukesann.hatenablog.com

Firebase Authentication  |  Firebase