├── amplify
    ├── package.json
    ├── backend.ts
    ├── auth
    │   └── resource.ts
    ├── data
    │   └── resource.ts
    └── tsconfig.json
├── .eslintrc.json
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── signin
    │   │   └── page.tsx
    │   ├── globals.css
    │   ├── add
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── page.tsx
    │   ├── _actions
    │   │   └── actions.ts
    │   └── posts
    │   │   └── [id]
    │   │       └── page.tsx
    ├── components
    │   ├── auth
    │   │   ├── AuthClient.tsx
    │   │   └── Auth.tsx
    │   ├── Post.tsx
    │   ├── AddComment.tsx
    │   └── NavBar.tsx
    └── utils
    │   └── amplify-utils.ts
├── next.config.js
├── postcss.config.js
├── tailwind.config.ts
├── public
    ├── vercel.svg
    └── next.svg
├── .gitignore
├── README.md
├── tsconfig.json
└── package.json


/amplify/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "type": "module"
3 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ErikCH/CodeFirstTypeSafety/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/signin/page.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import AuthClient from "../../components/auth/AuthClient";
3 | 
4 | const SignIn = () => {
5 |   return <AuthClient/>;
6 | };
7 | 
8 | export default SignIn;
9 | 


--------------------------------------------------------------------------------
/amplify/backend.ts:
--------------------------------------------------------------------------------
1 | import { defineBackend } from "@aws-amplify/backend";
2 | import { auth } from "./auth/resource.js";
3 | import { data } from "./data/resource.js";
4 | 
5 | const backend = defineBackend({
6 |   auth,
7 |   data,
8 | });
9 | 


--------------------------------------------------------------------------------
/src/components/auth/AuthClient.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Authenticator } from "@aws-amplify/ui-react";
 4 | 
 5 | const AuthClient = () => {
 6 |   return <Authenticator />;
 7 | };
 8 | 
 9 | export default AuthClient;
10 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground-rgb: 0, 0, 0;
 7 |   --background-start-rgb: 214, 219, 220;
 8 |   --background-end-rgb: 255, 255, 255;
 9 | }
10 | 
11 | .amplify-button {
12 |   -webkit-appearance: button;
13 |   background-color: var(--amplify-internal-button-background-color);
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/auth/Auth.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React from "react";
 4 | import { Amplify } from "aws-amplify";
 5 | import config from "@/../amplify_outputs.json";
 6 | import "@aws-amplify/ui-react/styles.css";
 7 | import { Authenticator } from "@aws-amplify/ui-react";
 8 | 
 9 | Amplify.configure(config, { ssr: true });
10 | 
11 | const Auth = ({ children }: { children: React.ReactNode }) => {
12 |   return <Authenticator.Provider>{children}</Authenticator.Provider>;
13 | };
14 | 
15 | export default Auth;
16 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       backgroundImage: {
12 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 |         'gradient-conic':
14 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | # amplify
39 | .amplify
40 | amplifyconfiguration*
41 | amplify_outputs.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Full Stack Typesafe App AWS Amplify Gen 2 With Next 14
 2 | 
 3 | 👉 https://youtu.be/wcSMnICY-_8?si=sEzKQKHICjw7vicg 👈
 4 | 
 5 | This is a fullstack example app using [AWS Amplify Gen 2](https://docs.amplify.aws/gen2/). If you like to follow along check out the full [video](https://www.youtube.com/watch?v=wcSMnICY-_8).
 6 | 
 7 | To get started
 8 | 
 9 | - npm install
10 | - npx amplify sandbox
11 | - npm run dev
12 | 
13 | If you don't have an AWS account please follow the getting started instructions [here](https://docs.amplify.aws/gen2/start/account-setup/).
14 | 
15 | For a full quick start guide you can check out the [docs](https://docs.amplify.aws/gen2/start/quickstart/).
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/add/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createPost } from "@/app/_actions/actions";
 3 | 
 4 | const AddPost = () => {
 5 |   return (
 6 |     <div>
 7 |       <form
 8 |         action={createPost}
 9 |         className="p-4 flex flex-col items-center gap-4"
10 |       >
11 |         <input
12 |           type="text"
13 |           name="title"
14 |           id="title"
15 |           placeholder="Title"
16 |           className="border border-gray-200 text-gray-900 block p-2 rounded-lg"
17 |         />
18 |         <button type="submit" className="text-white bg-teal-600 rounded p-4">
19 |           Submit
20 |         </button>
21 |       </form>
22 |     </div>
23 |   );
24 | };
25 | 
26 | export default AddPost;
27 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | import Auth from "@/components/auth/Auth";
 5 | import NavBar from "@/components/NavBar";
 6 | import { isAuthenticated } from "@/utils/amplify-utils";
 7 | 
 8 | const inter = Inter({ subsets: ["latin"] });
 9 | 
10 | export const metadata: Metadata = {
11 |   title: "Title Listing",
12 |   description: "List all titles and comments app",
13 | };
14 | 
15 | export default async function RootLayout({
16 |   children,
17 | }: {
18 |   children: React.ReactNode;
19 | }) {
20 |   return (
21 |     <html lang="en">
22 |       <body className={inter.className}>
23 |         <NavBar isSignedIn={await isAuthenticated()} />
24 |         <Auth>{children}</Auth>
25 |       </body>
26 |     </html>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "code-first-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@aws-amplify/adapter-nextjs": "^1.0.8",
13 |     "@aws-amplify/ui-react": "^6.0.7",
14 |     "aws-amplify": "^6.0.8",
15 |     "next": "14.0.4",
16 |     "react": "^18",
17 |     "react-dom": "^18"
18 |   },
19 |   "devDependencies": {
20 |     "@aws-amplify/backend": "^1.0.4",
21 |     "@aws-amplify/backend-cli": "^1.2.0",
22 |     "@types/node": "^20",
23 |     "@types/react": "^18",
24 |     "@types/react-dom": "^18",
25 |     "autoprefixer": "^10.0.1",
26 |     "eslint": "^8",
27 |     "eslint-config-next": "14.0.4",
28 |     "postcss": "^8",
29 |     "tailwindcss": "^3.3.0",
30 |     "typescript": "^5.5.3"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/amplify/auth/resource.ts:
--------------------------------------------------------------------------------
 1 | import { defineAuth } from "@aws-amplify/backend";
 2 | 
 3 | /**
 4 |  * Define and configure your auth resource
 5 |  * When used alongside data, it is automatically configured as an auth provider for data
 6 |  * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 7 |  */
 8 | export const auth = defineAuth({
 9 |   loginWith: {
10 |     email: true,
11 |     // add social providers
12 |   },
13 |   /**
14 |    * enable multifactor authentication
15 |    * @see https://docs.amplify.aws/gen2/build-a-backend/auth/manage-mfa
16 |    */
17 |   // multifactor: {
18 |   //   mode: 'OPTIONAL',
19 |   //   sms: {
20 |   //     smsMessage: (code) => `Your verification code is ${code}`,
21 |   //   },
22 |   // },
23 |   userAttributes: {
24 |     /** request additional attributes for your app's users */
25 |     // profilePicture: {
26 |     //   mutable: true,
27 |     //   required: false,
28 |     // },
29 |   },
30 | });
31 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Post from "@/components/Post";
 2 | import { cookieBasedClient, isAuthenticated } from "@/utils/amplify-utils";
 3 | import { onDeletePost } from "./_actions/actions";
 4 | 
 5 | export default async function Home() {
 6 |   const isSignedIn = await isAuthenticated();
 7 |   const { data: posts } = await cookieBasedClient.models.Post.list({
 8 |     selectionSet: ["title", "id"],
 9 |     authMode: isSignedIn ? "userPool" : "identityPool",
10 |   });
11 |   console.log("posts", posts);
12 | 
13 |   return (
14 |     <main className="flex flex-col items-center justify-between p-24 w-1/2 m-auto gap-4">
15 |       <h1 className="text-2xl pb-10">
16 |         List Of All Titles{!isSignedIn ? " (From All Users)" : ""}
17 |       </h1>
18 |       {posts?.map(async (post, idx) => (
19 |         <Post
20 |           onDelete={onDeletePost}
21 |           post={post}
22 |           key={idx}
23 |           isSignedIn={isSignedIn}
24 |         />
25 |       ))}
26 |     </main>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/utils/amplify-utils.ts:
--------------------------------------------------------------------------------
 1 | import { createServerRunner } from "@aws-amplify/adapter-nextjs";
 2 | import config from "@/../amplify_outputs.json";
 3 | import { cookies } from "next/headers";
 4 | import { getCurrentUser } from "aws-amplify/auth/server";
 5 | import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/data";
 6 | import { Schema } from "../../amplify/data/resource";
 7 | 
 8 | export const cookieBasedClient = generateServerClientUsingCookies<Schema>({
 9 |   config,
10 |   cookies,
11 |   authMode: "userPool",
12 | });
13 | 
14 | export const { runWithAmplifyServerContext } = createServerRunner({
15 |   config,
16 | });
17 | 
18 | export const isAuthenticated = async () =>
19 |   await runWithAmplifyServerContext({
20 |     nextServerContext: { cookies },
21 |     async operation(contextSpec) {
22 |       try {
23 |         const user = await getCurrentUser(contextSpec);
24 |         return !!user;
25 |       } catch (error) {
26 |         return false;
27 |       }
28 |     },
29 |   });
30 | 


--------------------------------------------------------------------------------
/src/components/Post.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import { useRouter } from "next/navigation";
 4 | import { Schema } from "../../amplify/data/resource";
 5 | 
 6 | const Post = ({
 7 |   post,
 8 |   onDelete,
 9 |   isSignedIn,
10 | }: {
11 |   post: Pick<Schema["Post"]["type"], "title" | "id">;
12 |   onDelete: (id: string) => void;
13 |   isSignedIn: boolean;
14 | }) => {
15 |   const router = useRouter();
16 |   const onDetail = () => {
17 |     router.push(`posts/${post.id}`);
18 |   };
19 |   return (
20 |     <div className="border bg-gray-100 w-full p-4 rounded flex justify-between ">
21 |       <button onClick={onDetail}>
22 |         <div className="flex gap-2">
23 |           <div>Title:</div>
24 |           <div>{post.title}</div>
25 |         </div>
26 |       </button>
27 |       <input type="hidden" name="id" id="id" value={post.id} />
28 |       {isSignedIn ? (
29 |         <button
30 |           className="text-red-500 cursor-pointer"
31 |           onClick={() => onDelete(post.id)}
32 |         >
33 |           X
34 |         </button>
35 |       ) : null}
36 |     </div>
37 |   );
38 | };
39 | 
40 | export default Post;
41 | 


--------------------------------------------------------------------------------
/src/components/AddComment.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useState } from "react";
 3 | import { Schema } from "../../amplify/data/resource";
 4 | 
 5 | const Comments = ({
 6 |   addComment,
 7 |   post,
 8 |   paramsId,
 9 | }: {
10 |   addComment: (content: string, post: Schema["Post"]['type'], paramsId: string) => void;
11 |   post: Schema["Post"]['type'];
12 |   paramsId: string;
13 | }) => {
14 |   const [comment, setComment] = useState("");
15 | 
16 |   const add = (event: React.FormEvent<HTMLFormElement>) => {
17 |     event.preventDefault();
18 |     setComment("");
19 |     addComment(comment, post, paramsId);
20 |   };
21 |   return (
22 |     <form onSubmit={add} className="p-4 flex flex-col items-center gap-4">
23 |       <input
24 |         type="text"
25 |         name="comment"
26 |         id="comment"
27 |         placeholder="add comment"
28 |         value={comment}
29 |         onChange={(e) => setComment(e.target.value)}
30 |         className="border border-gray-200 text-gray-900 block p-2 rounded-lg"
31 |       />
32 |       <button type="submit" className="text-white bg-teal-600 rounded p-4">
33 |         Submit
34 |       </button>
35 |     </form>
36 |   );
37 | };
38 | 
39 | export default Comments;
40 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/app/_actions/actions.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { cookieBasedClient } from "@/utils/amplify-utils";
 4 | import { redirect } from "next/navigation";
 5 | import { revalidatePath } from "next/cache";
 6 | import { Schema } from "../../../amplify/data/resource";
 7 | 
 8 | export async function deleteComment(formData: FormData) {
 9 |   const id = formData.get("id")?.toString();
10 |   if (!id) return;
11 |   const { data: deletedComment } =
12 |     await cookieBasedClient.models.Comment.delete({
13 |       id,
14 |     });
15 |   console.log("deleted", deletedComment);
16 | }
17 | 
18 | export async function addComment(
19 |   content: string,
20 |   post: Schema["Post"]["type"],
21 |   paramsId: string
22 | ) {
23 |   if (content.trim().length === 0) return;
24 |   const { data: comment } = await cookieBasedClient.models.Comment.create({
25 |     postId: post.id,
26 |     content,
27 |   });
28 | 
29 |   console.log("got comment", comment);
30 |   revalidatePath(`/post/${paramsId}`);
31 | }
32 | 
33 | export async function onDeletePost(id: string) {
34 |   const { data, errors } = await cookieBasedClient.models.Post.delete({
35 |     id,
36 |   });
37 | 
38 |   console.log("data deleted", data, errors);
39 |   revalidatePath("/");
40 | }
41 | 
42 | export async function createPost(formData: FormData) {
43 |   const { data, errors } = await cookieBasedClient.models.Post.create({
44 |     title: formData.get("title")?.toString() || "",
45 |   });
46 |   console.log("create post data", data, errors);
47 |   redirect("/");
48 | }
49 | 


--------------------------------------------------------------------------------
/amplify/data/resource.ts:
--------------------------------------------------------------------------------
 1 | import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
 2 | 
 3 | /*== STEP 1 ===============================================================
 4 | The section below creates a Todo database table with a "content" field. Try
 5 | adding a new "isDone" field as a boolean. The authorization rules below
 6 | specify that owners, authenticated via your Auth resource can "create",
 7 | "read", "update", and "delete" their own records. Public users,
 8 | authenticated via an API key, can only "read" records.
 9 | =========================================================================*/
10 | const schema = a.schema({
11 |   Post: a
12 |     .model({
13 |       title: a.string().required(),
14 |       comments: a.hasMany("Comment", "postId"),
15 |       owner: a
16 |         .string()
17 |         .authorization((allow) => [allow.owner().to(["read", "delete"])]),
18 |     })
19 |     .authorization((allow) => [allow.guest().to(["read"]), allow.owner()]),
20 |   Comment: a
21 |     .model({
22 |       content: a.string().required(),
23 |       postId: a.id(),
24 |       post: a.belongsTo("Post", "postId"),
25 |       owner: a
26 |         .string()
27 |         .authorization((allow) => [allow.owner().to(["read", "delete"])]),
28 |     })
29 |     .authorization((allow) => [allow.guest().to(["read"]), allow.owner()]),
30 | });
31 | 
32 | export type Schema = ClientSchema<typeof schema>;
33 | 
34 | export const data = defineData({
35 |   schema,
36 |   authorizationModes: {
37 |     defaultAuthorizationMode: "identityPool",
38 |     // API Key is used for a.allow.public() rules
39 |     apiKeyAuthorizationMode: {
40 |       expiresInDays: 30,
41 |     },
42 |   },
43 | });
44 | 


--------------------------------------------------------------------------------
/src/app/posts/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { cookieBasedClient, isAuthenticated } from "@/utils/amplify-utils";
 2 | import { revalidatePath } from "next/cache";
 3 | import { addComment, deleteComment } from "@/app/_actions/actions";
 4 | import AddComment from "@/components/AddComment";
 5 | import React from "react";
 6 | import { Schema } from "../../../../amplify/data/resource";
 7 | 
 8 | const Posts = async ({ params }: { params: { id: string } }) => {
 9 |   if (!params.id) return null;
10 | 
11 |   const isSignedIn = await isAuthenticated();
12 |   const { data: post } = await cookieBasedClient.models.Post.get(
13 |     {
14 |       id: params.id,
15 |     },
16 |     {
17 |       selectionSet: ["id", "title"],
18 |       authMode: isSignedIn ? "userPool" : "identityPool",
19 |     }
20 |   );
21 |   console.log("post", post);
22 |   const { data: allComments } = await cookieBasedClient.models.Comment.list({
23 |     selectionSet: ["content", "post.id", "id"],
24 |     authMode: isSignedIn ? "userPool" : "identityPool",
25 |   });
26 | 
27 |   const comments = allComments.filter(
28 |     (comment) => comment.post.id === params.id
29 |   );
30 | 
31 |   if (!post) return null;
32 | 
33 |   return (
34 |     <div className="flex flex-col items-center p-4 gap-4">
35 |       <h1 className="text-2xl font-bold">Post Information:</h1>
36 |       <div className="border rounded w-1/2 m-auto bg-gray-200 p-4 ">
37 |         <h2>Title: {post.title}</h2>
38 |       </div>
39 | 
40 |       {isSignedIn ? (
41 |         <AddComment
42 |           addComment={addComment}
43 |           paramsId={params.id}
44 |           post={post as Schema["Post"]["type"]}
45 |         />
46 |       ) : null}
47 | 
48 |       <h1 className="text-xl font-bold">Comments:</h1>
49 |       {comments.map((comment, idx) => (
50 |         <div key={idx}>
51 |           <div className="w-96 p-2 rounded border bg-yellow-100 flex justify-between">
52 |             <div>{comment.content}</div>
53 |             <form
54 |               action={async (formData) => {
55 |                 "use server";
56 |                 await deleteComment(formData);
57 |                 revalidatePath(`/posts/${params.id}`);
58 |               }}
59 |             >
60 |               <input type="hidden" name="id" id="id" value={comment.id} />
61 |               {isSignedIn ? (
62 |                 <button type="submit" className="text-red-950">
63 |                   X
64 |                 </button>
65 |               ) : null}
66 |             </form>
67 |           </div>
68 |         </div>
69 |       ))}
70 |     </div>
71 |   );
72 | };
73 | 
74 | export default Posts;
75 | 


--------------------------------------------------------------------------------
/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import Link from "next/link";
 5 | import { Button, Divider, Flex } from "@aws-amplify/ui-react";
 6 | import { signOut } from "aws-amplify/auth";
 7 | import { useRouter } from "next/navigation";
 8 | import { Hub } from "aws-amplify/utils";
 9 | import { useTransition } from "react";
10 | 
11 | export default function NavBar({ isSignedIn }: { isSignedIn: boolean }) {
12 |   const [authCheck, setAuthCheck] = useState(isSignedIn);
13 |   const [isPending, startTransition] = useTransition();
14 | 
15 |   const router = useRouter();
16 |   useEffect(() => {
17 |     const hubListenerCancel = Hub.listen("auth", (data) => {
18 |       switch (data.payload.event) {
19 |         case "signedIn":
20 |           setAuthCheck(true);
21 |           startTransition(() => router.push("/"));
22 |           startTransition(() => router.refresh());
23 |           break;
24 |         case "signedOut":
25 |           setAuthCheck(false);
26 | 
27 |           startTransition(() => router.push("/"));
28 |           startTransition(() => router.refresh());
29 |           break;
30 |       }
31 |     });
32 | 
33 |     return () => hubListenerCancel();
34 |   }, [router]);
35 | 
36 |   const signOutSignIn = async () => {
37 |     if (authCheck) {
38 |       await signOut();
39 |     } else {
40 |       router.push("/signin");
41 |     }
42 |   };
43 |   const defaultRoutes = [
44 |     {
45 |       href: "/",
46 |       label: "Home",
47 |     },
48 |     {
49 |       href: "/add",
50 |       label: "Add Title",
51 |       loggedIn: true,
52 |     },
53 |   ];
54 | 
55 |   const routes = defaultRoutes.filter(
56 |     (route) => route.loggedIn === authCheck || route.loggedIn === undefined
57 |   );
58 | 
59 |   return (
60 |     <>
61 |       <Flex
62 |         direction="row"
63 |         justifyContent="space-between"
64 |         alignItems="center"
65 |         padding={"1rem"}
66 |       >
67 |         <Flex as="nav" alignItems="center" gap="3rem" margin="0 2rem">
68 |           {routes.map((route) => (
69 |             <Link key={route.href} href={route.href}>
70 |               {route.label}
71 |             </Link>
72 |           ))}
73 |         </Flex>
74 |         <Button
75 |           variation="primary"
76 |           borderRadius="2rem"
77 |           className="mr-4"
78 |           onClick={signOutSignIn}
79 |         >
80 |           {authCheck ? "Sign Out" : "Sign In"}
81 |         </Button>
82 |       </Flex>
83 |       <Divider size="small"></Divider>
84 |     </>
85 |   );
86 | }
87 | 


--------------------------------------------------------------------------------
/amplify/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 15 |     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 16 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 17 |     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
 18 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 19 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
 20 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 21 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
 22 |     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
 23 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 24 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 25 |     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 26 | 
 27 |     /* Modules */
 28 |     "module": "node16",                                  /* Specify what module code is generated. */
 29 |     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
 30 |     "moduleResolution": "node16",                        /* Specify how TypeScript looks up a file from a given module specifier. */
 31 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 32 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 33 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 34 |     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 35 |     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
 36 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 37 |     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
 38 |     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
 39 |     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
 40 |     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
 41 |     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
 42 |     "resolveJsonModule": true,                           /* Enable importing .json files. */
 43 |     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
 44 |     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 45 | 
 46 |     /* JavaScript Support */
 47 |     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
 48 |     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
 49 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 50 | 
 51 |     /* Emit */
 52 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 53 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 54 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 55 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 56 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 57 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
 58 |     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
 59 |     // "removeComments": true,                           /* Disable emitting comments. */
 60 |     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
 61 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 62 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
 63 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 64 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 65 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 66 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 67 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 68 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 69 |     // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
 70 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
 71 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 72 |     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
 73 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 74 |     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 75 | 
 76 |     /* Interop Constraints */
 77 |     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 78 |     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
 79 |     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
 80 |     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
 81 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 82 |     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
 83 | 
 84 |     /* Type Checking */
 85 |     "strict": true,                                      /* Enable all strict type-checking options. */
 86 |     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
 87 |     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
 88 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 89 |     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
 90 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 91 |     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
 92 |     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
 93 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 94 |     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
 95 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
 96 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 97 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 98 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 99 |     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
100 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
101 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
102 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
103 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
104 | 
105 |     /* Completeness */
106 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
107 |     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------