Merge pull request #28 from kameiryohei/try-auth-ssr

Supabaseの認証をサーバー側で実現し、依存箇所を修正

app/allPost/[id]/components/CourseReview.tsx

@@ -1,5 +1,4 @@
 "use client";
-import useUser from "app/hooks/useUser";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useRouter } from "next/navigation";
@@ -9,8 +8,9 @@ import toast from "react-hot-toast";
 
 interface CourseReviewProps {
   id: number;
+  auth_id: string;
 }
-const CourseReview = ({ id }: CourseReviewProps) => {
+const CourseReview = ({ id, auth_id }: CourseReviewProps) => {
   const {
     register,
     handleSubmit,
@@ -21,7 +21,6 @@ const CourseReview = ({ id }: CourseReviewProps) => {
       authorId: 0,
     },
   });
-  const { user } = useUser();
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -36,8 +35,8 @@ const CourseReview = ({ id }: CourseReviewProps) => {
         method: "POST",
         body: JSON.stringify({
           title: data.title,
-          id: Number(id),
-          authorId: user?.id,
+          planId: Number(id),
+          auth_id: auth_id,
         }),
         headers: {
           "Content-Type": "application/json",

app/allPost/[id]/components/ReviewSection.tsx

@@ -3,8 +3,9 @@ import ParticleReview from "./ParticleReview";
 
 interface ReviewSectionProps {
   id: number;
+  auth_id: string;
 }
-const ReviewSection = ({ id }: ReviewSectionProps) => {
+const ReviewSection = ({ id, auth_id }: ReviewSectionProps) => {
   return (
     <>
       <p className="font-semibold text-center text-2xl">
@@ -13,7 +14,7 @@ const ReviewSection = ({ id }: ReviewSectionProps) => {
         </span>
       </p>
       <div>
-        <CourseReview id={id} />
+        <CourseReview id={id} auth_id={auth_id} />
         <ParticleReview id={id} />
       </div>
     </>

app/allPost/[id]/page.tsx

@@ -6,6 +6,7 @@ import UserInfoCard from "./components/UserInfoCard";
 import PlanDetails from "./components/PlanDetails";
 import CourseListSection from "./components/CourseListSection";
 import ReviewSection from "./components/ReviewSection";
+import useSeverUser from "app/hooks/useSeverUser";
 
 async function getDetailData(id: number, host: string) {
   const res = await fetch(`${config.apiPrefix}${host}/api/plan/${id}`, {
@@ -21,6 +22,8 @@ const SpecificPage = async ({ params }: { params: { id: number } }) => {
   const host = headers().get("host");
   const CourseData = await getDetailData(params.id, host!);
   const { title, content, user, courses } = CourseData;
+  const { session } = useSeverUser();
+  const auth_id = await session();
   return (
     <>
       <div className="py-8 px-10 md:px-36 relative">
@@ -58,7 +61,7 @@ const SpecificPage = async ({ params }: { params: { id: number } }) => {
         </div>
 
         {/* レビューセクション */}
-        <ReviewSection id={params.id} />
+        <ReviewSection id={params.id} auth_id={auth_id!} />
       </div>
     </>
   );

app/api/auth/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "utils/prisma/prismaClient";
+
+//サーバーサイドからプロフィール情報を取得するAPI(動作確認済み)
+export const GET = async (req: NextRequest) => {
+  try {
+    await prisma.$connect();
+    const auth_id: string = req.url.split("/auth/")[1];
+    const user = await prisma.user.findUnique({
+      where: { auth_id },
+      select: {
+        id: true,
+        auth_id: true,
+        name: true,
+        email: true,
+        university: true,
+        faculty: true,
+        department: true,
+        grade: true,
+      },
+    });
+    return NextResponse.json({ message: "Success", user }, { status: 200 });
+  } catch (error) {
+    return NextResponse.json({ message: "Error", error }, { status: 500 });
+  } finally {
+    await prisma.$disconnect();
+  }
+};

app/api/auth/confirm/route.ts

@@ -0,0 +1,28 @@
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { type NextRequest } from "next/server";
+
+import { redirect } from "next/navigation";
+import { createClient } from "utils/supabase/sever";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const token_hash = searchParams.get("token_hash");
+  const type = searchParams.get("type") as EmailOtpType | null;
+  const next = searchParams.get("next") ?? "/";
+
+  if (token_hash && type) {
+    const supabase = createClient();
+
+    const { error } = await supabase.auth.verifyOtp({
+      type,
+      token_hash,
+    });
+    if (!error) {
+      // redirect user to specified redirect URL or root of app
+      redirect(next);
+    }
+  }
+
+  // redirect the user to an error page with some instructions
+  redirect("/error");
+}

app/api/plan/detail/[id]/route.ts

@@ -5,13 +5,14 @@ export async function GET(
   req: Request,
   { params }: { params: { id: string } }
 ) {
-  const userId = params.id;
+  const auth_id = params.id;
   const CourseDetailData = await prisma.user.findUnique({
     where: {
-      id: parseInt(userId),
+      auth_id: auth_id,
     },
-    include: {
+    select: {
       plans: true,
+      auth_id: true,
     },
   });
   return NextResponse.json(CourseDetailData);

app/api/plan/route.ts

@@ -4,9 +4,23 @@ import { NextResponse } from "next/server";
 // Plan投稿用API
 export const POST = async (req: Request) => {
   try {
-    const { title, content, userId } = await req.json();
+    const { title, content, auth_id } = await req.json();
 
     await prisma.$connect();
+
+    const getUser = await prisma.user.findUnique({
+      where: {
+        auth_id: auth_id,
+      },
+      select: {
+        id: true,
+      },
+    });
+    if (!getUser?.id) {
+      return NextResponse.json({ message: "User not found" }, { status: 404 });
+    }
+    const userId = getUser.id;
+
     const post = await prisma.plan.create({
       data: {
         title,

app/api/post/[id]/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+import prisma from "utils/prisma/prismaClient";
+
+// ユーザーが投稿したレビューを取得するAPI
+export async function GET(
+  req: Request,
+  { params }: { params: { id: string } }
+) {
+  const auth_id = params.id;
+  const data = await prisma.user.findUnique({
+    where: {
+      auth_id: auth_id,
+    },
+    select: {
+      posts: {
+        select: {
+          id: true,
+          title: true,
+          content: true,
+          createdAt: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json(data);
+}

app/api/post/coursepost/route.ts

@@ -3,19 +3,32 @@ import prisma from "utils/prisma/prismaClient";
 
 export const POST = async (req: Request) => {
   try {
-    const { title, id, authorId } = await req.json();
+    const { title, planId, auth_id } = await req.json();
 
     await prisma.$connect();
+
+    const author = await prisma.user.findUnique({
+      where: {
+        auth_id: auth_id,
+      },
+      select: {
+        id: true,
+      },
+    });
+
     const post = await prisma.post.create({
       data: {
         title: title,
-        planId: id,
-        authorId: authorId,
+        planId: planId,
+        authorId: author?.id,
       },
     });
     return NextResponse.json({ message: "Success", post }, { status: 201 });
   } catch (error) {
-    return NextResponse.json({ message: "Error", error }, { status: 500 });
+    return NextResponse.json(
+      { message: "エラーが発生しました", error },
+      { status: 500 }
+    );
   } finally {
     await prisma.$disconnect();
   }