From 9362a78a880419ba521b908a69ff02af005c5ec4 Mon Sep 17 00:00:00 2001
From: luke-rt <luke.rtong@gmail.com>
Date: Sun, 10 Nov 2024 13:18:23 -0500
Subject: [PATCH] JWT tokens working with oidc somewhat working

---
 .../app/(header)/(auth)/layout.tsx            | 22 ++++++++++++
 .../app/(header)/(auth)/review/page.tsx       | 35 +++++++++++++++++++
 .../app/(header)/review/page.tsx              |  8 -----
 frontend/review-nextjs/app/layout.tsx         | 16 ++-------
 .../review-nextjs/components/Skeleton.tsx     |  7 ++++
 frontend/review-nextjs/lib/api.ts             | 17 +++------
 frontend/review-nextjs/lib/auth.ts            | 23 ++++++++++++
 frontend/review-nextjs/middleware.ts          | 22 ------------
 8 files changed, 95 insertions(+), 55 deletions(-)
 create mode 100644 frontend/review-nextjs/app/(header)/(auth)/layout.tsx
 create mode 100644 frontend/review-nextjs/app/(header)/(auth)/review/page.tsx
 delete mode 100644 frontend/review-nextjs/app/(header)/review/page.tsx
 create mode 100644 frontend/review-nextjs/components/Skeleton.tsx
 create mode 100644 frontend/review-nextjs/lib/auth.ts
 delete mode 100644 frontend/review-nextjs/middleware.ts

diff --git a/frontend/review-nextjs/app/(header)/(auth)/layout.tsx b/frontend/review-nextjs/app/(header)/(auth)/layout.tsx
new file mode 100644
index 00000000..8e8549bc
--- /dev/null
+++ b/frontend/review-nextjs/app/(header)/(auth)/layout.tsx
@@ -0,0 +1,22 @@
+"use client";
+import Skeleton from "@/components/Skeleton";
+import { userManager } from "@/lib/auth";
+import { useEffect } from "react";
+import { AuthProvider, AuthProviderProps, useAuth } from "react-oidc-context";
+import { permanentRedirect } from "next/navigation";
+
+const config = {
+    userManager,
+    onSigninCallback: (user) => {
+        console.log(user);
+        permanentRedirect("/review");
+    },
+} satisfies AuthProviderProps;
+
+export default function AuthLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <AuthProvider {...config}>{children}</AuthProvider>;
+}
diff --git a/frontend/review-nextjs/app/(header)/(auth)/review/page.tsx b/frontend/review-nextjs/app/(header)/(auth)/review/page.tsx
new file mode 100644
index 00000000..7acc665f
--- /dev/null
+++ b/frontend/review-nextjs/app/(header)/(auth)/review/page.tsx
@@ -0,0 +1,35 @@
+"use client";
+import Skeleton from "@/components/Skeleton";
+import { cn } from "@/lib/utils";
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+
+/*
+On error with fetching data
+try {
+    userManager.signinSilent()
+} catch (error) {
+    userManager.signinRedirect()
+}
+*/
+
+export default function Review() {
+    const auth = useAuth();
+
+    return (
+        <div id="review" className={cn("mx-[20%]")}>
+            {auth.isLoading ? <Skeleton /> : <ReviewPage />}
+        </div>
+    );
+}
+
+function ReviewPage() {
+    const auth = useAuth();
+
+    return (
+        <p>
+            Secret data that needs authentication {auth.isAuthenticated}{" "}
+            {auth.user?.profile.email}
+        </p>
+    );
+}
diff --git a/frontend/review-nextjs/app/(header)/review/page.tsx b/frontend/review-nextjs/app/(header)/review/page.tsx
deleted file mode 100644
index 1051c6ad..00000000
--- a/frontend/review-nextjs/app/(header)/review/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { cn } from "@/lib/utils";
-export default function Review() {
-    return (
-        <div id="review" className={cn("mx-[20%]")}>
-            Secret review data
-        </div>
-    );
-}
diff --git a/frontend/review-nextjs/app/layout.tsx b/frontend/review-nextjs/app/layout.tsx
index 42b707b9..edc23450 100644
--- a/frontend/review-nextjs/app/layout.tsx
+++ b/frontend/review-nextjs/app/layout.tsx
@@ -1,21 +1,13 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { cn } from "@/lib/utils";
-import { AuthProvider } from "react-oidc-context";
-import Footer from "../components/Footer";
+import Footer from "@/components/Footer";
 
 export const metadata: Metadata = {
     title: "Penn Course Review",
     description: "Made by Penn Labs",
 };
 
-const oidcConfig = {
-    authority: "<your authority>",
-    clientId: "<your client id>",
-    redirectUri: "<your redirect uri>",
-    // ...
-};
-
 export default function RootLayout({
     children,
 }: Readonly<{
@@ -24,10 +16,8 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body className={cn("antialiased", "flex", "flex-col")}>
-                <AuthProvider {...oidcConfig}>
-                    {children}
-                    <Footer />
-                </AuthProvider>
+                {children}
+                <Footer />
             </body>
         </html>
     );
diff --git a/frontend/review-nextjs/components/Skeleton.tsx b/frontend/review-nextjs/components/Skeleton.tsx
new file mode 100644
index 00000000..5369c2e0
--- /dev/null
+++ b/frontend/review-nextjs/components/Skeleton.tsx
@@ -0,0 +1,7 @@
+export default function Skeleton() {
+    return (
+        <div>
+            <h1>Skeleton data</h1>
+        </div>
+    );
+}
diff --git a/frontend/review-nextjs/lib/api.ts b/frontend/review-nextjs/lib/api.ts
index f6f30726..0b96c9c1 100644
--- a/frontend/review-nextjs/lib/api.ts
+++ b/frontend/review-nextjs/lib/api.ts
@@ -1,13 +1,15 @@
-const HOST_URL = process.env.NODE_ENV === 'development'
+export const BASE_URL = process.env.NODE_ENV === 'development'
   ? 'http://localhost:3000'
-  : process.env.NEXT_PUBLIC_HOST_URL;
+  : process.env.NEXT_PUBLIC_BASE_URL;
+
+export const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID ?? "";
 
 export const doAPIRequest = (path: string, options = {}): Promise<Response> =>
   fetch(`/api${path}`, options);
 
 export function getLogoutUrl(): string {
   return `/accounts/logout/?next=${encodeURIComponent(
-    `${HOST_URL}/logout`
+    `${BASE_URL}/logout`
   )}`;
 }
 
@@ -16,12 +18,3 @@ export function getLogoutUrl(): string {
 //     window.location.pathname
 //   )}`;
 // }
-
-export async function checkAuth(): Promise<boolean> {
-  const res = await fetch("/accounts/me/");
-  if (res.status < 300 && res.status >= 200) {
-    return true;
-  } else {
-    return false;
-  }
-}
diff --git a/frontend/review-nextjs/lib/auth.ts b/frontend/review-nextjs/lib/auth.ts
new file mode 100644
index 00000000..db2aa27d
--- /dev/null
+++ b/frontend/review-nextjs/lib/auth.ts
@@ -0,0 +1,23 @@
+"use client";
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+import { BASE_URL, CLIENT_ID } from "@/lib/api";
+
+export const userManager = new UserManager({
+    authority: "https://platform.pennlabs.org/",
+    client_id: CLIENT_ID,
+    redirect_uri: `${BASE_URL}/callback`,
+    scope: "openid read",
+    metadataUrl:
+        "https://platform.pennlabs.org/accounts/.well-known/openid-configuration/",
+    metadata: {
+        authorization_endpoint:
+            "https://platform.pennlabs.org/accounts/authorize/",
+        token_endpoint: "https://platform.pennlabs.org/accounts/token/",
+        jwks_uri:
+            "https://platform.pennlabs.org/accounts/.well-known/jwks.json",
+    },
+    automaticSilentRenew: true,
+    includeIdTokenInSilentRenew: true,
+    userStore: new WebStorageStateStore({ store: window?.localStorage }),
+});
+console.log(userManager);
diff --git a/frontend/review-nextjs/middleware.ts b/frontend/review-nextjs/middleware.ts
deleted file mode 100644
index b931bbb0..00000000
--- a/frontend/review-nextjs/middleware.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NextRequest, NextResponse } from "next/server"
-import { checkAuth, } from "./lib/api"
-
-const protectedRoutes = ["/review"]
-const publicRoutes = ["/", "/faq", "/about"]
-
-export default async function middleware(req: NextRequest) {
-    // 2. Check if the current route is protected or public
-    const path = req.nextUrl.pathname
-    const isProtectedRoute = protectedRoutes.includes(path)
-    const isPublicRoute = publicRoutes.includes(path)
-      
-    // 4. Redirect to /login if the user is not authenticated
-    // if (isProtectedRoute) {
-    //     const isAuth = await checkAuth()
-    //     if (!isAuth) {
-    //         return NextResponse.redirect(new URL(getLoginUrl(), req.nextUrl))
-    //     }
-    // }
-   
-    return NextResponse.next()
-}
\ No newline at end of file