Fix: Chat page requires manual username entry — should auto-fill from logged-in user session

[Ananya-CM]

🐛 Bug Report

Area: Chat Page — Username Input
Type: Bug — Poor Authentication UX
Priority: High

---

📌 Description

The Chat page (/chat) shows a plain text input
asking users to manually type their name before
they can chat. This is broken UX because:

1. The app already has a full authentication
   system (Supabase login)
2. The logged-in user's name is already
   available in the session
3. Asking authenticated users to type their
   name again is confusing and amateur

This is a real authentication integration
gap that affects every user of the chat feature.

---

🔍 Proof — Manual Input in Source Code

In frontend/app/chat/page.tsx:

const [username, setUsername] = useState("");

And in the JSX:

<input
  value={username}
  onChange={(e) => setUsername(e.target.value)}
  placeholder="Enter name"
  className="w-full rounded-2xl border..."
/>

The username is completely empty by default
and requires manual entry even though the
user is already authenticated via Supabase.

---

❌ Current Behaviour

1. User logs in successfully
2. Navigates to /chat
3. Sees an empty "Enter name" input box
4. Must manually type their name to use chat
5. If they type wrong name, messages appear
   under wrong identity

---

✅ Expected Behaviour

1. User logs in successfully
2. Navigates to /chat
3. Username is automatically filled from
   Supabase session (user_metadata.full_name
   or email)
4. User can start chatting immediately
5. Username input can be hidden or shown
   as read-only display

---

💡 Proposed Fix

In frontend/app/chat/page.tsx:

Replace empty useState("") with session fetch:

const [username, setUsername] = useState("");

useEffect(() => {
  const getUsername = async () => {
    if (!supabase) return;
    const { data: { session } } = 
      await supabase.auth.getSession();
    if (session?.user) {
      const name =
        session.user.user_metadata?.full_name ||
        session.user.email?.split("@")[0] ||
        "User";
      setUsername(name);
    }
  };
  getUsername();
}, []);

This auto-fills the username from the
authenticated session so users don't need
to type their name manually.

---

📂 File to Change

frontend/app/chat/page.tsx — only this file

---

@Shriii19
I'd like to work on this issue.
Could you please assign it to me?

nsoc26

[github-actions]

👋 Hey @Ananya-CM!

Thanks for opening this issue! 🚀

📌 NSoC'26 Contribution Guidelines

⚠️ Please follow these rules carefully:

• Do NOT create a PR until this issue is assigned to you
• Include NSoC'26 tag
• Include screenshots if it's UI-related
• Follow all contribution guidelines properly

🧑‍💻 A mentor will review and assign this issue soon.

---

🙏 Thank you for raising this issue!
We’ll review it as soon as possible. We truly appreciate your contribution ✨

📖 Meanwhile, please make sure you have checked:

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

🚫 Reminder: Do NOT create a PR until this issue has been assigned.

Happy coding! 💻🔥

[Shriii19]

@Ananya-CM go for it.