Cognito login

.gitignore

@@ -35,4 +35,9 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-certificates
+certificates
+
+# amplify
+.amplify
+amplify_outputs*
+amplifyconfiguration*

package.json

@@ -13,11 +13,14 @@
     "all-checks": "npm run check-format && npm run check-types && npm run lint"
   },
   "dependencies": {
+    "@aws-amplify/ui": "^6.7.0",
+    "@aws-amplify/ui-react": "^6.7.0",
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^2.1.4",
     "@next/third-parties": "^14.2.5",
     "@sendgrid/mail": "^8.1.3",
     "@vis.gl/react-google-maps": "^1.1.0",
+    "aws-amplify": "^6.9.0",
     "eslint-plugin-unused-imports": "^3.2.0",
     "moment": "^2.30.1",
     "moment-strftime": "^0.5.0",
@@ -32,6 +35,8 @@
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
+    "@aws-amplify/backend": "^1.8.0",
+    "@aws-amplify/backend-cli": "^1.4.2",
     "@sayari/eslint-plugin": "^0.0.1-rc.4",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.4",
@@ -40,7 +45,11 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/underscore": "^1.11.15",
+    "aws-cdk": "^2.170.0",
+    "aws-cdk-lib": "^2.170.0",
     "classnames": "^2.5.1",
+    "constructs": "^10.4.2",
+    "esbuild": "^0.24.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
@@ -49,6 +58,7 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.3",
     "tailwindcss-debug-screens": "^2.2.1",
-    "typescript": "^5"
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2"
   }
 }

src/amplify/amplify_outputs.json

@@ -0,0 +1,29 @@
+{
+  "auth": {
+    "user_pool_id": "us-east-1_EvBbozIjd",
+    "aws_region": "us-east-1",
+    "user_pool_client_id": "kpd58387a2f9e4fe1d42sfd1q",
+    "identity_pool_id": "us-east-1:fbb09891-723a-48db-80ac-facd1ca9ec4b",
+    "mfa_methods": [],
+    "standard_required_attributes": [
+      "email"
+    ],
+    "username_attributes": [
+      "email"
+    ],
+    "user_verification_types": [
+      "email"
+    ],
+    "groups": [],
+    "mfa_configuration": "NONE",
+    "password_policy": {
+      "min_length": 8,
+      "require_lowercase": true,
+      "require_numbers": true,
+      "require_symbols": true,
+      "require_uppercase": true
+    },
+    "unauthenticated_identities_enabled": true
+  },
+  "version": "1.3"
+}

src/amplify/auth/resource.ts

@@ -0,0 +1,12 @@
+import { defineAuth } from "@aws-amplify/backend";
+
+/**
+ * Define and configure your auth resource
+ * @see https://docs.amplify.aws/gen2/build-a-backend/auth
+ */
+export const auth = defineAuth({
+  loginWith: {
+    email: true,
+    phone: true,
+  },
+});

src/amplify/backend.ts

@@ -0,0 +1,11 @@
+import { defineBackend } from "@aws-amplify/backend";
+import { auth } from "./auth/resource";
+import { data } from "./data/resource";
+
+/**
+ * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
+ */
+defineBackend({
+  auth,
+  data,
+});

src/amplify/data/resource.ts

@@ -0,0 +1,53 @@
+import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
+
+/*== STEP 1 ===============================================================
+The section below creates a Todo database table with a "content" field. Try
+adding a new "isDone" field as a boolean. The authorization rule below
+specifies that any unauthenticated user can "create", "read", "update", 
+and "delete" any "Todo" records.
+=========================================================================*/
+const schema = a.schema({
+  Todo: a
+    .model({
+      content: a.string(),
+    })
+    .authorization((allow) => [allow.guest()]),
+});
+
+export type Schema = ClientSchema<typeof schema>;
+
+export const data = defineData({
+  schema,
+  authorizationModes: {
+    defaultAuthorizationMode: "iam",
+  },
+});
+
+/*== STEP 2 ===============================================================
+Go to your frontend source code. From your client-side code, generate a
+Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY
+WORK IN THE FRONTEND CODE FILE.)
+
+Using JavaScript or Next.js React Server Components, Middleware, Server 
+Actions or Pages Router? Review how to generate Data clients for those use
+cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/
+=========================================================================*/
+
+/*
+"use client"
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "@/amplify/data/resource";
+
+const client = generateClient<Schema>() // use this Data client for CRUDL requests
+*/
+
+/*== STEP 3 ===============================================================
+Fetch records from the database and use them in your frontend component.
+(THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.)
+=========================================================================*/
+
+/* For example, in a React component, you can use this snippet in your
+  function's RETURN statement */
+// const { data: todos } = await client.models.Todo.list()
+
+// return <ul>{todos.map(todo => <li key={todo.id}>{todo.content}</li>)}</ul>

src/amplify/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

src/amplify/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+      "$amplify/*": ["../.amplify/generated/*"]
+    }
+  }
+}

src/app/[route]/@staticPage/login.tsx

@@ -0,0 +1,29 @@
+import { Authenticator } from "@aws-amplify/ui-react";
+import { Amplify } from "aws-amplify";
+import outputs from "@/amplify/amplify_outputs.json";
+import "@aws-amplify/ui-react/styles.css";
+import { signIn, SignInInput, SignInOutput } from "aws-amplify/auth";
+import { useRouter } from "next/navigation";
+
+Amplify.configure(outputs);
+
+export function LoginPage() {
+  const router = useRouter();
+  return (
+    <div style={{ paddingTop: "5em", paddingBottom: "1em" }}>
+      <Authenticator
+        services={{
+          handleSignIn: async (input: SignInInput): Promise<SignInOutput> => {
+            const result = await signIn(input);
+            if (result.isSignedIn) {
+              // TODO: redirect to wherever we were before we clicked the login button
+              router.push("/");
+            }
+            return result;
+          },
+        }}
+        hideSignUp
+      />
+    </div>
+  );
+}

src/app/[route]/@staticPage/page.tsx

@@ -4,11 +4,14 @@
 // license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
+"use client";
+
 import {
   ABOUT_US_ROUTE,
   CompanyRoute,
   CONTACT_US_ROUTE,
   DONATE_ROUTE,
+  LOGIN_ROUTE,
   PRIVACY_POLICY_ROUTE,
   TERMS_OF_USE_ROUTE,
 } from "../../../components/common";
@@ -18,8 +21,9 @@ import { DonationPage } from "./donate";
 import { TermsPage } from "./terms";
 import { PrivacyPage } from "./privacy";
 import { notFound } from "next/navigation";
+import { LoginPage } from "./login";
 
-export default async function StaticPage({
+export default function StaticPage({
   params: { route },
 }: {
   params: { route: string };
@@ -36,6 +40,8 @@ export default async function StaticPage({
       return <TermsPage />;
     case PRIVACY_POLICY_ROUTE:
       return <PrivacyPage />;
+    case LOGIN_ROUTE:
+      return <LoginPage />;
     default:
       return notFound();
   }

src/components/Navbar.tsx

@@ -10,8 +10,10 @@ import React, { useEffect, useState } from "react";
 import OffCanvasMenu from "./OffCanvasMenu";
 import { GTranslateSelect } from "./gtranslate-select";
 import QuickExit from "./quick-exit";
+import "@aws-amplify/ui-react/styles.css";
+import { SignInNavbarLink } from "./sign-in-navbar-link";
 
-export default function Navbar({ background = true }) {
+export default function Navbar({ background = true }: { background: boolean }) {
   const [open, setOpen] = useState(false);
   const [isSticky, setIsSticky] = useState(false);
 
@@ -67,6 +69,7 @@ export default function Navbar({ background = true }) {
             </a>
           </div>
           <div className="flex items-center space-x-2">
+            <SignInNavbarLink />
             <GTranslateSelect />
             <QuickExit />
           </div>

src/components/common.ts

@@ -47,13 +47,15 @@ export const CONTACT_US_ROUTE = "contact-us";
 export const DONATE_ROUTE = "donate";
 export const TERMS_OF_USE_ROUTE = "terms-of-use";
 export const PRIVACY_POLICY_ROUTE = "privacy-policy";
+export const LOGIN_ROUTE = "login";
 
 export const COMPANY_ROUTES = [
   ABOUT_US_ROUTE,
   CONTACT_US_ROUTE,
   DONATE_ROUTE,
   TERMS_OF_USE_ROUTE,
   PRIVACY_POLICY_ROUTE,
+  LOGIN_ROUTE,
 ] as const;
 
 export type CompanyRoute = (typeof COMPANY_ROUTES)[number];

src/components/locations-navbar.tsx

@@ -11,6 +11,7 @@ import QuickExit from "./quick-exit";
 import SearchForm from "./search-form";
 import { useState } from "react";
 import { GTranslateSelect } from "./gtranslate-select";
+import { SignInNavbarLink } from "./sign-in-navbar-link";
 
 export const LocationsNavbarResourceRoutes = () => {
   const [open, setOpen] = useState(false);
@@ -68,6 +69,7 @@ export const LocationsNavbarResourceRoutes = () => {
               <SearchForm />
             </div>
           </div>
+          <SignInNavbarLink />
           <QuickExit />
         </nav>
       </div>
@@ -107,6 +109,7 @@ export const LocationsNavbarCompanyRoutes = () => {
             </a>
           </div>
           <div className="flex items-center space-x-2">
+            <SignInNavbarLink />
             <GTranslateSelect />
             <QuickExit />
           </div>

src/components/sign-in-navbar-link.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react";
+import { Amplify } from "aws-amplify";
+import outputs from "@/amplify/amplify_outputs.json";
+import "@aws-amplify/ui-react/styles.css";
+
+Amplify.configure(outputs);
+
+function SignInNavbarLinkWrapper() {
+  const { user, signOut } = useAuthenticator((context) => [context.user]);
+  console.log("user", user);
+  return user ? (
+    <div style={{ display: "inline-block" }}>
+      <span className="sm:text-xs">{user.signInDetails?.loginId}</span>{" "}
+      <a className="sm:text-xs" onClick={signOut} style={{ cursor: "pointer" }}>
+        (Sign Out)
+      </a>
+    </div>
+  ) : (
+    <Link href="/login" className="sm:text-xs">
+      Sign In
+    </Link>
+  );
+}
+
+export function SignInNavbarLink() {
+  return (
+    <Authenticator.Provider>
+      <SignInNavbarLinkWrapper />
+    </Authenticator.Provider>
+  );
+}