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

前回、createreactで作ったReactを実行して編集してみました。
今回は、そのReactにログイン画面を付与してみましょう

# Firebaseを使いましょう
ログイン画面に関しては、Firebaseがいい感じの機能を提供してくれてます。
これを導入する事でサクッと実装できます。
https://firebase.google.com/
```
Firebase は、ユーザーに愛されるアプリやゲームの構築と拡大を支援するアプリ開発プラットフォームです。
Google のインフラが支える、世界中の多くの企業から高い信頼を得ているサービスです。
```
![スクリーンショット 2022-12-30 13.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/8c154a0e-652d-383a-e168-5b7b707a6cd4.png)

プロジェクトを作成をクリックします
![スクリーンショット 2022-12-30 14.01.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/361b910e-ddaf-ab51-3d43-bf1d42a1a850.png)

プロジェクト名は、my-app-firebaseにしました。
![スクリーンショット 2022-12-30 14.04.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/fa50bef1-ed27-d05b-804f-3ce35f123074.png)

「このプロジェクトで Google アナリティクスを有効にする」は、デモ版なのでオフにしましょう。
プロジェクト作成をクリックします
![スクリーンショット 2022-12-30 14.07.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/3a3bd521-411c-4e5b-fca7-d2b5ef682158.png)

続行を選択します
![スクリーンショット 2022-12-30 14.09.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/c528b98e-9291-0784-0a0e-02cc2114e8e7.png)
# Reactを編集します
App.jsに <Login /> を挿入します。これは、Loginというコンポーネントを定義しているという事です。
```
import './App.css';

function App() {
  return (
    <div className="App">
        <p>Hello React!</p>
        <Login />
      </header>
    </div>
  );
}

export default App;

```
続いて、componentsというフォルダーを作って、そこにLogin.jsを作成します。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f32333133302f37303962646266332d303732332d393732612d373738662d6235666638616365646639392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/1494d216-7cdc-8c33-c510-ee2e210d250d.png)

このLogin.jsは作りかけ途中です。
```
import React from 'react'

function Login() {
    function loginGoogle() =>{

    }
    return (
        <div>Login
            <Button onClick={loginGoogle}>googleでログイン</Button>
        </div>
    )
}
export default Login
```
# firebase web接続
続いてfirebaseに戻って接続するための設定を行います
webを選択します。</>のマークの奴です。
![スクリーンショット 2022-12-30 14.40.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/94539445-0208-ed19-f84d-c858e6587b04.png)
アプリの名前をmy-app-firebaseで登録します。アプリを登録を選択します
![スクリーンショット 2022-12-30 14.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/d5b3fe90-31d6-9024-5bb3-fbd3ea826882.png)

この画面が出ます。青の部分は、漏れると駄目なので塗りつぶしてます。大事な情報なので漏洩に気を付けてください。例えば、github等に公開するとfirebaseにアクセス出来てしまいます。大量のトラフィックで課金される恐れもありますのでご注意下さい。
![スクリーンショット 2022-12-30 14.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/f789acec-3d0c-c01e-5912-0e5226839375.png)
先ずは、記述の通り、npmを入れます。npm install firebaseです。
前回からのVisualStadioCodeを使ってる場合は、そのままターミナルで実行します。
こんな感じで成功してます。
![スクリーンショット 2022-12-30 14.49.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/e3c07a3e-e270-6978-5c29-a097b731bff1.png)

次にfirebase.jsを作成します。
![スクリーンショット 2022-12-30 15.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/0b31b788-0f68-6366-19ea-1f84ae39e34d.png)

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

const firebaseApp = firebase.initializeApp({
    ここにfirebaseConfigの中身をコピペする
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""  
})

const db = firebaseApp.firestore();

const auth = firebase.auth();
export { db, 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
```
# Logout.js実装
ついでログインした後、ログアウトできる様にLogout.jsも作っときます。
同じくcomponentsのフォルダの下に作成して下さい。
```
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修正
```
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;
```
# 起動
npm startします。
```
Failed to compile.

Module not found: Error: Can't resolve 'react-firebase-hooks/auth' in '/Users/k.morikawa/Downloads/react-try/my-app/src'
ERROR in ./src/App.js 8:0-57
Module not found: Error: Can't resolve 'react-firebase-hooks/auth' in '/Users/k.morikawa/Downloads/react-try/my-app/src'

ERROR in ./src/components/Login.js 7:0-41
Module not found: Error: Can't resolve 'react-bootstrap' in '/Users/k.morikawa/Downloads/react-try/my-app/src/components'

ERROR in ./src/components/Logout.js 6:0-41
Module not found: Error: Can't resolve 'react-bootstrap' in '/Users/k.morikawa/Downloads/react-try/my-app/src/components'

webpack compiled with 3 errors
^C
k.morikawa@gdcadminnoMacBook-Pro-2 my-app % 
```
エラーが出ます。
react-firebase-hooks/authを入れます。
```
npm install react-bootstrap-validation --save
```

react-firebase-hooksとreact-bootstrapを入れます。
```
npm install --save react-firebase-hooks 
npm install react-bootstrap-validation --save
```
再度、npm startすると動きました！

![スクリーンショット 2022-12-30 16.12.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/9c78c045-958e-3f40-55c1-9e3379b2119d.png)
![スクリーンショット 2022-12-30 16.12.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/8b0ce48b-3fe0-3e26-ac7b-276d15141b1a.png)


# まとめ
少ないコーディングでgoogle認証を使ったログインの実装ができました。ソースコードの細かい説明は入れてませんので、次回にでも細かい説明を載せていきます。
ソースコードの理解を細かくするのも必要なのですが、先ずは動く事が一番モチベーションが保たれます。細かいソースコードを気にする前に動かしてもらうおうと思ってて記事を書きました。
質問等あればぜひお願いします。

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