APIGatewayにCognitoを連携して認証機能を設定する

npm install amazon-cognito-identity-js

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';
import Box from '@mui/material/Box';

import EditIcon from '@mui/icons-material/Edit';

import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/DeleteOutlined';
import SaveIcon from '@mui/icons-material/Save';
import CancelIcon from '@mui/icons-material/Close';
import {
  DataGrid,
  GridRowModes,
  GridToolbarContainer,
  GridActionsCellItem,
  GridRowEditStopReasons,
} from '@mui/x-data-grid';
import {
  randomId,
} from '@mui/x-data-grid-generator';

import TextField from '@mui/material/TextField';

import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';


function App() {

  const [name, setName] = useState('');

  const getIdToken = async () =>{
    // CognitoのUser Poolの設定
    const poolData = {
      UserPoolId: 'ap-northeast-xxxxx', // あなたのCognito User Pool ID
      ClientId: 'xxxxxxx' // あなたのCognito User PoolのクライアントID
    };

    const userPool = new CognitoUserPool(poolData);
    const username = 'xxxx';
    const password = 'xxxxx';
    const authenticationData = { Username: username, Password: password };
    const authenticationDetails = new AuthenticationDetails(authenticationData);
    const userData = { Username: username, Pool: userPool };
    const cognitoUser = new CognitoUser(userData);

    return new Promise((resolve, reject) => {
      cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: (session) => {
          const idToken = session.getIdToken().getJwtToken();
          resolve(idToken);
        },
        onFailure: (err) => {
          reject(err);
        }
      });
    });
  }


  const handleSearch = async () => {

    // CognitoからIDトークンを取得
    let idToken = await getIdToken();

    try {

      const response = await axios({
        method: 'post',
        url: 'https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/test/get-user-data',
        data: {
          queryStringParameters: {
            name: name
          }
        },
        headers: {
          Authorization: idToken
        },
      });
      const usersData = JSON.parse(response.data.body);
      const editableUsersData = usersData.map(user => ({
        ...user,
        editId: user.id,
        editName: user.name,
        editAge: user.age,
        editEmail: user.email
      }));
      setRows(editableUsersData);
    } catch (error) {
      console.error('検索中にエラーが発生しました:', error);
    }
  };

  // 更新ボタンの処理
  const handleUpdate = async (updUser) => {

    // CognitoからIDトークンを取得
    let idToken = await getIdToken();

    try {
      const response = await axios({
        method: 'post',
        url: 'https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/test/update-user-data', // 実際のエンドポイントURLに置き換えてください
        data: {
          queryStringParameters: {
            id: updUser.id === undefined ? "" : updUser.id,
            name: updUser.name === undefined ? "" : updUser.name,
            age: updUser.age === undefined ? "" : updUser.age,
            email: updUser.email === undefined ? "" : updUser.email
          }
        },
        headers: {
          Authorization: idToken
        }
      });
      // 処理結果を状態にセット
      // setUpdateStatus({ ...updateStatus, [index]: '処理が正常終了しました' });
    } catch (error) {
      // エラー処理
      // setUpdateStatus({ ...updateStatus, [index]: 'エラーが発生しました' });
    }
  };

  // 新しいデータを登録する関数
  const handleRegister = async (newUser) => {
    
    // CognitoからIDトークンを取得
    let idToken = await getIdToken();

    try {
      const response = await axios({
        method: 'post',
        url: 'https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/test/update-user-data', // 実際のエンドポイントURLに置き換えてください
        data: {
          queryStringParameters: {
            id: newUser.id === undefined ? "" : newUser.id,
            name: newUser.name === undefined ? "" : newUser.name,
            age: newUser.age === undefined ? "" : newUser.age,
            email: newUser.email === undefined ? "" : newUser.email
          }
        },
        headers: {
          Authorization: idToken
        },
      });
      // 登録成功時の処理
      console.log('データが正常に登録されました。', response);
      
    } catch (error) {
      // 登録失敗時のエラー処理
      console.error('データ登録中にエラーが発生しました。', error);
    }
  };

  // ツールバーコンポーネント
  function EditToolbar(props) {
    const { setRows, setRowModesModel } = props;
  
    const handleClick = () => {
      const id = randomId();
      setRows((oldRows) => [...oldRows, { id, name: '', age: '', isNew: true }]);
      setRowModesModel((oldModel) => ({
        ...oldModel,
        [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' },
      }));
    };
  
    return (
      <GridToolbarContainer>
        <Button color="primary" startIcon={<AddIcon />} onClick={handleClick}>
          Add record
        </Button>
      </GridToolbarContainer>
    );
  }

  const [rows, setRows] = React.useState([]);
  const [rowModesModel, setRowModesModel] = React.useState({});

  const handleRowEditStop = (params, event) => {
    if (params.reason === GridRowEditStopReasons.rowFocusOut) {
      event.defaultMuiPrevented = true;
    }
  };
  //  編集ボタンクリック
  const handleEditClick = (id) => () => {
    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
  };
  // 編集ボタンクリック
  const handleSaveClick = (id) => () => {
    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
  };
  //　削除ボタンクリック
  const handleDeleteClick = (id) => () => {
    setRows(rows.filter((row) => row.id !== id));
  };
  // キャンセルボタンクリック
  const handleCancelClick = (id) => () => {
    setRowModesModel({
      ...rowModesModel,
      [id]: { mode: GridRowModes.View, ignoreModifications: true },
    });
    const editedRow = rows.find((row) => row.id === id);
    if (editedRow !== undefined && editedRow.isNew) {
      setRows(rows.filter((row) => row.id !== id));
    }
  };

    // 更新処理
  const processRowUpdate = (newRow) => {
    const updatedRow = { ...newRow, isNew: false };
    if (newRow.isNew){
      handleRegister(newRow);
    } else {
      handleUpdate(newRow);
    }
    setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));

    return updatedRow;
  };

  const handleRowModesModelChange = (newRowModesModel) => {
    setRowModesModel(newRowModesModel);
  };

  // グリッドの項目定義
  const columns = [
    { field: 'id', headerName: 'ID', width: 100, editable: true },
    { field: 'name', headerName: '名前', width: 180, editable: true },
    {
      field: 'age',
      headerName: '年齢',
      width: 80,
      align: 'left',
      headerAlign: 'left',
      editable: true,
    },
    {
      field: 'email',
      headerName: 'メール',
      width: 220,
      editable: true,
     },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 100,
      cellClassName: 'actions',
      getActions: ({ id }) => {
        const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;

        if (isInEditMode) {
          return [
            <GridActionsCellItem
              icon={<SaveIcon />}
              label="Save"
              sx={{
                color: 'primary.main',
              }}
              onClick={handleSaveClick(id)}
            />,
            <GridActionsCellItem
              icon={<CancelIcon />}
              label="Cancel"
              className="textPrimary"
              onClick={handleCancelClick(id)}
              color="inherit"
            />,
          ];
        }

        return [
          <GridActionsCellItem
            icon={<EditIcon />}
            label="Edit"
            className="textPrimary"
            onClick={handleEditClick(id)}
            color="inherit"
          />,
          <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Delete"
            onClick={handleDeleteClick(id)}
            color="inherit"
          />,
        ];
      },
    },
  ];

  return (
    <Box m={2}>
      <div>
        <h3>検索条件</h3>
        <TextField id="standard-basic" label="名前" variant="standard"
        onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
        value={name}
            onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <h3>検索結果</h3>
        {/* グリッド部分 */}
        <Box
          sx={{
            height: 500,
            width: '100%',
            '& .actions': {
              color: 'text.secondary',
            },
            '& .textPrimary': {
              color: 'text.primary',
            },
          }}
        >
        <DataGrid
          rows={rows}
          columns={columns}
          editMode="row"
          rowModesModel={rowModesModel}
          onRowModesModelChange={handleRowModesModelChange}
          onRowEditStop={handleRowEditStop}
          processRowUpdate={processRowUpdate}
          slots={{
            toolbar: EditToolbar,
          }}
          slotProps={{
            toolbar: { setRows, setRowModesModel },
          }}
        />
      </Box>
    </div>
  </Box>
  );
}

export default App;