combined some auth serverless functions

Author: hkittelberger

frontend/api/approval.js

@@ -0,0 +1,106 @@
+
+
+
+export async function approveHandler(req, res) {
+    if (req.method !== "POST") {
+        return res.status(405).end("Method Not Allowed");
+    }
+
+    const { userId } = req.body;
+
+    const response = await fetch(`https://api.clerk.dev/v1/users/${userId}`, {
+        method: "PATCH",
+        headers: {
+            Authorization: `Bearer ` + process.env.CLERK_SECRET_KEY,
+            "Content-Type": "application/json",
+        },
+        
+        body: JSON.stringify({
+            public_metadata: {
+                // Set Clerk metadata to approved
+                approved: true
+            },
+        }),
+    });
+
+    if (!response.ok) {
+        return res.status(500).json({ message: "Failed to approve user" });
+    }
+
+    res.status(200).json({ message: "User approved" });
+}
+
+export async function checkHandler(req, res) {
+    const { userId } = req.body;
+
+    if (!userId) {
+      return res.status(400).json({ error: "Missing userId" });
+    }
+
+    const response = await fetch(`https://api.clerk.dev/v1/users/${userId}`, {
+      headers: {
+        Authorization: `Bearer sk_test_wGcUTzeo4CJJ2iVUObnFRmkbaPT6pzAXcnonlv8q8w`, // GET RID OF HARDCODED EVENTUALLY
+      },
+    });
+  
+    if (!response.ok) {
+      return res.status(500).json({ error: "Failed to fetch user from Clerk" });
+    }
+  
+    const user = await response.json();
+  
+    const approved = user.public_metadata?.approved === true;
+    res.status(200).json({ approved });
+}
+
+export async function unapprovedHandler(req, res) {
+    console.log("Testing unapproved handler");
+    try {
+        const response = await fetch("https://api.clerk.dev/v1/users", {
+            headers: {
+                Authorization: `Bearer ` + process.env.CLERK_SECRET_KEY,
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Clerk API error: ${response.statusText}`);
+        }
+
+        console.log("Response from Clerk API:", response);
+
+        const allUsers = await response.json();
+
+        // Check the format of the response
+        const usersArray = Array.isArray(allUsers) ? allUsers : allUsers?.data || [];
+
+        const unapprovedUsers = usersArray
+            .filter(user => user.public_metadata?.approved !== true)
+            .map(user => ({
+                id: user.id,
+                email: user.email_addresses?.[0]?.email_address || "Unknown",
+                name: `${user.first_name ?? ""} ${user.last_name ?? ""}`.trim()
+            }));
+
+        res.status(200).json({ users: unapprovedUsers });
+    } catch (error) {
+        console.error("Failed to fetch users:", error);
+        res.status(500).json({ error: "Failed to fetch unapproved users" });
+    }
+}
+
+export default async function handler(req, res) {
+  const { action } = req.query;
+
+  console.log("Action:", action);
+  
+  switch(action) {
+      case 'approve':
+          return approveHandler(req, res);
+      case 'check':
+          return checkHandler(req, res);
+      case 'unapproved':
+          return unapprovedHandler(req, res);
+      default:
+          return res.status(400).json({ error: 'Invalid action' });
+  }
+}

frontend/api/approve-user.js

@@ -54,10 +54,13 @@ export default function SettingsPage() {
 
   useEffect(() => {
     const fetchUnapprovedUsers = async () => {
+      console.log("Is admin:", isAdmin);
       if (!isAdmin) return;
       try {
-        const response = await fetch("/api/get-unapproved-users"); // Your serverless API
+        const response = await fetch("/api/approval?action=unapproved"); // Your serverless API
+        // const response = await fetch("/api/get-unapproved-users")
         const data = await response.json();
+        console.log("All users:", response);
         setApprovals(data.users); // expected shape: [{ id, email, firstName, lastName }]
       } catch (error) {
         console.error("Error fetching unapproved users:", error);
@@ -83,7 +86,7 @@ export default function SettingsPage() {
 
   const approveVerification = async (id) => {
     try {
-      const res = await fetch("/api/approve-user", {
+      const res = await fetch("/api/approval?action=approve", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -115,6 +118,7 @@ export default function SettingsPage() {
         </div>
         <div className="body">
           <div className="left-column">
+            {user && (
             <div className="profile-card">
               <h2 className="profile-card-title">Profile</h2>
               <div className="nameText">
@@ -159,6 +163,7 @@ export default function SettingsPage() {
                 </div>
               </form>
             </div>
+            )}
             <div className="options-card">
               <div className="toggle">
                 <label className="switch">

frontend/api/check-approved.js

@@ -178,6 +178,7 @@ export default function Signin() {
         </div>
         <div className="inputContainer">
           <label
+            suppressHydrationWarning
             className="errorLabel"
             style={{
               backgroundColor: error ? "rgba(255, 44, 44, 0.2)" : "#FFFFFF",
@@ -230,9 +231,7 @@ export default function Signin() {
             className="textButton"
             onClick={() => router.push("/reset_password")}
           >
-            <strong>
-              <p className="tiny">Forgot password?</p>
-            </strong>
+            <strong className="tiny">Forgot password?</strong>
           </button>
         </div>
         <div className="inputContainer login-button">