chore/migrate_supabaseAuth

.env

@@ -10,6 +10,9 @@
 DATABASE_URL="postgresql://postgres.ofytfuhgugaqsahbrrxs:[email protected]:6543/postgres"
 DIRECT_URL="postgresql://postgres.ofytfuhgugaqsahbrrxs:[email protected]:5432/postgres"
 
+NEXT_PUBLIC_SUPABASE_URL="https://ofytfuhgugaqsahbrrxs.supabase.co"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9meXRmdWhndWdhcXNhaGJycnhzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTk5OTI2MjYsImV4cCI6MjAzNTU2ODYyNn0.uCgT44A55ijDC0PrhkNs-kFGwKBb3bfbSWu69kAayTc"
+
 
 POSTGRES_URL="postgres://default:rp8vylxaqKO1@ep-crimson-haze-a1r4iuxg-pooler.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require"
 POSTGRES_PRISMA_URL="postgres://default:rp8vylxaqKO1@ep-crimson-haze-a1r4iuxg-pooler.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"

package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@prisma/client": "^5.14.0",
+    "@supabase/ssr": "^0.4.0",
+    "@supabase/supabase-js": "^2.44.2",
     "@vercel/postgres": "^0.8.0",
     "next": "14.2.3",
     "next-auth": "^4.24.7",

src/app/api/auth/callback/route.tsx

@@ -0,0 +1,38 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import { type CookieOptions, createServerClient } from "@supabase/ssr";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  // if "next" is in param, use it as the redirect URL
+  const next = searchParams.get("next") ?? "/";
+
+  if (code) {
+    const cookieStore = cookies();
+    const supabase = createServerClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      {
+        cookies: {
+          get(name: string) {
+            return cookieStore.get(name)?.value;
+          },
+          set(name: string, value: string, options: CookieOptions) {
+            cookieStore.set({ name, value, ...options });
+          },
+          remove(name: string, options: CookieOptions) {
+            cookieStore.delete({ name, ...options });
+          },
+        },
+      }
+    );
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
+}

src/app/api/auth/confirm/route.ts

@@ -0,0 +1,28 @@
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { type NextRequest, NextResponse } from "next/server";
+
+import { createClient } from "@/app/utils/suparbase/server";
+import { redirect } from "next/navigation";
+
+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");
+}

src/app/login/actions.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+import { createClient } from "@/app/utils/suparbase/server";
+
+export async function login(formData: FormData) {
+  const supabase = createClient();
+
+  // type-casting here for convenience
+  // in practice, you should validate your inputs
+  const data = {
+    email: formData.get("email") as string,
+    password: formData.get("password") as string,
+  };
+
+  const { error } = await supabase.auth.signInWithPassword(data);
+
+  if (error) {
+    redirect("/error");
+  }
+
+  revalidatePath("/", "layout");
+  redirect("/");
+}
+
+export async function signup(formData: FormData) {
+  const supabase = createClient();
+
+  // type-casting here for convenience
+  // in practice, you should validate your inputs
+  const data = {
+    email: formData.get("email") as string,
+    password: formData.get("password") as string,
+  };
+
+  const { error } = await supabase.auth.signUp(data);
+
+  if (error) {
+    redirect("/error");
+  }
+
+  revalidatePath("/", "layout");
+  redirect("/");
+}

src/app/middleware.tsx

@@ -1,9 +1,19 @@
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest } from "next/server";
+import { updateSession } from "@/app/utils/suparbase/middleware";
 
-export function middleware(request: NextRequest) {
-  return NextResponse.redirect(new URL("/login", request.url));
+export async function middleware(request: NextRequest) {
+  return await updateSession(request);
 }
 
 export const config = {
-  matcher: ["/mypage/:id*"],
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * Feel free to modify this pattern to include more paths.
+     */
+    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
 };

src/app/utils/suparbase/client.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}