Firebase AuthenticationでReactアプリにTwitter/Facebook/Google認証をつける

Firebase Authenticationを使うとTwitter, Facebook, Googleでのログインを極めて簡単に実装できます。

例としてReactのSPAに対して、Twitterによる認証認可を組み込んでみます。

Twitterでアプリ作成

1. Apps for Twitterでアプリ作成

   https://apps.twitter.com で新規アプリを作成します。

2. Consumer KeyとConsumer Secretの確認

Consumer Key(API Key)とConsumer Secret(API Secret)を取得します。

1. E-mail

Firebase AuthenticationでTwitterのE-mailアドレスを取得する場合は次の設定をします。

Settingで Privacy Policy URL と Request email addresses from users を設定する。

Permissionsで

FirebaseのWebコンソール

1. FirebaseのWebコンソールを開いて、AuthenticationタブからTwitterを有効化します。

1. APIキーとAPIシークレットにTwitterのページのAPI KeyとAPI Secretを入力して保存します。

2. このページのコールバックURLをTwitterのCallback URLに入力します。

Reactアプリの作成

React & Flux入門で紹介しているツールを使います。

npx starter-react-flux init
npm start

認証認可の実装

1. FirebaseのSDKの追加

   npm install --save firebase
   

2. configの作成

   app/config.jsを新規作成します。

   import firebase from 'firebase/app';
   import 'firebase/firestore'; //firestoreを使う場合
   import 'firebase/auth';
   
   firebase.initializeApp({
     apiKey: '*****',
     authDomain: '*****',
     projectId: '*****'  
   });
   
   export const providerGoogle = new firebase.auth.GoogleAuthProvider();
   export const providerFacebook = new firebase.auth.FacebookAuthProvider();
   export const providerTwitter = new firebase.auth.TwitterAuthProvider();
   export const db = firebase.firestore(); //firestroeを使う場合
   export default firebase;
   

3. ページにログイン、ログアウトボタンとそれぞれのハンドラを追加します。

   app/components/Content.js

   	略
     handleLogin = () => {
       SampleActionCreator.loginWithTwitter();
     }
   
     handleLogout = () => {
       SampleActionCreator.logout();
     }
   
     render() {
       return (
         <div style={this.props.style}>
              略
           <Button onClick={this.handleLogin}>Login</Button>
           <Button onClick={this.handleLogout}>Logout</Button>        
         </div>
       );
     }
   

4. Action Creatorでログインやログアウトを実装します。

   import firebase, { providerTwitter } from '../config';
   
   	略
   
     loginWithTwitter() {
       firebase.auth().signInWithRedirect(providerTwitter);
       firebase.auth().getRedirectResult().then(result => {
         console.log(result);
         //TODO: ex. storeに送信, DB保存,...
       }).catch(error => {
         console.log(error);
       });
     },  
   

FluxについてはReact & Flux入門に書いているので割愛します。

ログイン状態に応じて表示コンポーネントを切り替える方法は色々あるので割愛します。

1. デプロイして確認

   npm runb build && firebase deploy
   

   

   ログインするとWebコンソールでユーザーが確認できます。

   

Google, Facebook

OAuthのスコープなど細かな設定は各プロバイダに合わせる必要がありますが、まったく同じ方法でいけます。

Google

import { providerGoogle } from '../config';
  :
firebase.auth().signInWithRedirect(providerGoogle);

Facebook

import { providerFacebook } from '../config';
  :
firebase.auth().signInWithRedirect(providerFacebook);

Tips

ログイン中のユーザー

firebase.auth().onAuthStateChanged(user => {
  console.log("onAuth", user);
});

or 

const current user = firebase.auth().currentUser

ログアウト(Firebaseから)

firebase.auth().signOut().then(result => {
	console.log(result);
}).catch(error => {
	console.log(error);
});

その他

認証認可やユーザー管理に関するかなりの機能が簡単に実装できます。

• ユーザー管理 https://firebase.google.com/docs/auth/web/manage-users?hl=ja
  • 確認メール送信、ユーザーの詳細情報取得、再認証、etc
• アカウントのリンク https://firebase.google.com/docs/auth/web/account-linking?hl=ja
  • 初回は匿名ユーザで使わせてあとから認証ユーザへのアップデートする場合など
• 認証の有効期間 https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja