started on /games

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

@@ -1,116 +1,20 @@
-// import { handlers } from "@/auth"; // Referring to the auth.ts we just created
-
-// export const { GET, POST } = handlers;
-
-import NextAuth, { NextAuthOptions } from "next-auth";
-import BoxyHQSAMLProvider from "next-auth/providers/boxyhq-saml";
+import NextAuth from "next-auth";
+import BoxyHQ from "next-auth/providers/boxyhq-saml";
 
 const samlLoginUrl = process.env.AUTH_BOXYHQ_SAML_ISSUER;
 
 // For more information on each option (and a full list of options) go to
 // https://next-auth.js.org/configuration/options
-
-export const authOptions: NextAuthOptions = {
+const handler = NextAuth({
   // https://next-auth.js.org/configuration/providers/oauth
   providers: [
-    // OAuth flow
-    BoxyHQSAMLProvider({
+    BoxyHQ({
       authorization: { params: { scope: "" } },
       issuer: samlLoginUrl,
       clientId: process.env.AUTH_BOXYHQ_SAML_ID || "dummy",
       clientSecret: process.env.AUTH_BOXYHQ_SAML_SECRET || "dummy",
     }),
-    // // Open Id connect flow
-    // BoxyHQSAMLProvider({
-    //   name: "BoxyHQ OIDC",
-    //   id: "boxyhq-saml-oidc",
-    //   issuer: samlLoginUrl,
-    //   wellKnown: `${samlLoginUrl}/.well-known/openid-configuration`,
-    //   authorization: { params: { scope: "openid email" } },
-    //   clientId: process.env.AUTH_BOXYHQ_SAML_ID || "dummy",
-    //   clientSecret: process.env.AUTH_BOXYHQ_SAML_SECRET || "dummy",
-    // }),
-    // CredentialsProvider({
-    //   id: "boxyhq-idp",
-    //   // The name to display on the sign in form (e.g. 'Sign in with...')
-    //   name: "IdP Login",
-    //   // The credentials is used to generate a suitable form on the sign in page.
-    //   // You can specify whatever fields you are expecting to be submitted.
-    //   // e.g. domain, username, password, 2FA token, etc.
-    //   // You can pass any HTML attribute to the <input> tag through the object.
-    //   credentials: {
-    //     code: {
-    //       label:
-    //         "Code: Go to https://mocksaml.com/saml/login to initiate SAML IdP login",
-    //       type: "text",
-    //       placeholder: "Enter code",
-    //     },
-    //   },
-    //   async authorize(credentials) {
-    //     const { code } = credentials || {};
-
-    //     if (!code) {
-    //       return null;
-    //     }
-
-    //     const res = await fetch(`${samlLoginUrl}/api/oauth/token`, {
-    //       method: "POST",
-    //       body: JSON.stringify({
-    //         grant_type: "authorization_code",
-    //         client_id: process.env.AUTH_BOXYHQ_SAML_ID || "dummy",
-    //         client_secret: process.env.AUTH_BOXYHQ_SAML_SECRET || "dummy",
-    //         redirect_uri: process.env.NEXTAUTH_URL + "/games",
-    //         code,
-    //       }),
-    //       headers: {
-    //         "Content-Type": "application/json",
-    //       },
-    //     });
-
-    //     if (res.status !== 200) {
-    //       return null;
-    //     }
-
-    //     const json = await res.json();
-    //     if (!json?.access_token) {
-    //       return null;
-    //     }
-
-    //     const resUserInfo = await fetch(`${samlLoginUrl}/api/oauth/userinfo`, {
-    //       headers: {
-    //         Authorization: `Bearer ${json.access_token}`,
-    //       },
-    //     });
-
-    //     if (resUserInfo.status !== 200) {
-    //       return null;
-    //     }
-    //     const profile = await resUserInfo.json();
-
-    //     console.log(profile);
-
-    //     if (profile?.id && profile?.email) {
-    //       return {
-    //         id: profile.id,
-    //         email: profile.email,
-    //         name: [profile.firstName, profile.lastName]
-    //           .filter(Boolean)
-    //           .join(" "),
-    //         image: null,
-    //       };
-    //     }
-
-    //     return null;
-    //   },
-    // }),
   ],
-  // callbacks: {
-  //   async jwt({ token }) {
-  //     token.userRole = "admin";
-  //     return token;
-  //   },
-  // },
-};
+});
 
-const handler = NextAuth(authOptions);
 export { handler as GET, handler as POST };

app/components/login-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+
+export function LoginButton() {
+  const tenant = "boxyhq.com";
+  const product = "saml-demo.boxyhq.com";
+
+  return (
+    <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",
+          {
+            callbackUrl: "/games",
+          },
+          { tenant, product },
+        );
+      }}
+    >
+      Get Started
+      <div
+        className={`
+          absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
+        `}
+      />
+    </button>
+  );
+}

app/components/logout-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+
+export function LogoutButton() {
+  return (
+    <button
+      className={`
+        relative mb-24 flex flex-row rounded bg-slate-700 px-20 py-4 transition-colors
+        hover:bg-slate-600
+      `}
+      onClick={async (event) => {
+        event.preventDefault();
+        signOut();
+      }}
+    >
+      Logout
+      <div
+        className={`
+          absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
+        `}
+      />
+    </button>
+  );
+}

app/games/page.tsx

@@ -1,3 +1,36 @@
+import Link from "next/link";
+
+import { LogoutButton } from "../components/logout-button";
+
 export default function Page() {
-  return <p>Games</p>;
+  return (
+    <>
+      <div
+        className={`
+          flex size-full flex-col items-center justify-center bg-gradient-to-r from-slate-950
+          to-slate-800 py-20
+        `}
+      >
+        <h1 className="text-8xl font-black uppercase">Games</h1>
+
+      </div>
+
+      <div className="mx-auto mt-4 flex w-full max-w-3xl flex-col gap-4 p-10">
+        <p>
+          Find the games you want to play in the list below. Some games needs
+          your playername for whitelist. You can always come back to this page
+          by login in again.
+        </p>
+        <details className="rounded border border-slate-800 p-4">
+          <summary>Minecraft</summary>
+          <p>
+            To connect to minecraft visit{" "}
+            <Link href="mc.chs.se">mc.chs.se</Link>.
+          </p>
+        </details>
+
+        <LogoutButton />
+      </div>
+    </>
+  );
 }

app/lib/cn.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

app/page.tsx

@@ -1,16 +1,11 @@
-"use client";
-
-import { signIn } from "next-auth/react";
+import { LoginButton } from "@/app/components/login-button";
 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 = "boxyhq.com";
-const product = "saml-demo.boxyhq.com";
-
 export default function Home() {
   return (
     <>
@@ -27,29 +22,7 @@ export default function Home() {
             A part of Chalmers student union
           </p>
         </h1>
-        <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",
-              {
-                redirectTo: "http://localhost:3000/games",
-              },
-              { tenant, product },
-            );
-          }}
-        >
-          Get Started
-          <div
-            className={`
-              absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
-            `}
-          />
-        </button>
+        <LoginButton />
         <div className="flex w-full flex-row items-center justify-center gap-4">
           <Image
             src={gud}
@@ -91,23 +64,7 @@ export default function Home() {
         </div>
       </div>
       <div className="flex w-full items-center justify-center">
-        <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={`
-              absolute right-6 size-4 translate-y-1 rotate-45 border-r-2 border-t-2 border-slate-200
-            `}
-          />
-        </button>
+        <LoginButton />
       </div>
       <footer
         className={`

middlewares.ts

@@ -0,0 +1,17 @@
+import { withAuth } from 'next-auth/middleware';
+
+// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
+export default withAuth({
+  callbacks: {
+    authorized({ token }) {
+      // // `/admin` requires admin role
+      // if (req.nextUrl.pathname === '/admin') {
+      //   return token?.userRole === 'admin';
+      // }
+      // `/me` only requires the user to be logged in
+      return !!token;
+    },
+  },
+});
+
+export const config = { matcher: ['/games'] };