Skip to content

fix: group charter login #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 14, 2025
Merged

fix: group charter login #298

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions platforms/group-charter-manager/src/components/auth/login-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,19 @@ export default function LoginScreen() {
eventSource.onmessage = (e) => {
const data = JSON.parse(e.data);
console.log('Auth data received:', data);

const { user, token } = data;

// Set authentication data
setAuthId(user.id);
setAuthToken(token);

// Close the event source
eventSource.close();

// Set authenticating state
setIsAuthenticating(true);

// Force a page refresh to trigger AuthProvider re-initialization
window.location.reload();
};
Comment on lines 47 to 65
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Harden SSE handler: guard parsing, validate payload, and close on error

A malformed/heartbeat SSE event will throw on JSON.parse and leave the stream open. Add try/catch and validate the expected shape before using it.

Apply this diff:

-    eventSource.onmessage = (e) => {
-      const data = JSON.parse(e.data);
-      console.log('Auth data received:', data);
-
-      const { user, token } = data;
-
-      // Set authentication data
-      setAuthId(user.id);
-      setAuthToken(token);
-
-      // Close the event source
-      eventSource.close();
-
-      // Set authenticating state
-      setIsAuthenticating(true);
-
-      // Force a page refresh to trigger AuthProvider re-initialization
-      window.location.reload();
-    };
+    eventSource.onmessage = (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        console.log('Auth data received:', data);
+        const { user, token } = data || {};
+        if (!user?.id || !token) {
+          console.warn('Incomplete auth payload, ignoring:', data);
+          return;
+        }
+        setIsAuthenticating(true);
+        setAuthId(user.id);
+        setAuthToken(token);
+        eventSource.close();
+      } catch (err) {
+        console.error('Failed to parse auth event:', err);
+        eventSource.close();
+      }
+      // Force a page refresh to trigger AuthProvider re-initialization
+      window.location.reload();
+    };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
eventSource.onmessage = (e) => {
const data = JSON.parse(e.data);
console.log('Auth data received:', data);
const { user, token } = data;
// Set authentication data
setAuthId(user.id);
setAuthToken(token);
// Close the event source
eventSource.close();
// Set authenticating state
setIsAuthenticating(true);
// Force a page refresh to trigger AuthProvider re-initialization
window.location.reload();
};
eventSource.onmessage = (e) => {
try {
const data = JSON.parse(e.data);
console.log('Auth data received:', data);
const { user, token } = data || {};
if (!user?.id || !token) {
console.warn('Incomplete auth payload, ignoring:', data);
return;
}
setIsAuthenticating(true);
setAuthId(user.id);
setAuthToken(token);
eventSource.close();
} catch (err) {
console.error('Failed to parse auth event:', err);
eventSource.close();
}
// Force a page refresh to trigger AuthProvider re-initialization
window.location.reload();
};
🤖 Prompt for AI Agents 
In platforms/group-charter-manager/src/components/auth/login-screen.tsx around
lines 47 to 65, the SSE onmessage handler currently calls JSON.parse and assumes
the payload shape which can throw or lead to misuse on malformed/heartbeat
events; wrap parsing in a try/catch, treat empty or non-JSON data as a heartbeat
and ignore it, validate that the parsed object has the expected user and token
properties (user.id and token) before calling setAuthId/setAuthToken, and ensure
eventSource.close() is invoked both on successful authentication and in the
catch/error path; also log parse/validation errors and avoid calling
window.location.reload() unless authentication was successfully set.

Expand Down Expand Up @@ -90,8 +90,22 @@ export default function LoginScreen() {
}

return (
<div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
<div className="flex flex-col gap-6 min-h-screen items-center justify-center p-4">
<div className="flex flex-col gap-2 items-center justify-center">
<div className="flex gap-4 justify-center items-center">
<Image
src="/logo.png"
alt="Group Charter Manager Logo"
width={50}
height={50}
/>
<h1 className="text-3xl font-bold">Group Charter</h1>
</div>
<p class="text-gray-600">
Coordinate your group in the MetaState
</p>
Comment on lines +104 to +106
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix JSX attribute: use className, not class

React/TSX doesn’t recognize the HTML class attribute. This will error at compile/runtime.

Apply this diff:

-            <p class="text-gray-600">
+            <p className="text-gray-600">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p class="text-gray-600">
Coordinate your group in the MetaState
</p>
<p className="text-gray-600">
Coordinate your group in the MetaState
</p>
🤖 Prompt for AI Agents 
In platforms/group-charter-manager/src/components/auth/login-screen.tsx around
lines 104 to 106, the JSX uses the HTML attribute "class" which React/TSX
doesn't accept; change the attribute to "className" on the <p> element (and any
other JSX elements in that range) so it compiles correctly (e.g., replace
class="text-gray-600" with className="text-gray-600").

</div>
<div className="bg-white/50 p-8 rounded-lg shadow-lg max-w-md w-full">
<div className="text-center mb-8">
<h1 className="text-2xl font-bold text-gray-900 mb-2">
Group Charter Manager
Expand Down Expand Up @@ -133,7 +147,7 @@ export default function LoginScreen() {
Use your W3DS wallet to scan this QR code and authenticate
</p>
</div>

<div className="p-4 rounded-xl bg-gray-100 text-gray-700 mt-4">
You are entering Group Charter - a group charter management
platform built on the Web 3.0 Data Space (W3DS)
Expand All @@ -142,7 +156,7 @@ export default function LoginScreen() {
is stored in your own sovereign eVault, not on centralised
servers.
</div>

<Image
src="/W3DS.svg"
alt="W3DS Logo"
Expand Down
Loading