Merge pull request #137 from YukiOnishi1129/feature/web-front-supabas…

…e-auth

feat(web-v2): web-front-supabase-auth-v2

web/client-v2/.env.sample

@@ -1,2 +1,5 @@
 BFF_API_URL=
-NEXT_PUBLIC_BFF_API_URL=
+NEXT_PUBLIC_BFF_API_URL=
+
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

web/client-v2/package.json

@@ -19,10 +19,10 @@
     "@hookform/resolvers": "^3.4.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",

web/client-v2/src/app/(auth)/login/page.tsx

@@ -0,0 +1,20 @@
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+
+import { getUser } from "@/features/auth/actions/user";
+import { LoginTemplate } from "@/features/auth/components/Template";
+
+import { ScreenLoader } from "@/components/layout/ScreenLoader";
+
+export default async function Login() {
+  const user = await getUser();
+  if (user) {
+    redirect("/dashboard");
+  }
+
+  return (
+    <Suspense fallback={<ScreenLoader />}>
+      <LoginTemplate />
+    </Suspense>
+  );
+}

web/client-v2/src/app/auth/callback/route.ts

@@ -0,0 +1,39 @@
+import { type CookieOptions, createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = 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(`${process.env.WEB_DOMAIN}${next}`);
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(
+    `${process.env.WEB_DOMAIN}/auth/auth-code-error`
+  );
+}

web/client-v2/src/app/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Dashboard</div>;
+}

web/client-v2/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
 import { Inter } from "next/font/google";
 
+import { BaseLayout } from "@/components/layout/BaseLayout";
 import { ApolloProvider, ThemeProvider } from "@/components/provider";
 
 import type { Metadata } from "next";
@@ -29,7 +30,9 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <ApolloProvider>{children}</ApolloProvider>
+          <ApolloProvider>
+            <BaseLayout>{children}</BaseLayout>
+          </ApolloProvider>
         </ThemeProvider>
       </body>
     </html>

web/client-v2/src/app/page.tsx

@@ -1,5 +1,5 @@
-import { ArticleDashboardTemplate } from "@/features/articles/components/Template";
+import { HomeTemplate } from "@/features/home/components/Template/HomeTemplate";
 
 export default function Home() {
-  return <ArticleDashboardTemplate />;
+  return <HomeTemplate />;
 }

web/client-v2/src/components/layout/BaseLayout/BaseLayout.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+import { getUser } from "@/features/auth/actions/user";
+
+import { LoggedBaseLayout } from "./LoggedBaseLayout";
+import { NotLoggedBaseLayout } from "./NotLoggedBaseLayout";
+
+export const BaseLayout = async ({ children }: { children: ReactNode }) => {
+  const user = await getUser();
+  return (
+    <>
+      {user ? (
+        <LoggedBaseLayout user={user}>{children}</LoggedBaseLayout>
+      ) : (
+        <NotLoggedBaseLayout>{children}</NotLoggedBaseLayout>
+      )}
+    </>
+  );
+};

web/client-v2/src/components/layout/BaseLayout/LoggedBaseLayout.tsx

@@ -0,0 +1,50 @@
+import { User } from "@supabase/supabase-js";
+import { FC, ReactNode } from "react";
+
+// import { fetchFavoriteArticleFoldersAPI } from "@/features/favoriteArticleFolders/actions/favoriteArticleFolders";
+// import { fetchMyFeedFoldersAPI } from "@/features/myFeedFolders/actions/myFeedFolder";
+
+import { Header } from "@/components/layout/Header";
+
+// import { LoggedBottomNavigationMenu } from "../BottomNavigationMenu";
+// import { DesktopSidebar } from "../Sidebar";
+
+type LoggedBaseLayoutProps = {
+  user: User;
+  children: ReactNode;
+};
+
+export const LoggedBaseLayout: FC<LoggedBaseLayoutProps> = async ({
+  user,
+  children,
+}) => {
+  //   const myFeedFolderRes = await fetchMyFeedFoldersAPI({});
+  //   const favoriteArticleFolderRes = await fetchFavoriteArticleFoldersAPI({});
+  return (
+    <div>
+      <header className="overflow-hidden">
+        <Header user={user} />
+      </header>
+
+      <div className="h-12 md:h-16" />
+      <main className="md:flex">
+        <div className="invisible fixed h-lvh w-[200px] md:visible">
+          {/* <DesktopSidebar
+            user={user}
+            myFeedFolders={myFeedFolderRes.data.myFeedFolders}
+            favoriteArticleFolders={
+              favoriteArticleFolderRes.data.favoriteArticleFolders
+            }
+          /> */}
+        </div>
+        <div className="invisible mr-[10px] w-[200px] md:visible" />
+
+        <div className="mx-auto w-[90%] md:w-[70%]">{children}</div>
+      </main>
+
+      {/* <footer className="fixed inset-x-0 bottom-0 z-50 block border-t border-gray-200  md:hidden">
+        <LoggedBottomNavigationMenu />
+      </footer> */}
+    </div>
+  );
+};

web/client-v2/src/components/layout/BaseLayout/NotLoggedBaseLayout.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from "react";
+
+import { Header } from "../Header";
+
+type NotLoggedBaseLayoutProps = {
+  children: ReactNode;
+};
+
+export const NotLoggedBaseLayout: FC<NotLoggedBaseLayoutProps> = async ({
+  children,
+}) => {
+  return (
+    <div>
+      <header className="overflow-hidden">
+        <Header />
+      </header>
+
+      <div className="h-12 md:h-16" />
+      <main className="md:flex">
+        <div className="mx-auto w-[90%] md:w-[70%]">{children}</div>
+      </main>
+
+      {/* <footer className="fixed inset-x-0 bottom-0 z-50 block border-t border-gray-200  md:hidden">
+        <NotLoggedBottomNavigationMenu />
+      </footer> */}
+    </div>
+  );
+};

web/client-v2/src/components/layout/BaseLayout/index.ts

@@ -0,0 +1 @@
+export * from "./BaseLayout";

web/client-v2/src/components/layout/Header/DesktopHeader/DesktopHeader.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { User } from "@supabase/supabase-js";
+import Link from "next/link";
+import { FC } from "react";
+
+import { LoggedMenu } from "./LoggedMenu";
+import { NotLoggedMenu } from "./NotLoggedMenu";
+
+type DesktopHeaderProps = {
+  user?: User;
+};
+
+export const DesktopHeader: FC<DesktopHeaderProps> = async ({
+  user,
+}: DesktopHeaderProps) => {
+  return (
+    <div className="fixed z-50 flex h-16 w-screen items-center justify-between border-b border-gray-300  bg-card px-8 shadow-md">
+      <Link href={user ? "/dashboard" : "/"} className="cursor-pointer">
+        <h1 className="text-2xl font-bold">Check Picks</h1>
+      </Link>
+      <div className="flex items-center justify-end">
+        {user ? <LoggedMenu user={user} /> : <NotLoggedMenu />}
+      </div>
+    </div>
+  );
+};

web/client-v2/src/components/layout/Header/DesktopHeader/LoggedMenu.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { User } from "@supabase/supabase-js";
+import { FC } from "react";
+
+import { AvatarDropdownMenu } from "../DropdownMenu";
+
+type LoggedMenuProps = {
+  user?: User;
+};
+export const LoggedMenu: FC<LoggedMenuProps> = ({ user }: LoggedMenuProps) => {
+  return <AvatarDropdownMenu user={user} />;
+};

web/client-v2/src/components/layout/Header/DesktopHeader/NotLoggedMenu.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export const NotLoggedMenu = () => {
+  return (
+    <div className="grid grid-cols-2">
+      <Link href="/login">
+        <Button variant={"ghost"}>Login</Button>
+      </Link>
+      <Button variant={"destructive"}>Signup</Button>
+    </div>
+  );
+};

web/client-v2/src/components/layout/Header/DesktopHeader/index.ts

@@ -0,0 +1 @@
+export * from "./DesktopHeader";

web/client-v2/src/components/layout/Header/DropdownMenu/AvatarDropdownMenu.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { User } from "@supabase/supabase-js";
+import { FC } from "react";
+import { FiLogOut } from "react-icons/fi";
+import { GrUser } from "react-icons/gr";
+
+import { logout } from "@/features/auth/actions/auth";
+
+import { UserAvatar } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+
+type AvatarDropdownMenuProps = {
+  user?: User;
+};
+
+export const AvatarDropdownMenu: FC<AvatarDropdownMenuProps> = ({
+  user,
+}: AvatarDropdownMenuProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="md:flex md:justify-end">
+          <UserAvatar user={user} />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[100px]">
+        <DropdownMenuItem className="cursor-pointer">
+          <GrUser />
+          <span className="pl-2">Profile</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="cursor-pointer"
+          role="button"
+          tabIndex={1}
+          onClick={() => logout()}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              logout();
+            }
+          }}
+        >
+          <FiLogOut />
+          <span className="pl-2">Logout</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

web/client-v2/src/components/layout/Header/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from "./AvatarDropdownMenu";

web/client-v2/src/components/layout/Header/Header.tsx

@@ -0,0 +1,29 @@
+import { User } from "@supabase/supabase-js";
+import { FC } from "react";
+
+import { DesktopHeader } from "./DesktopHeader";
+
+type HeaderProps = {
+  user?: User;
+};
+
+export const Header: FC<HeaderProps> = async ({ user }) => {
+  //   const myFeedFolderRes = await fetchMyFeedFoldersAPI({});
+  //   const favoriteArticleFolderRes = await fetchFavoriteArticleFoldersAPI({});
+  return (
+    <>
+      <div className="hidden md:block">
+        <DesktopHeader user={user} />
+      </div>
+      <div className="block md:hidden">
+        {/* <MobileHeader
+          user={user}
+          myFeedFolders={myFeedFolderRes.data.myFeedFolders}
+          favoriteArticleFolders={
+            favoriteArticleFolderRes.data.favoriteArticleFolders
+          }
+        /> */}
+      </div>
+    </>
+  );
+};

web/client-v2/src/components/layout/Header/index.ts

@@ -0,0 +1 @@
+export * from "./Header";

web/client-v2/src/components/layout/ScreenLoader/ScreenLoader.tsx

@@ -0,0 +1,9 @@
+import { Loader } from "@/components/ui/loader";
+
+export const ScreenLoader = () => {
+  return (
+    <div className="flex h-screen w-full items-center justify-center">
+      <Loader />
+    </div>
+  );
+};

web/client-v2/src/components/layout/ScreenLoader/index.ts

@@ -0,0 +1 @@
+export * from "./ScreenLoader";