implement login example

frontend/package.json

@@ -11,11 +11,13 @@
     "deploy": "./deploy.sh"
   },
   "dependencies": {
+    "aws-amplify": "^6.15.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",

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 { Amplify } from "aws-amplify";
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
 
-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>,

frontend/vite.config.ts

@@ -4,4 +4,8 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    __IMBUSY_BE_USERPOOL__    : JSON.stringify(process.env.IMBUSY_BE_USERPOOL),
+    __IMBUSY_BE_USERPOOL_CLI__: JSON.stringify(process.env.IMBUSY_BE_USERPOOL_CLI),
+  },
 })

infra/deployment.ts

@@ -91,6 +91,14 @@ const codebuild = new aws.codebuild.Project(`${prefix}-codebuild`, {
     image: "aws/codebuild/standard:7.0",
     type: "LINUX_CONTAINER",
     environmentVariables: [
+      {
+        name: "IMBUSY_REGION",
+        value: aws.config.region!,
+      },
+      {
+        name: "IMBUSY_BE_USERPOOL",
+        value: backend.userPool.id,
+      },
       {
         name: "IMBUSY_BE_USERPOOL_CLI",
         value: backend.userPoolClient.id,
@@ -107,10 +115,6 @@ const codebuild = new aws.codebuild.Project(`${prefix}-codebuild`, {
         name: "IMBUSY_FE_BUCKET",
         value: frontend.bucket.bucket,
       },
-      {
-        name: "IMBUSY_FE_USERPOOL_URL",
-        value: frontend.userPoolUrl,
-      },
     ],
   },
   serviceRole: role.arn,

infra/frontend.ts

@@ -76,12 +76,3 @@ export const cloudfront = new aws.cloudfront.Distribution(`${prefix}-cloudfront`
     cloudfrontDefaultCertificate: true,
   },
 });
-
-
-// ---- cognito domain ----
-const userPoolDomain = new aws.cognito.UserPoolDomain(`${prefix}-userpool-domain`, {
-    domain: "imbusy-auth",
-    userPoolId: backend.userPool.id,
-});
-export const userPoolUrl =
-    pulumi.interpolate`https://${userPoolDomain.domain}.auth.${aws.config.region}.amazoncognito.com`;

infra/index.ts

@@ -6,11 +6,13 @@ import * as frontend from "./frontend";
 
 import "./deployment";
 
+export const region = aws.config.region;
+
 export const feBucket   = frontend.bucket.bucket;
 export const feDomain   = frontend.cloudfront.domainName;
 export const beBucket   = backend.bucket.bucket;
 export const beLambda   = backend.lambda.name;
 export const beEndpoint = backend.api.apiEndpoint;
 
-export const feUserPoolUrl = frontend.userPoolUrl;
+export const beUserPool    = backend.userPool.id;
 export const beUserPoolCli = backend.userPoolClient.id;

setenv

@@ -4,11 +4,13 @@ cd $(dirname $0)
 
 cd infra/
 
+export REGION=$(pulumi stack output region)
+
 export IMBUSY_BE_BUCKET=$(pulumi stack output beBucket)
 export IMBUSY_BE_LAMBDA=$(pulumi stack output beLambda)
 export IMBUSY_FE_BUCKET=$(pulumi stack output feBucket)
 
+export IMBUSY_BE_USERPOOL=$(pulumi stack output beUserPool)
 export IMBUSY_BE_USERPOOL_CLI=$(pulumi stack output beUserPoolCli)
-export IMBUSY_FE_USERPOOL_URL=$(pulumi stack output feUserPoolUrl)
 
 cd ../