making progress on auth

gudchalmers · Oct 21, 2024 · ff0a1f0 · ff0a1f0
1 parent b9d2f06
commit ff0a1f0
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/.env
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import { handlers } from "@/auth"; // Referring to the auth.ts we just created
+
+export const { GET, POST } = handlers;
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,17 +1,26 @@
+"use client";
+
+import { signIn } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 
+
+
 import chs from "../public/chs.png";
 import minecraft from "../public/games/minecraft.png";
 import gud from "../public/gud-clean.png";
 
+
+const tenant = "gaming.chs.se";
+const product = "gud-gaming";
+
 export default function Home() {
   return (
     <>
       <div
         className={`
           flex size-full flex-col items-center justify-center bg-gradient-to-r from-slate-950
-          to-slate-800 pb-20 pt-32
+          to-slate-800 pb-20 pt-36
         `}
       >
         <h1 className="m-20">
@@ -21,22 +30,23 @@ export default function Home() {
             A part of Chalmers student union
           </p>
         </h1>
-        <Link href={"/signup"} className="mb-20">
+        <button
+          className={`
+            relative mb-24 flex flex-row rounded bg-slate-600 px-20 py-4 transition-colors
+            hover:bg-slate-500
+          `}
+          onClick={async (event) => {
+            event.preventDefault();
+            signIn("boxyhq-saml", {}, { tenant, product });
+          }}
+        >
+          Get Started
           <div
             className={`
-              relative flex flex-row rounded bg-slate-600 px-20 py-4 transition-colors
-              hover:bg-slate-500
+              absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
             `}
-          >
-            Get Started
-            <div
-              className={`
-                absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2
-                border-slate-200
-              `}
-            />
-          </div>
-        </Link>
+          />
+        </button>
         <div className="flex w-full flex-row items-center justify-center gap-4">
           <Image
             src={gud}
@@ -55,7 +65,7 @@ export default function Home() {
           Games offered:
         </h2>
         <div className="flex flex-row flex-wrap items-center justify-center gap-4">
-          <div className="h-40 rounded bg-slate-900 p-4">
+          <div className="h-40 w-64 max-w-full rounded bg-slate-900 p-4">
             <Image
               src={minecraft}
               alt="Minecraft"
@@ -65,25 +75,36 @@ export default function Home() {
               `}
             />
           </div>
+          <div className="h-40 w-64 max-w-full rounded bg-slate-900">
+            <div
+              className={`
+                w-64 max-w-full text-center leading-[10rem] brightness-75 transition-[filter]
+                hover:brightness-100 hover:grayscale-0
+              `}
+            >
+              And more...
+            </div>
+          </div>
         </div>
       </div>
       <div className="flex w-full items-center justify-center">
-        <Link href={"/signup"} className="mb-20">
+        <button
+          className={`
+            relative mb-20 flex flex-row rounded bg-slate-600 px-20 py-4 transition-colors
+            hover:bg-slate-500
+          `}
+          onClick={async (event) => {
+            event.preventDefault();
+            signIn("boxyhq-saml", {}, { tenant, product });
+          }}
+        >
+          Get Started
           <div
             className={`
-              relative flex flex-row rounded bg-slate-600 px-20 py-4 transition-colors
-              hover:bg-slate-500
+              absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
             `}
-          >
-            Get Started
-            <div
-              className={`
-                absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2
-                border-slate-200
-              `}
-            />
-          </div>
-        </Link>
+          />
+        </button>
       </div>
       <footer
         className={`
@@ -101,7 +122,7 @@ export default function Home() {
           />
         </Link>
 
-        <Link href={"https://chs.chalmers.se"} className="h-16">
+        <Link href={"https://chs.se"} className="h-16">
           <Image
             src={chs}
             alt="Logo for chalmers student union"
@@ -114,4 +135,4 @@ export default function Home() {
       </footer>
     </>
   );
-}
+}
diff --git a/auth.ts b/auth.ts
@@ -0,0 +1,13 @@
+import NextAuth from "next-auth";
+import BoxyHQ from "next-auth/providers/boxyhq-saml";
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [
+    BoxyHQ({
+      authorization: { params: { scope: "" } }, // This is needed for OAuth 2.0 flow, otherwise default to openid
+      clientId: process.env.AUTH_BOXYHQ_SAML_ID,
+      clientSecret: process.env.AUTH_BOXYHQ_SAML_SECRET,
+      issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
+    }),
+  ],
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "next": "14.2.13",
+    "next-auth": "^5.0.0-beta.22",
     "react": "^18",
     "react-dom": "^18",
     "sharp": "^0.33.5"
@@ -32,4 +33,4 @@
     "tailwindcss": "^3.4.13",
     "typescript": "^5.4.5"
   }
-}
+}