【React + Node.js】ログイン認証機能（実装編）

#!/bin/bash

files=(
".env"
"src/assets/Login.css"
"src/pages/LoginForm.tsx"
)

for file in "${files[@]}"; do
  touch "$file"
done

$ chmod +x create-dev-files.sh
$ ./create-dev-files.sh

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import LoginForm from './pages/LoginForm';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <LoginForm />
  </React.StrictMode>
);

reportWebVitals();

# crypto-js
REACT_APP_ENCRYPTION_USER = xxxxxxxxxx
REACT_APP_ENCRYPTION_PASS = yyyyyyyyyy

import React, { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';
import CryptoJS from 'crypto-js';
import { Container, Row, Col, Form, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../assets/styles/Login.css';

/**
 * @brief     ログイン認証画面
 * @returns   コンポーネント
 */
const LoginForm: React.FC = () => {
  const [userInfo, setUserInfo] = useState<{username: string; password: string;}>( {
    username: '',
    password: ''
  });

  /**
   * @brief     'username'及び 'passwprd'変更ハンドラ
   * @param {*} e イベント
   */
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setUserInfo( {
      ...userInfo,
      [name]: value
    });
  };


  /**
   * @brief     ログインボタン押下ハンドラ
   * @param {*} e イベント
   */
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    /**
     * --------------------------------------------------------------------------------------------------------------
     * Encryption of user information
     * --------------------------------------------------------------------------------------------------------------
     */
    const encryptedUserInfo: {
      username: string | undefined;
      password: string | undefined;
    } = {
      username: undefined,
      password: undefined
    }

    const encryptionUserKey: string | undefined = process.env.REACT_APP_ENCRYPTION_USER;
    const encryptionPassKey: string | undefined = process.env.REACT_APP_ENCRYPTION_PASS;

    encryptedUserInfo.username = CryptoJS.AES.encrypt(userInfo.username, (encryptionUserKey as string)).toString();
    encryptedUserInfo.password = CryptoJS.AES.encrypt(userInfo.password, (encryptionPassKey as string)).toString();
    /**
     * --------------------------------------------------------------------------------------------------------------
     */

    axios.post('http://localhost:5000/api/auth/login', encryptedUserInfo, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then((res) => {
        if (res.data.status === 200) {
          // OK
        }
        else {
          // NG
        }
        console.log(`${res.status}: ${res.headers}`)
      })
      .catch((err) => {
        console.error(`[Error] ${err}`);
      });
  };
  

  return (
    <Container fluid className="d-flex vh-100">
      <Row className="m-auto align-self-center w-100">
        <Col xs={12} md={6} lg={4} className="mx-auto">
          <div className="p-4 shadow rounded">
            <h3 className="text-center mb-4">
              ログイン認証画面
            </h3>
            <Form onSubmit={handleSubmit}>
              <Form.Group controlId="formBasicUsername" className="mb-3 mt-5">
                <Form.Control 
                  type="text" 
                  name="username" 
                  placeholder="username"
                  value={userInfo.username}
                  onChange={handleChange} 
                  required 
                  autoComplete="username" 
                />
              </Form.Group>
              <Form.Group controlId="formBasicPassword" className="mb-3 mt-4">
                <Form.Control 
                  type="password" 
                  name="password"
                  placeholder="password" 
                  value={userInfo.password}
                  onChange={handleChange} 
                  required 
                  autoComplete="current-password" 
                />
              </Form.Group>
              <Button variant="skeleton" type="submit" className="btn btn-outline-info w-100 mt-4">
                Login
              </Button>
            </Form>
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default LoginForm;

::placeholder {
	text-align: center;
}

#!/bin/bash

files=(
".env"
"config/db.ts"
"controllers/authLoginController.ts"
"models/authLoginModels.ts"
"routes/authLoginRoutes.ts"
)

for file in "${files[@]}"; do
  touch "$file"
done

$ chmod +x create-dev-files.sh
$ ./create-dev-files.sh

import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import { router as authRoutes } from './src/routes/authLoginRoutes';

dotenv.config();

const app: express.Express = express();
app.use(express.json());
app.use(cors());

// POST: ログイン認証
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

# Database
DB_HOST     = localhost
DB_USER     = user
DB_PASSWORD = pass
DB_NAME     = workspace

# crypto-js
ENCRYPTION_USER = xxxxxxxxxx
ENCRYPTION_PASS = yyyyyyyyyy

import express from 'express';
import { authLogin }  from '../controllers/authLoginController';

export const router = express.Router();

// POST: ログイン認証
router.post('/login', authLogin);

import { Request, Response } from 'express';
import { RowDataPacket } from 'mysql2';
import CryptoJS from 'crypto-js';
import { getUserInfo } from '../models/authLoginModel'


/**
 * @brief     ログイン認証
 * @param req   リクエスト
 * @param res   レスポンス
 * @returns   ログイン認証結果
 */
export async function authLogin (req: Request, res: Response)
{
  let userInfo: 
  {
    username: string,
    password: string
  };
  userInfo = {...req.body};

  /**
   * ------------------------------------------------------------------------------------------------------------------------
   * Decryption of user information
   */
  const bytesUser: CryptoJS.lib.WordArray = CryptoJS.AES.decrypt(userInfo.username, (process.env.ENCRYPTION_USER as string));
  const bytesPass: CryptoJS.lib.WordArray = CryptoJS.AES.decrypt(userInfo.password, (process.env.ENCRYPTION_PASS as string));
  
  const decryptedUser: string = bytesUser.toString(CryptoJS.enc.Utf8);
  const decryptedPass: string = bytesPass.toString(CryptoJS.enc.Utf8);
  /**
   * ------------------------------------------------------------------------------------------------------------------------
   */

  try 
  {
    const [results, fields] = await getUserInfo(decryptedUser, decryptedPass);
    let rows: RowDataPacket[] = (results as RowDataPacket[]);
    
    if (rows.length === 0) 
    {
      res.status(401).json('ユーザー認証に失敗しました。');
      return;
    }
    
    res.status(200).json('ユーザー認証が成功しました。');
    rows.forEach(result => {
      console.log(`ユーザーID: ${result.id}, ユーザー名: ${result.username}, パスワード: ${result.password}`);
    });
  } 
  catch (err) 
  {
    res.status(500).json(`データベースからユーザー情報の取得に失敗しました。(${err})`);
  }

  return res;
};

import { pool } from '../config/db';
import { QueryResult, FieldPacket } from 'mysql2';


/**
 * @brief     ユーザー情報取得
 * @param username    ユーザー名
 * @param password    パスワード
 * @returns   クエリ実行結果
 */
export async function getUserInfo (username: string, password: string,): Promise<[QueryResult, FieldPacket[]]> 
{
  const query = 'SELECT * FROM users WHERE username = ? AND password = ?';
  return pool.query(query, [username, password]);
};

# 今回、開発環境編で作成したコンテナIDを検索
$ docker ps -a | grep ws_mysql

---
fasdoifuasdf   mysql:latest                   "docker-entrypoint.s…"   12 days ago     Exited (0) 47 seconds ago                 ws_mysql


# 該当のコンテナIDを指定して起動
$ docker start fasdoifuasdf

# フロントエンド側（React）プロジェクトへ移動
$ cd login-form/form

# nodeを有効化して実行
$ nvm use
$ npm start


---
Compiled successfully!

You can now view form in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

# バックエンド側（Node.js）プロジェクトへ移動
$ cd login-form/server

# nodeを有効化して実行
$ nvm use
$ npm start


---
> server@1.0.0 start
> npx ts-node app.ts

Server running on port 5000
データベースに接続に成功しました