Merge pull request #64 from grant-baer/protect-pages

protected pages and passed cookie when creating img

Backend/backend.py

@@ -277,6 +277,28 @@ def register():
         return jsonify({"message": "Failed to create user!!"}), 500
 
 
+@app.route("/api/verify_user", methods=["GET"])
+@jwt_required()
+def verify_user():
+    try:
+        # Retrieve the user by username
+        user = get_jwt_identity()
+        temp = User.objects.get(pk=user).username
+        return jsonify({'authenticated': True}), 200   
+
+    except DoesNotExist:
+        # If the user is not found
+        return jsonify({"error": "User not found"}), 404
+    except jwt.ExpiredSignatureError:
+        # Token has expired
+        return jsonify({'authenticated': False}), 200
+    except jwt.InvalidTokenError:
+        # Invalid token
+        return jsonify({'authenticated': False}), 200
+    except Exception as e:
+        # Handle any other exceptions
+        return jsonify({"error": str(e)}), 500
+
 if __name__ == "__main__":
     db_connect()
     try:

Frontend/src/pages/auth.js

@@ -1,21 +1,21 @@
 // auth.js (utility file)
 
 // Import the required libraries
-import jwt from "jsonwebtoken";
+import axios from 'axios';
 
-// Secret key used to sign the JWT tokens (should match the key used in your backend)
-const JWT_SECRET = "CHANGE_TO_SECURE_KEY";
-
-// Function to check if the user is authenticated based on the JWT token
-export function isAuthenticated(token) {
+// Function to check if the user is authenticated based on the backend verification
+export async function isAuthenticated(token) {
   try {
-    // Verify and decode the JWT token
-    const decodedToken = jwt.verify(token, JWT_SECRET);
+    // make axios get request sending cookie.
+    const response = await axios.get('http://localhost:5000/api/verify_user', {
+      headers: {
+        Authorization: `Bearer ${token}`, // Send the JWT token in the Authorization header
+      },
+    });
 
-    // If the verification is successful, the user is authenticated
-    return true;
+    return response.data.authenticated;
   } catch (error) {
-    // If there's an error, such as an expired or invalid token, the user is not authenticated
+    // console.error('Error during user verification:', error);
     return false;
   }
 }

Frontend/src/pages/create.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import axios from "axios";
 import Image from "next/image";
 import Cookie from "js-cookie";
+import { isAuthenticated } from "./auth";
+
 
 export default function Create() {
   const [text, setText] = useState("");
@@ -19,6 +21,11 @@ export default function Create() {
       await axios.post(
         "http://localhost:5000/generate_image",
         { prompt: text },
+        {
+          headers: {
+              "Authorization": `Bearer ${Cookie.get("token")}`
+          }
+        },
       ).then(response => {
           if (response.data.output) {
             setUrl(response.data.output);
@@ -114,3 +121,24 @@ export default function Create() {
     </div>
   );
 }
+
+
+export async function getServerSideProps(context) {
+  const { req } = context;
+  const token = req.cookies["token"];
+
+  if (!await isAuthenticated(token)) {
+    // If the user is not authenticated, redirect them to the login page
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  // If the user is authenticated, render the Create page
+  return {
+    props: {}, // Will be passed to the page component as props
+  };
+}

Frontend/src/pages/index.js

@@ -2,6 +2,8 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { isAuthenticated } from "./auth";
+
 
 export default function InitialLanding() {
   return (
@@ -32,3 +34,23 @@ export default function InitialLanding() {
     </div>
   );
 }
+
+export async function getServerSideProps(context) {
+  const { req } = context;
+  const token = req.cookies["token"]; // Replace "your_cookie_name" with your actual cookie name
+
+  if (await isAuthenticated(token)) {
+    // If the user is authenticated, redirect them to the Create page
+    return {
+      redirect: {
+        destination: "/create",
+        permanent: false,
+      },
+    };
+  }
+
+  // If the user is authenticated, render the Index page
+  return {
+    props: {}, // Will be passed to the page component as props
+  };
+}

Frontend/src/pages/portfolio.js

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { isAuthenticated } from "./auth"; // Make sure to use the correct path
+import { isAuthenticated } from "./auth";
 import Cookie from "js-cookie";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
@@ -42,3 +42,23 @@ export default function Portfolio() {
     </div>
   );
 }
+
+export async function getServerSideProps(context) {
+  const { req } = context;
+  const token = req.cookies["token"];
+
+  if (!await isAuthenticated(token)) {
+    // If the user is not authenticated, redirect them to the login page
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  // If the user is authenticated, render the Portfolio page
+  return {
+    props: {}, // Will be passed to the page component as props
+  };
+}

Frontend/src/pages/vote.js

@@ -1,6 +1,7 @@
 // src/pages/vote.js
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { isAuthenticated } from "./auth";
 
 import styles from './vote.module.css';
 
@@ -46,6 +47,27 @@ export default function Vote() {
 }
 
 
+export async function getServerSideProps(context) {
+  const { req } = context;
+  const token = req.cookies["token"];
+
+  if (!await isAuthenticated(token)) {
+    // If the user is not authenticated, redirect them to the login page
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  // If the user is authenticated, render the Vote page
+  return {
+    props: {}, // Will be passed to the page component as props
+  };
+}
+
+
 // import Image from "next/image";
 // import { useState, useEffect } from "react";
 // import eloRating from "elo-rating";