part 7

ynonp · Dec 15, 2023 · 772709f · 772709f
1 parent 3f8eb37
commit 772709f
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 25 deletions.
diff --git a/.env b/.env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@auth0/nextjs-auth0": "3.5.0",
     "@prisma/client": "5.7.0",
     "next": "14.0.4",
     "prisma": "5.7.0",

diff --git a/prisma/dev.db b/prisma/dev.db
diff --git a/src/app/api/auth/[auth0]/route.ts b/src/app/api/auth/[auth0]/route.ts
@@ -0,0 +1,3 @@
+import { handleAuth } from '@auth0/nextjs-auth0';
+
+export const GET = handleAuth();
diff --git a/src/app/db/posts.ts b/src/app/db/posts.ts
@@ -1,9 +1,13 @@
 "use server"
 
 import { PrismaClient } from '@prisma/client'
+import { getSession } from '@auth0/nextjs-auth0';
 const prisma = new PrismaClient()
 
-export async function createPost(author: string, text: string) {
+export async function createPost(text: string) {
+  const session = await getSession();
+  const author = session?.user?.name || "[Guest User]";
+
   const res = await prisma.post.create({
     data: {
       author,

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from 'next'
+import { UserProvider } from '@auth0/nextjs-auth0/client';
+
 import { Inter } from 'next/font/google'
 import TopMenu from './servermenu';
 import './globals.css'
@@ -18,10 +20,12 @@ export default function RootLayout({
   // @ts-ignore
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <TopMenu />
-        {children}
-      </body>
+      <UserProvider>
+        <body className={inter.className}>
+          <TopMenu />
+          {children}
+        </body>
+      </UserProvider>
     </html>
   )
 }
diff --git a/src/app/posts/newpost.tsx b/src/app/posts/newpost.tsx
@@ -9,9 +9,8 @@ export default () => {
   const textFieldRef = useRef<HTMLInputElement>(null);
 
   async function handleCreate(formData: FormData) {
-    const author = formData.get('author') as string;
     const text = formData.get('text') as string;
-    const newPost = await createPost(author, text);
+    const newPost = await createPost(text);
     console.log(newPost);
     if (textFieldRef.current) {
       textFieldRef.current.value = '';
@@ -21,11 +20,6 @@ export default () => {
 
   return (
     <form action={handleCreate}>
-      <label>
-        Author: 
-        <input type="text" name="author" className="text-black"/>
-      </label>
-
       <label>
         Text: 
         <input type="text" name="text" className="text-black" ref={textFieldRef} />

diff --git a/src/app/users/client_user.tsx b/src/app/users/client_user.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useUser } from '@auth0/nextjs-auth0/client';
+
+export default function ProfileClient() {
+  const { user, error, isLoading } = useUser();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
+
+  return (
+    user && (
+      <div>
+        <h1>User Info from Client Component</h1>
+        <img src={user.picture} alt={user.name} />
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+      </div>
+    )
+  );
+}
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
@@ -0,0 +1,20 @@
+import ClientUser from './client_user';
+import ServerUser from './server_user';
+
+export default () => {
+  return (
+    <div>
+      <h1>User Page</h1>
+      <p>
+        <a href="/api/auth/login">Login</a>
+      </p>
+      <p>
+        <a href="/api/auth/logout">Logout</a>
+      </p>  
+      <hr />    
+      <ClientUser />
+      <hr />
+      <ServerUser />
+    </div>
+  )
+}
diff --git a/src/app/users/server_user.tsx b/src/app/users/server_user.tsx
@@ -0,0 +1,23 @@
+import { getSession } from '@auth0/nextjs-auth0';
+
+export default async function ProfileServer() {
+  const session = await getSession();
+
+  if (session) {
+    const user = session.user;
+    return (
+      user && (
+          <div>
+            <h1>User Info from Server Component</h1>
+            <img src={user.picture} alt={user.name} />
+            <h2>{user.name}</h2>
+            <p>{user.email}</p>
+          </div>
+      )
+  )
+  } else {
+    return (
+      <p>Please log in to see your info</p>
+    )
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { handleAuth } from '@auth0/nextjs-auth0';

		export const GET = handleAuth();