PupSpot · Pious1020 · Nov 13, 2024 · Nov 12, 2024 · Nov 12, 2024 · Nov 13, 2024
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+package-lock.json/
+package.json/
 
 # testing
 /coverage

diff --git a/app/api/auth/[...auth0].ts b/app/api/auth/[...auth0].ts
@@ -0,0 +1,18 @@
+import { handleAuth, handleLogout } from '@auth0/nextjs-auth0';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default handleAuth({
+  logout: async (req: NextApiRequest, res: NextApiResponse) => {
+    try {
+      await handleLogout(req, res, {
+        returnTo: process.env.AUTH0_BASE_URL,
+        logoutParams: {
+          federated: 'true'
+        }
+      });
+    } catch (error) {
+      console.error('Error during logout:', error);
+      res.status(500).end('Internal Server Error');
+    }
+  },
+});
diff --git a/app/components/LoginButton.tsx b/app/components/LoginButton.tsx
@@ -0,0 +1,10 @@
+const handleLogin = () => {
+  // Clear any existing auth tokens/cookies
+  document.cookie.split(";").forEach((c) => {
+    document.cookie = c
+      .replace(/^ +/, "")
+      .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
+  });
+
+  window.location.href = '/api/auth/login';
+}; 
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
+import { UserProvider } from '@auth0/nextjs-auth0/client';
 import localFont from "next/font/local";
 import "./globals.css";
-import React from "react";
+import { Providers } from './providers';
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
   weight: "100 900",
 });
+
 const geistMono = localFont({
   src: "./fonts/GeistMonoVF.woff",
   variable: "--font-geist-mono",
@@ -45,19 +47,14 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <html lang="en">
-      <head>
-      <link rel="icon" href="/pawicon.png" type="image/icon" />
-      </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
-}
+}
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { UserProvider } from '@auth0/nextjs-auth0/client';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <UserProvider>
+      {children}
+    </UserProvider>
+  );
+} 
diff --git a/app/utils/auth0-config.ts b/app/utils/auth0-config.ts
@@ -0,0 +1,17 @@
+import { initAuth0 } from '@auth0/nextjs-auth0';
+
+export const auth0 = initAuth0({
+  baseURL: process.env.AUTH0_BASE_URL,
+  clientID: process.env.AUTH0_CLIENT_ID,
+  clientSecret: process.env.AUTH0_CLIENT_SECRET,
+  issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
+  secret: process.env.AUTH0_SECRET,
+  session: {
+    absoluteDuration: 24 * 60 * 60,
+    cookie: {
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      domain: process.env.NODE_ENV === "production" ? "your-domain.com" : "localhost",
+    }
+  },
+}); 
diff --git a/components/BrowserComponent.tsx b/components/BrowserComponent.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function BrowserComponent() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null; // or loading state
+  }
+
+  return (
+    <div>
+      {/* Your component content goes here */}
+    </div>
+  );
+} 
diff --git a/components/ErrorBoundry.tsx b/components/ErrorBoundry.tsx
@@ -0,0 +1,46 @@
+// components/ErrorBoundary.tsx
+'use client';
+
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
+            <button
+              className="bg-blue-600 text-white px-4 py-2 rounded"
+              onClick={() => this.setState({ hasError: false })}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}