未経験からエンジニアになりたい人へ:Reactでログイン画面を作ってみようのソースコード解説

未経験からエンジニアになりたい人へ:Reactでログイン画面を作ってみよう
でcreatereactから、Reactアプリでログイン画面を実装しました。

動かなかった方ご連絡下さい。

今回は、ソースコード解説です。

App.js

import './App.css';
import LogIn from "./components/Login";
import LogOut from "./components/Logout";
import { auth } from "./firebase.js";
import { useAuthState } from "react-firebase-hooks/auth";

function App() {
  const [user] = useAuthState(auth);
  return <div>{user ? <LogOut /> : <LogIn />}</div>;
}

export default App;

大事なのは、この２行くらいでしょうか。

  const [user] = useAuthState(auth);
  return <div>{user ? <LogOut /> : <LogIn />}</div>;

  const [user] = useAuthState(auth);

は、react-firebase-hookのuseAuthState呼んでます。
結果、userにログイン情報が返却されます。未ログインであれば、userには、nullが入ります。

  return <div>{user ? <LogOut /> : <LogIn />}</div>;

userがnullでない場合は、LogOutコンポーネントを表示、nullの場合は、LogInコンポーネントを表示という行になってます。条件 (三項) 演算子と言います。
下のコードと同じです。

  if (user != null) {
    return (<div><LogOut /></div>)
  }else{
    return (<div><LogIn /></div>)
  }

一行で書ける条件 (三項) 演算子の方が見た目がスッキリします。

firebase.js

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const firebaseApp = firebase.initializeApp({
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""  
})

const db = firebaseApp.firestore();

const auth = firebase.auth();
export { db, auth };

dbやfirestoreは使ってないので削除しても良いです。
ここのコードは、特に難しいものはありませんね。
firebase.initializeAppで初期化して、firebase.auth()で認証のためのauthを取得してます。

LogIn.js

import React from 'react'
import { auth } from "../firebase.js";
import firebase from "firebase/compat/app"
import { Button} from 'react-bootstrap';


function Login() {
    function loginGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }
    return (
        <div>
            <Button onClick={loginGoogle}>googleでログイン</Button>
        </div>
    )
}
export default Login

このコンポーネントは、App.jsでuseAuthStateがnullだった時、つまり未認証だった時に表示されるコンポーネントです。
ボタンが表示されて、onClickのloginGoogleは、ボタンがクリックされた時に実行されます。
loginGoogleでは、firebase.auth.GoogleAuthProviderでproviderを生成して、auth.signInWithPopupでログインのためのポップアップ画面を表示してます。

LogOut.js

import React from 'react'
import { auth } from "../firebase.js";
import { Button} from 'react-bootstrap';

function Logout() {
  return (
    <div>
      <Button onClick={() => auth.signOut()}>ログアウト</Button>
      <h3>{auth.currentUser.displayName}</h3>
    </div>
  );
}

export default Logout

このコンポーネントは、App.jsでuseAuthStateがnullでない時、つまり認証済みログイン済みだった時に表示されるコンポーネントです。
ボタンが表示されて、onClickのauth.signOut()は、ボタンがクリックされた時に実行されます。
auth.signOut()は、ログイン状態をサインアウトしてくれる処理です。
その下では、auth.currentUser.displayName　でログインユーザーの名前を表示してます。
こちらは、displayNameだけでなく、emailやphotoURLも表示させる事ができます。

import React from 'react'
import { auth } from "../firebase.js";
import { Button} from 'react-bootstrap';

function Logout() {
  return (
    <div>
      <Button onClick={() => auth.signOut()}>ログアウト</Button>
      <h3>{auth.currentUser.displayName}</h3>
      <h3>{auth.currentUser.email}</h3>
      <h3><img src={auth.currentUser.photoURL} alt="photURL"></img></h3>
    </div>
  );
}

export default Logout

取得できました。

まとめ

とっても簡単なソースコードでした。これらは、createreactの素晴らしさと、firebaseの素晴らしさの融合です。ライブラリ、TOOLに感謝ですね。
質問等あればぜひお願いします。

最後に

未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。