setup

adnjoo · adnjoo · commit d42ef6ee139f · 2024-11-05T00:27:13.000-06:00
diff --git a/web/app/(api)/auth/callback/route.ts b/web/app/(api)/auth/callback/route.ts
@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+
+// The client you created from the Server-Side Auth instructions
+import { createClient } from '@/utils/supabase/server';
+
+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 supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      const forwardedHost = request.headers.get('x-forwarded-host'); // original origin before load balancer
+      const isLocalEnv = process.env.NODE_ENV === 'development';
+      if (isLocalEnv) {
+        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
+        return NextResponse.redirect(`${origin}${next}`);
+      } else if (forwardedHost) {
+        return NextResponse.redirect(`https://${forwardedHost}${next}`);
+      } else {
+        return NextResponse.redirect(`${origin}${next}`);
+      }
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
+}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,13 +1,16 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { Footer } from "@/components/Footer";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ["latin"] });
+import { Footer } from '@/components/Footer';
+import { Nav } from '@/components/Nav';
+
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Fast Youtube Summary",
-  description: "Summarize YouTube videos for free",
+  title: 'Fast Youtube Summary',
+  description: 'Summarize YouTube videos for free',
 };
 
 export default function RootLayout({
@@ -16,9 +19,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body className={inter.className}>
+        <Nav />
+        <main className="min-h-[80vh]">
         {children}
+        </main>
         <Footer />
       </body>
     </html>
diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+
+import { GoogleIcon } from '@/components/icons/GoogleIcon';
+import { createClient } from '@/utils/supabase/client';
+
+export default function Login() {
+  const supabase = createClient();
+
+  // Google OAuth login handler
+  const handleGoogleLogin = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+    if (error) {
+      console.error('Google login failed:', error);
+    }
+  };
+
+  return (
+    <section className='mx-auto mt-32 flex flex-col justify-between items-center'>
+      <div className='w-full max-w-md border-2 border-black p-8'>
+        <Link
+          href='/'
+          className='mb-8 flex items-center space-x-2 text-black no-underline hover:underline'
+        >
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
+            stroke='currentColor'
+            strokeWidth='2'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          >
+            <polyline points='15 18 9 12 15 6' />
+          </svg>
+          <span>Back</span>
+        </Link>
+
+        <button
+          type='button'
+          onClick={handleGoogleLogin}
+          className='mt-4 flex w-full items-center justify-center space-x-2 border border-black px-4 py-2'
+        >
+          <GoogleIcon className='h-6 w-6' />
+          <span>Sign In with Google</span>
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/Nav.tsx b/web/components/Nav.tsx
@@ -0,0 +1,51 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/xYHqD5MkVkT
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import { createClient } from '@/utils/supabase/server';
+import AuthButton from './auth/AuthButton';
+
+export const Nav = async () => {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  console.log(user);
+  return (
+    <nav className='fixed inset-x-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-950/90'>
+      <div className='mx-auto w-full max-w-7xl px-4'>
+        <div className='flex h-14 items-center justify-between'>
+          <Link href='#' className='flex items-center' prefetch={false}>
+            <Image
+              src='/logo.png'
+              alt='GitHub Logo'
+              width={30}
+              height={30}
+              className='mx-auto'
+            />
+            <span className='sr-only'>Acme Inc</span>
+          </Link>
+          <nav className='hidden gap-4 md:flex'>
+            {/* <Link
+              href='#'
+              className='flex items-center text-sm font-medium transition-colors hover:underline'
+              prefetch={false}
+            >
+              Home
+            </Link> */}
+          </nav>
+          <div className='flex items-center gap-4'>
+            <AuthButton />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/web/components/auth/AuthButton.tsx b/web/components/auth/AuthButton.tsx
@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
+import { createClient } from '@/utils/supabase/server';
+
+export default async function AuthButton() {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const signOut = async () => {
+    'use server';
+
+    const supabase = await createClient();
+    await supabase.auth.signOut();
+    return redirect('/login');
+  };
+
+  return user ? (
+    <div className='flex items-center gap-4'>
+      <span className='hidden md:block'>Hey, {user.user_metadata.name}!</span>
+      <form action={signOut}>
+        <Button className='' variant='default'>
+          Logout
+        </Button>
+      </form>
+    </div>
+  ) : (
+    <Button asChild>
+      <Link
+        href='/login'
+        className='bg-btn-background hover:bg-btn-background-hover flex rounded-md px-4 py-2 no-underline'
+      >
+        Login
+      </Link>
+    </Button>
+  );
+}
diff --git a/web/components/icons/GoogleIcon.tsx b/web/components/icons/GoogleIcon.tsx
@@ -0,0 +1,31 @@
+export function GoogleIcon(props: any) {
+    return (
+      <svg
+        {...props}
+        xmlns='http://www.w3.org/2000/svg'
+        x='0px'
+        y='0px'
+        width='16'
+        height='16'
+        viewBox='0 0 48 48'
+      >
+        <path
+          fill='#FFC107'
+          d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'
+        ></path>
+        <path
+          fill='#FF3D00'
+          d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'
+        ></path>
+        <path
+          fill='#4CAF50'
+          d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'
+        ></path>
+        <path
+          fill='#1976D2'
+          d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'
+        ></path>
+      </svg>
+    );
+  }
+  
diff --git a/web/middleware.ts b/web/middleware.ts
@@ -0,0 +1,20 @@
+import { type NextRequest } from 'next/server';
+
+import { updateSession } from '@/utils/supabase/middleware';
+
+export async function middleware(request: NextRequest) {
+  return await updateSession(request);
+}
+
+export const config = {
+  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)$).*)',
+  ],
+};
diff --git a/web/public/logo.png b/web/public/logo.png
diff --git a/web/utils/supabase/client.ts b/web/utils/supabase/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!
+  )
+}
diff --git a/web/utils/supabase/middleware.ts b/web/utils/supabase/middleware.ts
@@ -0,0 +1,54 @@
+import { createServerClient } from '@supabase/ssr';
+import { type NextRequest, NextResponse } from 'next/server';
+
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  });
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) =>
+            request.cookies.set(name, value)
+          );
+          supabaseResponse = NextResponse.next({
+            request,
+          });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          );
+        },
+      },
+    }
+  );
+
+  // IMPORTANT: Avoid writing any logic between createServerClient and
+  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
+  // issues with users being randomly logged out.
+
+  // const {
+  //   data: { user },
+  // } = await supabase.auth.getUser();
+
+  // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
+  // creating a new response object with NextResponse.next() make sure to:
+  // 1. Pass the request in it, like so:
+  //    const myNewResponse = NextResponse.next({ request })
+  // 2. Copy over the cookies, like so:
+  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
+  // 3. Change the myNewResponse object to fit your needs, but avoid changing
+  //    the cookies!
+  // 4. Finally:
+  //    return myNewResponse
+  // If this is not done, you may be causing the browser and server to go out
+  // of sync and terminate the user's session prematurely!
+
+  return supabaseResponse;
+}
diff --git a/web/utils/supabase/server.ts b/web/utils/supabase/server.ts
@@ -0,0 +1,29 @@
+import { type CookieOptions, createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+export async function createClient() {
+  const cookieStore = await cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // The `setAll` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing
+            // user sessions.
+          }
+        },
+      },
+    }
+  );
+}
