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

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

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

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

# App.js

```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;

```

大事なのは、この２行くらいでしょうか。
```js
  const [user] = useAuthState(auth);
  return <div>{user ? <LogOut /> : <LogIn />}</div>;
```
```js
  const [user] = useAuthState(auth);
```
は、react-firebase-hookのuseAuthState呼んでます。
結果、userにログイン情報が返却されます。未ログインであれば、userには、nullが入ります。

```js
  return <div>{user ? <LogOut /> : <LogIn />}</div>;
```
userがnullでない場合は、LogOutコンポーネントを表示、nullの場合は、LogInコンポーネントを表示という行になってます。条件 (三項) 演算子と言います。
下のコードと同じです。
```js
  if (user != null) {
    return (<div><LogOut /></div>)
  }else{
    return (<div><LogIn /></div>)
  }
```
一行で書ける条件 (三項) 演算子の方が見た目がスッキリします。

# firebase.js
```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
```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
```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も表示させる事ができます。
```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>
      <h3>{auth.currentUser.email}</h3>
      <h3><img src={auth.currentUser.photoURL} alt="photURL"></img></h3>
    </div>
  );
}

export default Logout
```
取得できました。
![スクリーンショット 2022-12-31 13.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/0435dc24-360c-f853-180f-fe619e62353b.png)

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



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