implement login example

frontend/src/App.tsx

@@ -3,6 +3,8 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
+import Login from "./Login";
+
 function App() {
   const [count, setCount] = useState(0)
 
@@ -28,6 +30,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      <Login/>
     </>
   )
 }

frontend/src/Login.tsx

@@ -0,0 +1,30 @@
+import * as Auth from "aws-amplify/auth";
+
+import { useState } from "react";
+
+export const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSignIn = async () => {
+    try {
+      const ret = await Auth.signIn({ username, password });
+      console.log(ret);
+      alert("ログイン成功！");
+    } catch (err: any) {
+      setError(err.message || "ログイン失敗");
+    }
+  };
+
+  return (
+    <div>
+      <h2>ログイン</h2>
+      <input placeholder="ユーザー名" value={username} onChange={e => setUsername(e.target.value)} />
+      <input type="password" placeholder="パスワード" value={password} onChange={e => setPassword(e.target.value)} />
+      <button onClick={handleSignIn}>ログイン</button>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+    </div>
+  );
+};
+export default Login;

frontend/src/env.d.ts

@@ -0,0 +1,2 @@
+declare const __IMBUSY_BE_USERPOOL__: string;
+declare const __IMBUSY_BE_USERPOOL_CLI__: string;

frontend/src/main.tsx

@@ -1,9 +1,21 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { Amplify } from "aws-amplify";
 
-createRoot(document.getElementById('root')!).render(
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import "./index.css"
+import App from "./App.tsx"
+
+Amplify.configure({
+  Auth: {
+    Cognito: {
+      userPoolId: __IMBUSY_BE_USERPOOL__,
+      userPoolClientId: __IMBUSY_BE_USERPOOL_CLI__,
+    },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,