impl the user store

src/app/(pages)/auth/page.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import { ReactElement } from "react";
-import Branding from "@/components/branding";
 import OAuthProvider from "@/components/auth/oauth-provider";
 import { Separator } from "@/components/ui/separator";
 import AuthForm from "@/components/auth/auth-form";
 import { motion } from "framer-motion";
+import Greeting from "@/components/auth/greeting";
 
+/**
+ * The page to authenticate with.
+ *
+ * @return the auth page
+ */
 const AuthPage = (): ReactElement => (
     <main className="min-h-screen flex justify-center items-center">
         <motion.div
@@ -15,26 +20,27 @@ const AuthPage = (): ReactElement => (
             animate={{ x: 0, opacity: 1 }}
             transition={{ duration: 0.4 }}
         >
-            <h1 className="text-3xl font-bold select-none pointer-events-none">
-                Good Evening,
-            </h1>
+            <Greeting />
             <OAuthProviders />
-            <Separator className="-mb-1" />
+            <div className="mx-auto mb-1 flex gap-3 items-center select-none pointer-events-none">
+                <Separator className="w-28" />
+                <h1 className="opacity-65 leading-none">or</h1>
+                <Separator className="w-28" />
+            </div>
             <AuthForm />
         </motion.div>
-        <Branding className="absolute left-5 bottom-5 opacity-60" size="sm" />
     </main>
 );
 
+/**
+ * The OAuth providers to login with.
+ *
+ * @return the providers jsx
+ */
 const OAuthProviders = (): ReactElement => (
-    <div className="flex flex-col gap-2">
-        <p className="opacity-50 select-none pointer-events-none">
-            Continue with a third party...
-        </p>
-        <div className="flex gap-2.5">
-            <OAuthProvider name="GitHub" icon="github" link="#" />
-            <OAuthProvider name="Google" icon="google" link="#" />
-        </div>
+    <div className="mt-1 flex gap-2.5">
+        <OAuthProvider name="GitHub" link="#" />
+        <OAuthProvider name="Google" link="#" />
     </div>
 );
 

src/app/(pages)/dashboard/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from "react";
+import UserProvider from "@/app/provider/user-provider";
+
+/**
+ * The layout for the dashboard pages.
+ *
+ * @param children the children to render
+ * @returns the layout jsx
+ */
+const DashboardLayout = ({
+    children,
+}: Readonly<{
+    children: ReactNode;
+}>): ReactElement => <UserProvider>{children}</UserProvider>;
+export default DashboardLayout;

src/app/(pages)/dashboard/page.tsx

@@ -1,6 +1,18 @@
-import { ReactElement } from "react";
+"use client";
 
-const DashboardPage = (): ReactElement => (
-    <main className="min-h-screen">PulseApp Dashboard</main>
-);
+import { ReactElement } from "react";
+import { UserState } from "@/app/store/user-store-props";
+import { User } from "@/app/types/user";
+import { useUserContext } from "@/app/provider/user-provider";
+
+const DashboardPage = (): ReactElement => {
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    return (
+        <main className="min-h-screen">
+            PulseApp Dashboard, hello {user?.email}
+        </main>
+    );
+};
 export default DashboardPage;

src/app/provider/user-provider.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {
+    ReactNode,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+import createUserStore, {
+    UserContext,
+    UserState,
+    UserStore,
+} from "@/app/store/user-store-props";
+import { User } from "@/app/types/user";
+import { Cookies, useCookies } from "next-client-cookies";
+import { Session } from "@/app/types/session";
+import { apiRequest } from "@/lib/api";
+import { StoreApi, useStore } from "zustand";
+import { useRouter } from "next/navigation";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import DashboardLoader from "@/components/dashboard/loader";
+
+/**
+ * The provider that will provide user context to children.
+ *
+ * @param children the children to provide context to
+ * @return the provider
+ */
+const UserProvider = ({ children }: { children: ReactNode }) => {
+    const storeRef = useRef<UserStore>();
+    const [authorized, setAuthorized] = useState<boolean>(false);
+    const cookies: Cookies = useCookies();
+    const router: AppRouterInstance = useRouter();
+    if (!storeRef.current) {
+        storeRef.current = createUserStore();
+    }
+
+    /**
+     * Fetch the user from the stored session in their browser.
+     */
+    const fetchUser = useCallback(async () => {
+        const rawSession: string | undefined = cookies.get("session");
+
+        // No session cookie, go back to auth
+        if (!rawSession) {
+            router.push("/auth");
+            return;
+        }
+        const session: Session = JSON.parse(rawSession) as Session;
+        const { data, error } = await apiRequest<User>({
+            endpoint: "/user/@me",
+            session,
+        });
+        // Failed to login (unauthorized?)
+        if (error) {
+            cookies.remove("session");
+            router.push("/auth");
+            return;
+        }
+        storeRef.current?.getState().authorize(session, data as User);
+        setAuthorized(true);
+    }, [cookies, router]);
+    useEffect(() => {
+        fetchUser();
+    }, [fetchUser]);
+
+    return (
+        <UserContext.Provider value={storeRef.current}>
+            {authorized ? children : <DashboardLoader />}
+        </UserContext.Provider>
+    );
+};
+
+/**
+ * Use the user context.
+ *
+ * @param selector the state selector to use
+ * @return the value returned by the selector
+ */
+export function useUserContext<T>(selector: (state: UserState) => T): T {
+    const store: StoreApi<UserState> | null = useContext(UserContext);
+    if (!store) {
+        throw new Error("Missing UserContext.Provider in the tree");
+    }
+    return useStore(store, selector);
+}
+
+export default UserProvider;

src/app/store/user-store-props.ts

@@ -0,0 +1,55 @@
+import { createStore } from "zustand";
+import { User } from "@/app/types/user";
+import { createContext } from "react";
+import { Session } from "@/app/types/session";
+
+export const UserContext = createContext<UserStore | null>(null);
+
+/**
+ * The props in the store.
+ */
+export type UserStoreProps = {
+    /**
+     * The user's session, if any.
+     */
+    session: Session | undefined;
+
+    /**
+     * The user obtained from the session, if any.
+     */
+    user: User | undefined;
+};
+
+/**
+ * The user store state.
+ */
+export type UserState = UserStoreProps & {
+    /**
+     * Authorize the user.
+     *
+     * @param session the user's session
+     * @param user the user
+     */
+    authorize: (session: Session, user: User) => void;
+};
+
+/**
+ * The type representing the user store.
+ */
+export type UserStore = ReturnType<typeof createUserStore>;
+
+/**
+ * Create a new user store.
+ */
+const createUserStore = () => {
+    const defaultProps: UserStoreProps = {
+        session: undefined,
+        user: undefined,
+    };
+    return createStore<UserState>()((set) => ({
+        ...defaultProps,
+        authorize: (session: Session, user: User) =>
+            set(() => ({ session, user })),
+    }));
+};
+export default createUserStore;

src/app/store/user-store.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-import { User } from "@/app/types/user";
-
-export type UserStore = {
-    user: User | undefined;
-};
-
-const useUserStore = create<UserStore>((set) => ({
-    user: undefined,
-}));
-export default useUserStore;

src/components/auth/auth-form.tsx

@@ -7,13 +7,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import AnimatedRightChevron from "@/components/animated-right-chevron";
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import {
+    ArrowPathIcon,
+    AtSymbolIcon,
+    EnvelopeIcon,
+    LockClosedIcon,
+} from "@heroicons/react/24/outline";
 import { apiRequest } from "@/lib/api";
 import { Session } from "@/app/types/session";
 import { Cookies, useCookies } from "next-client-cookies";
 import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { motion } from "framer-motion";
+import Turnstile from "react-turnstile";
 
 /**
  * Define the form schemas for the various stages.
@@ -27,7 +33,7 @@ const RegisterSchema = z.object({
     username: z.string(),
     password: z.string(),
     passwordConfirmation: z.string(),
-    captchaResponse: z.string(),
+    // captchaResponse: z.string(),
 });
 
 const LoginSchema = z.object({
@@ -39,14 +45,25 @@ const LoginSchema = z.object({
     // captchaResponse: z.string(),
 });
 
-const inputVariants = {
+/**
+ * The animation variants for the inputs.
+ */
+const inputAnimationVariants = {
     hidden: { x: -50, opacity: 0 },
     visible: { x: 0, opacity: 1, transition: { duration: 0.15 } },
 };
 
+/**
+ * The form used to authenticate.
+ *
+ * @return the form jsx
+ */
 const AuthForm = (): ReactElement => {
     const [stage, setStage] = useState<"email" | "register" | "login">("email");
     const [loading, setLoading] = useState<boolean>(false);
+    const [captchaResponse, setCaptchaResponse] = useState<string | undefined>(
+        undefined
+    );
     const [error, setError] = useState<string | undefined>(undefined);
     const cookies: Cookies = useCookies();
     const router: AppRouterInstance = useRouter();
@@ -74,27 +91,34 @@ const AuthForm = (): ReactElement => {
         username,
         password,
         passwordConfirmation,
-        captchaResponse,
     }: any) => {
         setLoading(true);
         if (stage === "email") {
-            const { data, error } = await apiRequest<{ exists: boolean }>(
-                `/user/exists?email=${email}`
-            );
+            const { data, error } = await apiRequest<{ exists: boolean }>({
+                endpoint: `/user/exists?email=${email}`,
+            });
             setStage(data?.exists ? "login" : "register");
-        } else if (stage === "login") {
-            const { data, error } = await apiRequest<Session>(
-                `/auth/login`,
-                "POST",
-                {
-                    email,
-                    password,
-                    captchaResponse,
-                }
-            );
-            if (error) {
-                setError(error.message);
-            } else {
+        } else {
+            const registering: boolean = stage === "register";
+            const { data, error } = await apiRequest<Session>({
+                endpoint: `/auth/${registering ? "register" : "login"}`,
+                method: "POST",
+                body: registering
+                    ? {
+                          email,
+                          username,
+                          password,
+                          passwordConfirmation,
+                          captchaResponse,
+                      }
+                    : {
+                          email,
+                          password,
+                          captchaResponse,
+                      },
+            });
+            setError(error?.message ?? undefined);
+            if (!error) {
                 cookies.set("session", JSON.stringify(data), {
                     expires:
                         ((data?.expires as number) - Date.now()) / 86_400_000,
@@ -111,38 +135,49 @@ const AuthForm = (): ReactElement => {
     // Render the form
     return (
         <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
-            <p className="opacity-50 select-none pointer-events-none">
-                Or use your email address...
-            </p>
-
             {/* Email Address */}
-            <Input
-                className="rounded-lg"
-                type="email"
-                placeholder="bob@example.com"
-                {...register("email")}
-            />
+            <div className="relative">
+                <EnvelopeIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
+                <Input
+                    className="pl-8 rounded-lg"
+                    type="email"
+                    placeholder="bob@example.com"
+                    {...register("email")}
+                />
+            </div>
 
             {/* Username */}
             {stage === "register" && (
-                <Input
-                    className="rounded-lg"
-                    placeholder="@username"
-                    {...register("username")}
-                />
+                <motion.div
+                    key="username"
+                    className="relative"
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                    variants={inputAnimationVariants}
+                >
+                    <AtSymbolIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
+                    <Input
+                        className="pl-8 rounded-lg"
+                        placeholder="Username"
+                        {...register("username")}
+                    />
+                </motion.div>
             )}
 
             {/* Password */}
             {stage !== "email" && (
                 <motion.div
                     key="password"
+                    className="relative"
                     initial="hidden"
                     animate="visible"
                     exit="exit"
-                    variants={inputVariants}
+                    variants={inputAnimationVariants}
                 >
+                    <LockClosedIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
                     <Input
-                        className="rounded-lg"
+                        className="pl-8 rounded-lg"
                         type="password"
                         placeholder="Password"
                         {...register("password")}
@@ -152,25 +187,37 @@ const AuthForm = (): ReactElement => {
 
             {/* Password Confirmation */}
             {stage === "register" && (
-                <Input
-                    className="rounded-lg"
-                    type="password"
-                    placeholder="Confirm Password"
-                    {...register("passwordConfirmation")}
-                />
+                <motion.div
+                    key="passwordConfirmation"
+                    className="relative"
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                    variants={inputAnimationVariants}
+                >
+                    <LockClosedIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
+                    <Input
+                        className="pl-8 rounded-lg"
+                        type="password"
+                        placeholder="Confirm Password"
+                        {...register("passwordConfirmation")}
+                    />
+                </motion.div>
             )}
 
-            {/*{stage !== "email" && (*/}
-            {/*    <Turnstile*/}
-            {/*        responseFieldName="captchaResponse"*/}
-            {/*        sitekey="0x4AAAAAAAj8DEQFLe1isCek"*/}
-            {/*        {...register("captchaResponse")}*/}
-            {/*    />*/}
-            {/*)}*/}
+            {/* Captcha */}
+            <Turnstile
+                sitekey={process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY as string}
+                responseField={false}
+                onVerify={(token: string) => setCaptchaResponse(token)}
+            />
+
+            {/* Errors */}
+            {error && <p className="text-red-500">{error}</p>}
 
             {/* Submit Form */}
             <Button
-                className="h-11 mt-2 flex gap-2 items-center bg-zinc-800/75 text-white hover:bg-zinc-800/75 hover:opacity-75 transition-all transform-gpu group"
+                className="h-11 flex gap-2 items-center bg-zinc-800/75 text-white border border-zinc-700/35 hover:bg-zinc-800/75 hover:opacity-75 transition-all transform-gpu group"
                 type="submit"
                 disabled={loading}
             >
@@ -185,4 +232,5 @@ const AuthForm = (): ReactElement => {
         </form>
     );
 };
+
 export default AuthForm;

src/components/auth/greeting.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { ReactElement } from "react";
+import Branding from "@/components/branding";
+
+/**
+ * The greetings for the auth page.
+ *
+ * @return the greeting jsx
+ */
+const Greeting = (): ReactElement => {
+    const currentHour: number = new Date().getHours();
+    const greeting: string =
+        currentHour < 12
+            ? "Morning"
+            : currentHour < 18
+              ? "Afternoon"
+              : "Evening";
+    // return (
+    //     <h1 className="text-3xl font-bold select-none pointer-events-none">
+    //         Good {greeting},
+    //     </h1>
+    // );
+
+    return (
+        <div className="flex flex-col gap-1.5 justify-center items-center select-none pointer-events-none">
+            <Branding />
+            <h1 className="text-3xl font-bold leading-none">
+                Good {greeting},
+            </h1>
+            <h2 className="opacity-65">Please login to continue!</h2>
+        </div>
+    );
+};
+export default Greeting;

src/components/auth/oauth-provider.tsx

@@ -12,23 +12,19 @@ type OAuthProviderProps = {
      */
     name: string;
 
-    /**
-     * The icon of this provider.
-     */
-    icon: string;
-
     /**
      * The link to login with this provider.
      */
     link: string;
 };
 
-const OAuthProvider = ({
-    name,
-    icon,
-    link,
-}: OAuthProviderProps): ReactElement => (
-    <Link href={link}>
+/**
+ * A button to login with an OAuth provider.
+ *
+ * @return the provider jsx
+ */
+const OAuthProvider = ({ name, link }: OAuthProviderProps): ReactElement => (
+    <Link className="cursor-not-allowed" href={link}>
         <Button
             className="h-12 bg-zinc-800/85 text-white border border-zinc-700/35 hover:bg-muted hover:opacity-75 transition-all transform-gpu"
             disabled
@@ -37,7 +33,7 @@ const OAuthProvider = ({
                 className="w-10 h-10"
                 as="div"
                 bgColor="transparent"
-                network={icon}
+                network={name.toLowerCase()}
             />
             <span>{name}</span>
         </Button>

src/components/branding.tsx

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const brandingVariants = cva(
-    "relative hover:opacity-75 transition-all transform-gpu",
+    "relative hover:opacity-75 select-none transition-all transform-gpu",
     {
         variants: {
             size: {

src/components/dashboard/loader.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+import Branding from "@/components/branding";
+
+/**
+ * The loader for the dashboard pages.
+ *
+ * @return the loader jsx
+ */
+const DashboardLoader = (): ReactElement => (
+    <div
+        className="absolute w-screen h-screen flex flex-col gap-1.5 animate-pulse justify-center items-center"
+        style={{
+            background:
+                "linear-gradient(to top, hsla(240, 6%, 10%, 0.7), hsl(var(--background)))",
+        }}
+    >
+        <Branding />
+        <h1 className="text-2xl font-semibold opacity-75">Loading</h1>
+    </div>
+);
+export default DashboardLoader;

src/lib/api.ts

@@ -1,15 +1,46 @@
+import { Session } from "@/app/types/session";
+import { ApiError } from "@/app/types/api-error";
+
+type ApiRequestProps = {
+    /**
+     * The endpoint to send the request to.
+     */
+    endpoint: string;
+
+    /**
+     * The session to authenticate with, if any.
+     */
+    session?: Session | undefined;
+
+    /**
+     * The method of the request to make.
+     */
+    method?: string | undefined;
+
+    /**
+     * The optional body of the request.
+     */
+    body?: any | undefined;
+};
+
 /**
  * Send a request to the API.
  *
  * @param endpoint the endpoint to request
+ * @param session the session to auth with
  * @param body the optional request body to send
  * @param method the request method to use
+ * @return the api response
  */
-export const apiRequest = async <T>(
-    endpoint: string,
-    method?: string | undefined,
-    body?: any | undefined
-): Promise<{ data: T | undefined; error: ApiError | undefined }> => {
+export const apiRequest = async <T>({
+    endpoint,
+    method,
+    session,
+    body,
+}: ApiRequestProps): Promise<{
+    data: T | undefined;
+    error: ApiError | undefined;
+}> => {
     const response: Response = await fetch(
         `${process.env.NEXT_PUBLIC_API_ENDPOINT}${endpoint}`,
         {
@@ -20,6 +51,11 @@ export const apiRequest = async <T>(
                     : undefined,
             headers: {
                 "Content-Type": `application/${method === "POST" ? "x-www-form-urlencoded" : "json"}`,
+                ...(session
+                    ? {
+                          Authorization: `Bearer ${session.accessToken}`,
+                      }
+                    : {}),
             },
         }
     );
@@ -29,5 +65,3 @@ export const apiRequest = async <T>(
     }
     return { data: data as T, error: undefined };
 };
-
-import { ApiError } from "@/app/types/api-error";