Add middleware for pages that need a logged-in user

Closes #11
Closes #12

app/api/auth/[...nextauth]/route.ts

@@ -54,6 +54,9 @@ export const authOptions: NextAuthOptions = {
   session: {
     strategy: "jwt",
   },
+  // pages: {
+  //   signIn: "/auth/signin",
+  // }
 };
 
 const handler = NextAuth(authOptions);

app/auth/signin/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {useSignInModal} from "@/components/layout/sign-in-modal";
+import { getServerSession } from "next-auth";
+import {authOptions} from "@/app/api/auth/[...nextauth]/route";
+import { Button } from "@/components/ui/button";
+import {signIn} from "next-auth/react";
+import {Github, Google } from "@/components/shared/icons";
+import {useRouter} from "next/navigation";
+
+export default async function SignIn() {
+    // const { SignInModal, setShowSignInModal } = useSignInModal();
+
+    return (
+        <>
+            {/*<SignInModal />*/}
+            {/*/!*{Object.values(providers).map((provider) => (*!/*/}
+            {/*/!*    <div key={provider.name}>*!/*/}
+            {/*/!*        <button onClick={() => signIn(provider.id)}>*!/*/}
+            {/*/!*            Sign in with {provider.name}*!/*/}
+            {/*/!*        </button>*!/*/}
+            {/*/!*    </div>*!/*/}
+            {/*/!*))}*!/*/}
+            <div className={"flex flex-col gap-2 items-center justify-center h-fit"}>
+                <h1 className={"text-3xl mb-2"}>Sign In</h1>
+                <h3 className={"text-xl mb-2"}>The requested page requires you to sign in.</h3>
+                <Button
+                    onClick={() => {
+                        signIn("google");
+                    }}
+                >
+                    <Google className="h-5 w-5"/>
+                    <p>&nbsp;Sign In with Google</p>
+
+                </Button>
+                <Button
+                    onClick={() => {
+                        signIn("github");
+                    }}
+                >
+                    <Github className="h-5 w-5"/>
+                    <p>&nbsp;Sign In with Github</p>
+
+                </Button>
+            </div>
+
+            {/*<Dialog open={true}>*/}
+            {/*    <DialogContent>*/}
+            {/*        <DialogHeader>*/}
+            {/*            <DialogTitle>Sign In</DialogTitle>*/}
+            {/*            /!*<DialogDescription>*!/*/}
+            {/*            /!*  This action cannot be undone. This will permanently delete your account*!/*/}
+            {/*            /!*  and remove your data from our servers.*!/*/}
+            {/*            /!*</DialogDescription>*!/*/}
+            {/*        </DialogHeader>*/}
+            {/*        <Button*/}
+            {/*            onClick={() => {*/}
+            {/*                signIn("google");*/}
+            {/*            }}*/}
+            {/*        >*/}
+            {/*            <Google className="h-5 w-5"/>*/}
+            {/*            <p>&nbsp;Sign In with Google</p>*/}
+            {/*        </Button>*/}
+            {/*        <Button*/}
+            {/*            onClick={() => {*/}
+            {/*                signIn("github");*/}
+            {/*            }}*/}
+            {/*        >*/}
+            {/*            <Github className="h-5 w-5"/>*/}
+            {/*            <p>&nbsp;Sign In with Github</p>*/}
+            {/*        </Button>*/}
+            {/*    </DialogContent>*/}
+            {/*</Dialog>*/}
+        </>
+    )
+}

app/layout.tsx

@@ -6,7 +6,6 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { inter, sfPro } from "@/app/fonts";
 import { cx } from "class-variance-authority";
 import { Toaster } from "@/components/ui/toaster";
-import Head from "next/head";
 
 export const metadata = {
   title: "NextQuiz",

components/layout/nav.tsx

@@ -1,4 +1,3 @@
-import Navbar from "./navbar";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import Header from "@/components/layout/Header";

components/layout/sign-in-modal.tsx

@@ -1,6 +1,5 @@
-import Modal from "@/components/shared/modal";
 import { signIn } from "next-auth/react";
-import {
+import React, {
   useState,
   Dispatch,
   SetStateAction,

middleware.ts

@@ -0,0 +1,3 @@
+export {default} from "next-auth/middleware"
+
+export const config = {matcher: ["/quiz/:id/evaluation", "/quiz/:id/learn", "/quiz/create"]}