uwu

プログラミングの備忘録を書いています。誰かの為になれば幸いです

2022年版!Firebase認証のやり方まとめ

以前Laravel Sanctumを使ってAPI認証を作成した時から
ずっと気になっていたFirebase、やっと触ることができました😊嬉しいです!


今回はFirebaseについて勉強したのでその中からReactを使った
Firebaseによる認証のやり方をまとめていきたいと思います。


今回はEmailとパスワードでの認証を作成していきます。

Firebaseとは

Googleが提供しているモバイル・Webアプリケーション向けのプラットフォームです。
認証機能、DB機能、ホスティング、ストレージ機能、メッセージ通知機能など
全ての機能がGoogleのインフラ技術に支えられており、大規模なアプリケーションも構築することができます

Firebase認証とは

Firebase Authentication は、安全な認証システムの構築を容易にし、
エンドユーザーのログインや初期登録のエクスペリエンスを向上させることを目的としています。
メールアドレスとパスワードの組み合わせ、電話認証、
GoogleTwitterFacebookGitHub のログインなどに対応したエンドツーエンドの ID ソリューションです。



では早速やっていきましょう!

アカウントの登録


Firebaseに登録するには、Googleのアカウントが必要です。
あらかじめGoogleアカウントを作っておきましょう。登録は無料です。
Firebase利用料金は
Firebase Pricing
今回は無料のSparkプランを使っていきます。

まずはFirebaseの公式ページにアクセスします。
Firebase

アクセスしたら、Googleアカウントでログインします。

プロジェクトの作成


ログインしたらコンソールからプロジェクトを作成します。


プロジェクト名を入力しFirebaseの規約を読んだら
チェックボックス両方にチェックをいれ続行をクリックします。



Googleアナリティクスを使うか聞かれます。
今回は使わないのでoffにします。

そして「プロジェクトを作成」をクリックします。



しばらく待つとプロジェクトの作成が完了します!

アプリの登録


次に作成したプロジェクトにアプリの登録を行っていきます。

タグマークのボタンをクリック。



アプリのニックネーム(後で変更可)を入力しアプリを登録をクリック。





この画面になったらコードをコピペして控えておき
コンソールに進むをクリック。




Authenticationメソッドの追加


こちらの画面のAuthenticationをクリック。


次にSign-in methodをクリックしEmail/Passwordを追加します。


Email/Passwordを有効にするをクリックして保存します。



Firebaseの準備が整ったのでReactアプリを作成していきます。



Reactアプリの作成


今回はcreate-react-appを使ってReactアプリを作成します。

npx create-react-app react-test-firebase


作成できたらfirebaseをインストールしていきます。

npm install firebase


インストールしたらsrcディレクトリ内にconfigファイル「firebaseConfig.js」を作成し、
アプリを作成した時に控えておいたコードをコピペします。


const appの前にexportをつけてエクスポートできるようにします。


// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 'AIzaSyBTSHwkPMgl9tyRaR2lUpozh6vQTppVLOM',
  authDomain: 'fir-test-e3b9d.firebaseapp.com',
  projectId: 'fir-test-e3b9d',
  storageBucket: 'fir-test-e3b9d.appspot.com',
  messagingSenderId: '805344665134',
  appId: '1:805344665134:web:b0b9c47a4f76533e3d49bf',
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

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


会員登録機能の実装


App.jsを下記のコードに変更します。


import './App.css';
import { useState } from 'react';
import { app } from './firebaseConfig';
import {
  getAuth,
  createUserWithEmailAndPassword,
} from 'firebase/auth';

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

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

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

  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={handleSubmit}>会員登録</button>
      <button onClick={handleLogin}>ログイン</button>
      <button onClick={handlelogout}>ログアウト</button>
    </div>
  );
}

export default App;


コードについて説明します。

import {
  getAuth,
  createUserWithEmailAndPassword
} from 'firebase/auth';

getAuth→認証済みのユーザーかどうかをチェックする関数です。
createUserWithEmailAndPassword→emailとpasswordでアカウントを作る関数です。


これらの関数をfirebase/authからインポートしています。

  const auth = getAuth();


authにgetAuth()関数を格納しています。


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


handleSubimitの中でcreateUserWithEmailAndPassword()関数を渡し、
引数にauth, email, passwordを入れて渡しています。



詳しくはこちらのDocを参考にしてください。
Authenticate with Firebase using Password-Based Accounts using Javascript




少し見た目を変えるためのコードをApp.cssに記述します。
不要な方は記述しなくても大丈夫です。

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.input-fields{
  margin: 10px;
}
<||



*** 会員登録の実行


会員登録ボタンを押して実行してみます。
FirebaseのAuthentication→Usersで確認してみるときちんと登録されていました!



[f:id:sukithewestie:20220818112210p:plain]



メールアドレスの形式が違うとエラーをはいてくれたり
同じユーザーを登録しようとするとエラーをはいてくれたりかなり便利です。



*** ログイン・ログアウトの実装



ログイン・ログアウト機能を実装した後のコードはこんな感じです。

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

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

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

  const handleSubmit = () => {
    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);
  };

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

  // ログインしているか確認用
  useEffect(() => {
    onAuthStateChanged(auth, (data) => {
      if (data) {
        alert('ログインしています');
      } else {
        alert('ログインされてません');
      }
    });
  }, []);

  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={handleSubmit}>会員登録</button>
      <button onClick={handleLogin}>ログイン</button>
      <button onClick={handlelogout}>ログアウト</button>
    </div>
  );
}

export default App;

新たに3つの関数をfirebase/authよりインポートしています。


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


signInWithEmailAndPassword→EmailとPasswordでログインする為の関数
signOut→ログアウトする為の関数
onAuthStateChanged→現在ログインしているユーザーの監視・情報を取得する関数


onAuthStateChangedで取得できる情報↓

// uid
user.uid

// 名前
user.displayName

// プロフィール画像
user.photoURL

// メール
user.email

// 認証済みのメールアドレス化
user.emailVerified

// 電話番号
user.phoneNumber

// 匿名認証かどうか
user.isAnonymous

signInWithEmailAndPassword関数とsignOut関数部分の実装は
もはや言うまでもないので省略します。



今回はApp.js内で会員登録・ログイン・ログアウト全て完結させた
横着実装なのでuseEffectを使って今の状態をわかりやすくしています。

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


これでログインとログアウトボタンを押して実行してみると上手くいきました!


おわりに

Firebase認証最高です。次はFirebaseを使ってのソーシャルログイン認証だったり、
DBを使ってみたいと思います。