Firebaseでソーシャルログイン！

前回の記事でFirebaseを使ってEmail/Password認証を作りました。
今回はFirebaseでGoogle認証とTwitter認証を作っていきたいと思います。

導入の部分だったり、コードは前回のものに継ぎ足して
実装していっているので前回の記事もぜひ参考にしてください。

前回の記事↓
2022年版！Firebase認証のやり方まとめ - 🤎uwu🤎

グーグル認証

まずはFirebase側でグーグルでの認証を使えるようにします。

Firebase コンソールで、Authenticationのセクションを開きます。
signinメッソドの画面で「新しいプロバイダを追加」をクリック、

Googleサインイン方法を有効にし、自分のメールアドレスを入力した後「保存」をクリックします。

Firebaseの準備は以上です。次にApp.jsを下記のように変えます。

import './App.css';
import { useState, useEffect } from 'react';
import { app } from './firebaseConfig';
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  signInWithPopup,
  GoogleAuthProvider,
} from 'firebase/auth';

function App() {
  const auth = getAuth();
  const googleProvider = new GoogleAuthProvider();

  const [data, setData] = useState({
    email: '',
    password: '',
  });
  const handleInputs = (event) => {
    let inputs = { [event.target.name]: event.target.value };

    setData({ ...data, ...inputs });
  };

  const handleSignin = () => {
    createUserWithEmailAndPassword(auth, data.email, data.password)
      .then((response) => {
        console.log(response.user);
      })
      .catch((err) => {
        alert(err.message);
      });
  };

  const handleLogin = () => {
    signInWithEmailAndPassword(auth, data.email, data.password)
      .then((response) => {
        console.log(response.user);
      })
      .catch((err) => {
        alert(err.message);
      });
  };

  const handleSignInWithGoogle = () => {
    signInWithPopup(auth, googleProvider)
      .then((response) => {
        console.log(response.user);
      })
      .catch((err) => {
        alert(err.message);
      });
  };

  const handlelogout = () => {
    signOut(auth);
  };

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log(user);
        alert('ログインしています');
      } else {
        alert('ログインされてません');
      }
    });
  }, [auth]);

  return (
    <div className='App-header'>
      <input
        placeholder='Email'
        name='email'
        type='email'
        className='input-fields'
        onChange={(event) => handleInputs(event)}
      />
      <input
        placeholder='Password'
        name='password'
        type='password'
        className='input-fields'
        onChange={(event) => handleInputs(event)}
      />

      <button onClick={handleSignin}>会員登録</button>
      <button onClick={handleLogin}>ログイン</button>
      <button onClick={handlelogout}>ログアウト</button>
      <button onClick={handleSignInWithGoogle}>
        グーグルで会員登録・ログイン
      </button>
    </div>
  );
}

export default App;

前回のコードから変わったのは以下の部分になります。

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  signInWithPopup,
  GoogleAuthProvider,
} from 'firebase/auth';

  const googleProvider = new GoogleAuthProvider();

  const handleSigninWithGoogle = () => {
    signInWithPopup(auth, googleProvider)
      .then((response) => {
        console.log(response.user);
      })
      .catch((err) => {
        alert(err.message);
      });
  };

      <button onClick={handleSigninWithGoogle}>
        グーグルで会員登録・ログイン
      </button>

まず最初に、signInWithPopup, GoogleAuthProviderを
firebase/authからインポートしています。

それぞれは以下のようになっています。
signInWithPopup→ポップアップウィンドウで会員登録する為の関数
GoogleAuthProvider→グーグル用の認証プロバイダーオブジェクト

ちなみにポップアップウィンドウを表示するのではなく
リダイレクトしたい場合にはsignInWithRedirect関数が用意されています。

ボタンを押すとhandleSignInWithGoogleが呼ばれ、
handleSigninWithGoogleの中でポップアップウィンドウで会員登録をする関数を呼んでいます。
引数にはauthと、Google プロバイダーオブジェクトのインスタンスを渡しています。

とまあ、こんな感じで以上です。
なんとこれだけでグーグルでの会員登録・ログインができちゃいました；

Twitter認証

事前にTwitter Developerへの登録とAPIの利用申請をする必要があります。
まだやってない方は先に行いましょう！

登録と利用申請、ProjectとAppの作り方を探してみたら
とてもわかりやすい記事が見つかったので
リンクを貼らせていただきます。ありがとうございます。

TwitterAPIを利用するための事前準備その1「Twitter developerの認証」 | 猫西ン家
 TwitterAPIを利用するための事前準備その2「プロジェクトとAppの作成」 | 猫西ン家

それぞれが終わったら
Appを作った時に表示される、API KeyとAPI key Secretを控えておきます。

(APIキーなど載せてますが消去済みです！)

次にFirebase コンソールで、Authenticationのセクションを開きます。
signinメッソドの画面で「新しいプロバイダを追加」をクリック、

Twitterサインイン方法を有効にし、先ほど控えておいた
APIキーとAPIシークレットをコピペします。
ここに表示されているコールバックURLも控えておきます。

これで準備OKです。コードに以下を追加します。

import {
  TwitterAuthProvider,
} from 'firebase/auth';

  const twitterProvider = new TwitterAuthProvider();

  const handleSignInWithTwitter = () => {
    signInWithPopup(auth, twitterProvider)
      .then((response) => {
        console.log(response.user);
      })
      .catch((err) => {
        alert(err.message);
      });
  };

    <button onClick={handleSignInWithTwitter}>
        Twitterで会員登録・ログイン
      </button>

追加したコードの内容はグーグル認証の時と同じです。
これで実行してみると、、、

きちんと登録できました。

Twitterの認証はややこしかった覚えがあったのでこんなに
簡単にできるなんてびっくりです。

ログアウトは前回の記事と同じで、

  const handlelogout = () => {
    signOut(auth);
  };

でOKです。

みなさんもぜひFirebaseでの認証やってみてください！

参考：
JavaScript による Google を使用した認証 | Firebase
Authenticate Using Twitter in JavaScript | Firebase