JWT tokens working with oidc somewhat working

pennlabs · Nov 10, 2024 · 9362a78 · 9362a78
1 parent 8d91c93
commit 9362a78
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 55 deletions.
diff --git a/frontend/review-nextjs/app/(header)/(auth)/layout.tsx 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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