Chore/Revise Auth Flow

app/(main)/components/heroSection/heroSection.tsx

@@ -1,11 +1,16 @@
+import React from "react";
 import Image from "next/image";
-import { SplitContainer } from "@/components/templates/container";
+import { RegisterLink } from "@kinde-oss/kinde-auth-nextjs/components";
 import { barber } from "@/public/illustrations";
-import React from "react";
+import { SplitContainer } from "@/components/templates/container";
 import { Button } from "@/components/atoms/button";
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
 import Link from "next/link";
 
-const HeroSection = () => {
+async function HeroSection() {
+  const { isAuthenticated } = getKindeServerSession();
+  const isSignedIn = await isAuthenticated();
+
   return (
     <section aria-label="Hero">
       <SplitContainer className="h-[80vh] py-12 md:flex-row-reverse md:justify-between md:py-44">
@@ -31,14 +36,25 @@ const HeroSection = () => {
             className="w-full animate-fade-in"
             style={{ "--index": 1 } as React.CSSProperties}
           >
-            <Button size="lg" className="w-full md:w-auto" asChild>
-              <Link href={"/sign-in"}>Get started!</Link>
+            <Button size="md" className="w-full md:w-auto" asChild>
+              {isSignedIn ? (
+                <Link href="/my-appointments">Book your next appointment</Link>
+              ) : (
+                <RegisterLink
+                  authUrlParams={{
+                    connection_id:
+                      process.env.NEXT_PUBLIC_KINDE_CONNECTION_GOOGLE || "",
+                  }}
+                >
+                  Get started!
+                </RegisterLink>
+              )}
             </Button>
           </div>
         </SplitContainer.Right>
       </SplitContainer>
     </section>
   );
-};
+}
 
 export default HeroSection;

app/(main)/components/heroSection/hero.stories.tsx → archive/hero.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import HeroSection from "./heroSection";
+import HeroSection from "../app/(main)/components/heroSection/heroSection";
 
 const meta: Meta<typeof HeroSection> = {
   title: "Pages/Home/HeroSection",
@@ -11,9 +11,15 @@ const meta: Meta<typeof HeroSection> = {
     },
     layout: "fullscreen",
   },
+  /** Disabling the test since current version of storybook does not support dynamic server components.
+   * This should be fixed in version 8.
+   */
+  tags: ["no-tests"],
 };
 
 export default meta;
 type Story = StoryObj<typeof HeroSection>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => <HeroSection />,
+};

app/(main)/home.stories.tsx → archive/home.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import Home from "./page";
+import Home from "../app/(main)/page";
 
 const meta: Meta<typeof Home> = {
   title: "Pages/Home",
@@ -11,6 +11,10 @@ const meta: Meta<typeof Home> = {
     },
     layout: "fullscreen",
   },
+  /** Disabling the test since current version of storybook does not support dynamic server components.
+   * This should be fixed in version 8.
+   */
+  tags: ["no-tests"],
 };
 
 export default meta;

components/organisms/header/header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { LogoutLink } from "@kinde-oss/kinde-auth-nextjs/components";
+import { LoginLink, LogoutLink } from "@kinde-oss/kinde-auth-nextjs/components";
 import { CalendarIcon, LogOutIcon } from "lucide-react";
 import { Container } from "@/components/templates/container";
 import { Button } from "@/components/atoms/button";
@@ -58,7 +58,6 @@ function Header({ photo, isAuthenticated }: HeaderProps) {
                 </Avatar>
               </PopoverTrigger>
               <PopoverContent
-
                 className="flex w-fit flex-col items-start p-2"
                 align="end"
               >
@@ -86,7 +85,15 @@ function Header({ photo, isAuthenticated }: HeaderProps) {
             </Popover>
           ) : (
             <Button aria-label="Sign in" iconPosition="after" size="sm" asChild>
-              <Link href="/sign-in">Sign in</Link>
+              <LoginLink
+                authUrlParams={{
+                  connection_id:
+                    process.env.NEXT_PUBLIC_KINDE_CONNECTION_GOOGLE || "",
+                }}
+                postLoginRedirectURL={`${process.env.NEXT_PUBLIC_BASE_URL}/api/auth/success`}
+              >
+                {"Sign in"}
+              </LoginLink>
             </Button>
           )}
         </nav>