initial galtinn oauth implementation

We're not fetching any data yet. Just authenticating towards galtinn

.env.example

@@ -0,0 +1,4 @@
+NEXTAUTH_URL=http://localhost:3000
+GALTINN_API_URL=http://localhost:8000/api
+GALTINN_CLIENT_ID=
+GALTINN_CLIENT_SECRET=

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "14.2.13",
+        "next-auth": "^4.24.11",
         "react": "^18",
         "react-dom": "^18"
       },
@@ -36,6 +37,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -445,6 +458,15 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@panva/hkdf": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
+      "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1300,6 +1322,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3157,6 +3188,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3480,6 +3520,38 @@
         }
       }
     },
+    "node_modules/next-auth": {
+      "version": "4.24.11",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
+      "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
+      "license": "ISC",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.7.0",
+        "jose": "^4.15.5",
+        "oauth": "^0.9.15",
+        "openid-client": "^5.4.0",
+        "preact": "^10.6.3",
+        "preact-render-to-string": "^5.1.19",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "@auth/core": "0.34.2",
+        "next": "^12.2.5 || ^13 || ^14 || ^15",
+        "nodemailer": "^6.6.5",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@auth/core": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -3518,6 +3590,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3647,6 +3725,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oidc-token-hash": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
+      "integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10.13.0 || >=12.0.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3657,6 +3744,42 @@
         "wrappy": "1"
       }
     },
+    "node_modules/openid-client": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.1.tgz",
+      "integrity": "sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==",
+      "license": "MIT",
+      "dependencies": {
+        "jose": "^4.15.9",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.2.0",
+        "oidc-token-hash": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/openid-client/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/openid-client/node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3986,6 +4109,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/preact": {
+      "version": "10.25.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.3.tgz",
+      "integrity": "sha512-dzQmIFtM970z+fP9ziQ3yG4e3ULIbwZzJ734vaMVUTaKQ2+Ru1Ou/gjshOYVHCcd1rpAelC6ngjvjDXph98unQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "license": "MIT",
+      "dependencies": {
+        "pretty-format": "^3.8.0"
+      },
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3996,6 +4141,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4116,6 +4267,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -4997,6 +5154,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5215,6 +5381,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/yaml": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.13",
+    "next-auth": "^4.24.11",
     "react": "^18",
-    "react-dom": "^18",
+    "react-dom": "^18"
-    "next": "14.2.13"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.13",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
+    "typescript": "^5"
-    "eslint-config-next": "14.2.13"
   }
 }

src/app/SessionProvider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export const NextAuthProvider = ({ children }: Props) => {
+  return <SessionProvider>{children}</SessionProvider>;
+};

src/app/components/ProfileCard.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { signOut, useSession } from "next-auth/react";
+
 import LogoutIcon from "../../../public/icons/LogoutIcon";
 
 interface ProfileCardProps {
@@ -58,6 +60,8 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
   hasUiogMembership,
   hasDnsMembership,
 }) => {
+  const { data: session } = useSession();
+
   const statusKey = hasUiogMembership
     ? hasDnsMembership
       ? "Combined"
@@ -84,13 +88,16 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
             />
           </div>
           <div className="flex flex-col">
-            <p className="font-bold">wailern</p>
+            <p className="font-bold">{session?.user?.name}</p>
             <p className="opacity-50">{membershipStatus.tag}</p>
           </div>
         </div>
 
         {/* Log Out Button */}
-        <button className="flex flex-row bg-overlay-bright px-3 py-0.25 rounded-mds outline outline-outline2 outline-1 items-center gap-3">
+        <button
+          className="flex flex-row bg-overlay-bright px-3 py-0.25 rounded-mds outline outline-outline2 outline-1 items-center gap-3"
+          onClick={() => signOut()}
+        >
           <p className="font-bold text-outline2">Log Out</p>
           <LogoutIcon className="w-5 ml-2 text-outline2" />
         </button>
@@ -99,7 +106,8 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
       {/* Membership Status */}
       <div className="flex flex-1 flex-col gap-2">
         {["UIOG", "DNS"].map((key) => {
-          const isActive = key === "UIOG" ? hasUiogMembership : hasDnsMembership;
+          const isActive =
+            key === "UIOG" ? hasUiogMembership : hasDnsMembership;
           const displayName = key === "UIOG" ? "UiO Gaming" : "DNS Standard";
           return (
             <div
@@ -108,10 +116,10 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                 isActive ? "bg-success" : "bg-failure"
               }`}
             >
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2">
-                  <p className="font-semibold pl">{isActive ? `✅` : `❌`}</p>
+                <p className="font-semibold pl">{isActive ? `✅` : `❌`}</p>
-                  <p className="font-semibold pl">{displayName}</p>
+                <p className="font-semibold pl">{displayName}</p>
-                </div>
+              </div>
             </div>
           );
         })}

src/app/layout.tsx

@@ -2,7 +2,9 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 
-import { Nunito, Rubik } from "next/font/google"
+import { NextAuthProvider } from "./SessionProvider";
+
+import { Nunito, Rubik } from "next/font/google";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -19,15 +21,15 @@ const nunito = Nunito({
   weight: ["400", "500", "600", "800"],
   style: ["normal", "italic"],
   subsets: ["latin"],
-  variable: "--font-nunito"
+  variable: "--font-nunito",
-})
+});
 
 const rubik = Rubik({
   weight: ["400", "500", "600", "800"],
   style: ["normal", "italic"],
   subsets: ["latin"],
-  variable: "--font-rubik"
+  variable: "--font-rubik",
-})
+});
 
 export const metadata: Metadata = {
   title: "mus",
@@ -44,7 +46,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased ${nunito.variable} ${rubik.variable}`}
       >
-        {children}
+        <NextAuthProvider>{children}</NextAuthProvider>
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,9 +1,21 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+
 import ButtonSpecial from "./components/ButtonSpecial";
 import Button from "./components/Button";
 import Image from "next/image";
 import LoginIcon from "../../public/icons/LoginIcon";
 
+import Main from "../pages/main";
+
 export default function Home() {
+  const { data: session } = useSession();
+
+  if (session) {
+    return <Main />;
+  }
+
   return (
     <div className="flex flex-col p-2.5 gap-2.5 place-items-center place-content-center h-full">
       <div className="flex flex-1 flex-col bg-foreground rounded-lg p-5 gap-6 h-full w-full max-w-3xl">
@@ -64,8 +76,8 @@ export default function Home() {
             <Button
               text="Log in with Galtinn"
               type="primary"
-              icon={<LoginIcon className="w-5 text-black"/>}
+              icon={<LoginIcon className="w-5 text-black" />}
-              link="https://galtinn.neuf.no/home/"
+              link="/api/auth/signin" // TODO: use signin() function with onClick event
             />
           </div>
           <div className="w-full md:w-2/5">

src/pages/_app.tsx

@@ -1,15 +1,18 @@
-import { Nunito } from 'next/font/google';
+import { SessionProvider } from "next-auth/react";
+import { Nunito } from "next/font/google";
 
 const nunito = Nunito({
-  subsets: ['latin'] 
+  subsets: ["latin"],
 });
 
-import { AppProps } from 'next/app';
+import { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <main className={nunito.className}>
+    <SessionProvider session={pageProps.session}>
-      <Component {...pageProps} />
+      <main className={nunito.className}>
-    </main>
+        <Component {...pageProps} />
+      </main>
+    </SessionProvider>
   );
 }

src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,36 @@
+import NextAuth from "next-auth";
+
+export const authOptions = {
+  providers: [
+    {
+      id: "galtinn",
+      name: "Galtinn",
+      type: "oauth",
+      wellKnown: `${process.env.GALTINN_API_URL}/oauth/.well-known/openid-configuration/`,
+      //auth: `${process.env.GALTINN_API_URL}/oauth/authorize`,
+      //token: `${process.env.GALTINN_API_URL}/oauth/token`,
+      userinfo: `${process.env.GALTINN_API_URL}/me/oauth`,
+      checks: ["pkce", "state"],
+      clientId: process.env.GALTINN_ID,
+      clientSecret: process.env.GALTINN_SECRET,
+      
+      profile(profile) {
+        return {
+          id: profile.sub,
+          name: profile.name, // It's dumb to assume names are formatted this way but oh well
+          email: profile.email,
+          username: profile.preferred_username,
+          date_of_birth: profile.date_of_birth,
+          place_of_study: profile.place_of_study,
+          is_volunteer: profile.is_volunteer,
+          is_member: profile.is_member,
+          last_membership: profile.last_membership,
+          groups: profile.groups,
+          discord_profile: profile.discord_profile,
+        };
+      },
+    },
+  ],
+};
+
+export default NextAuth(authOptions);