Authentication Flow - Clarified ✅¶

Date: November 24, 2025 Status: Simplified and working

🎯 The Problem¶

There was confusion in the UI with two different "Connect Wallet" buttons: 1. Old M2 auth system (email/password + wallet) 2. New M3 wallet integration (Solana on-chain)

This created a confusing user experience.

✅ The Solution¶

Simplified to wallet-only authentication for on-chain operations.

What Changed¶

Before (Confusing):

Header:
  - WalletConnectButton (for on-chain)
  - Sign In button (for backend auth)
  - Connect Wallet button (for backend auth)

After (Clear):

Header:
  - WalletConnectButton (single button for Solana wallet)

🔄 Current Authentication Architecture¶

Two Separate Systems (Intentional)¶

1. Backend Auth (M2) - For Creator/Curator Features¶

Purpose: Account management for non-trading features Location: stores/auth.ts Used For: - Creating market drafts - Curator console access - User profiles - Market submissions

Methods: - Email/password login - JWT tokens - Session management

Status: Still available via AuthModal component (not in header currently)

2. Wallet Connection (M3) - For On-Chain Trading¶

Purpose: Solana blockchain interaction Location: stores/wallet.ts Used For: - Trading on markets - Signing transactions - Adding/removing liquidity - Claiming winnings - All on-chain operations

Methods: - Phantom wallet - Solflare wallet - Direct blockchain connection

Status: ✅ Primary in header, fully functional

🎨 Updated UI Flow¶

┌────────────────────────────────────────────┐
│  [Logo] Markets Create Curate Proofs       │
│                    [Connect Wallet Button] │
└────────────────────────────────────────────┘

┌────────────────────────────┐
│  [Logo]            [Menu ≡]│
└────────────────────────────┘

When menu open:
┌────────────────────────────┐
│  Markets                   │
│  Create                    │
│  Curate                    │
│  Proofs                    │
│  [Connect Wallet Button]   │
└────────────────────────────┘

🔧 Implementation Details¶

What Was Removed from Header¶

Desktop: - ❌ Old "Sign in" button - ❌ Old "Connect Wallet" button (backend auth) - ❌ User profile link - ❌ Sign out button

Mobile: - ❌ Same items as desktop

What Remains in Header¶

Desktop & Mobile: - ✅ WalletConnectButton (Solana wallet) - ✅ WalletModal (wallet selection) - ✅ Navigation links

📋 User Journey¶

For Trading Users (Primary Flow)¶

Visit site → See "Connect Wallet" button
Click button → Wallet modal opens
Select Phantom/Solflare → Wallet extension opens
Approve connection → Wallet connected
Trade on markets → Sign transactions with wallet

No email/password required for trading!

For Creator/Curator Users (If Needed)¶

Backend auth (M2) is still available in the codebase if needed: - stores/auth.ts - Auth store - components/AuthModal.vue - Login/register modal - Can be re-added to UI if needed for creator/curator features

Currently: Not shown in header (simplified for trading focus)

🎯 Design Philosophy¶

Why Wallet-Only in Header?¶

M3 Focus: On-chain trading is the primary feature Simplicity: One clear action for users Web3 Native: Wallet connection is standard in blockchain apps Future-Proof: All on-chain features use wallet connection

Backend Auth Still Available¶

The M2 auth system (stores/auth.ts) is still in the codebase and can be used: - Programmatically in components - Via AuthModal component - For API endpoints that require backend auth

It's just not in the header UI right now.

🔄 Future: Unified Auth (Optional)¶

If you want to unify both systems later:

Option 1: Wallet-First Auth¶

User connects wallet
Backend uses wallet address as identifier
No separate email/password needed
Sign messages to prove wallet ownership

Option 2: Dual Auth¶

User can choose: Email/Password OR Wallet
Both stored in backend
Can link wallet to existing account

Option 3: Keep Separate (Current)¶

Wallet for on-chain operations
Backend auth for creator/curator features
Two independent systems

Current choice: Option 3 (Keep Separate)

🎨 Code Changes Made¶

AppHeader.vue¶

Removed:

<!-- Old auth buttons -->
<template v-if="authStore.isAuthenticated">
  <RouterLink to="/account" class="nav__link user-link">
    {{ authStore.user?.username }}
  </RouterLink>
  <button class="ghost" @click="handleLogout">Sign out</button>
</template>
<template v-else>
  <button class="ghost" @click="openAuthModal('login')">Sign in</button>
  <button class="cta" @click="openAuthModal('register')">Connect Wallet</button>
</template>

<!-- Auth modal -->
<AuthModal :is-open="authModalOpen" />

Kept:

<!-- Wallet connection only -->
<div class="actions">
  <WalletConnectButton />
</div>

<WalletModal />

Removed Imports:

import { useAuthStore } from '@/stores/auth';
import AuthModal from './AuthModal.vue';

Removed Functions:

function openAuthModal(mode: 'login' | 'register') { ... }
function closeAuthModal() { ... }
function handleAuthSuccess() { ... }
function handleLogout() { ... }

✅ Result¶

Clear User Experience¶

✅ One "Connect Wallet" button
✅ No confusion about which wallet to use
✅ Clear on-chain focus
✅ Simplified navigation

Clean Code¶

✅ Removed unused auth modal logic from header
✅ Cleaner imports
✅ Fewer state variables
✅ Simpler component

Flexible Architecture¶

✅ Backend auth still available in codebase
✅ Can re-add auth UI if needed
✅ Wallet connection independent
✅ Both systems functional

🧪 Testing¶

Test the Simplified Flow¶

Open http://localhost:5173
See single "Connect Wallet" button in header
Click button
Modal opens with Phantom/Solflare options
Connect wallet
Verify address appears in header
No confusion about email/password

Verify Backend Auth Still Works (If Needed)¶

If you need to use backend auth:

// In any component
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();

// Login programmatically
await authStore.login(email, password);

// Or show modal
import AuthModal from '@/components/AuthModal.vue';
// Add to template and control with v-if

📊 Comparison¶

Before (Confusing)¶

Actions:
  1. Connect Wallet (Solana)
  2. Sign In (Backend)
  3. Connect Wallet (Backend) ← DUPLICATE!
  4. User Profile
  5. Sign Out

User thinks: "Which wallet? Why two buttons?"

After (Clear)¶

Actions:
  1. Connect Wallet (Solana) ← SINGLE BUTTON!

User thinks: "Connect wallet to trade. Simple!"

🎯 When to Use Each System¶

Use Wallet Connection (M3) For:¶

✅ Trading on markets
✅ Adding liquidity
✅ Removing liquidity
✅ Claiming winnings
✅ Signing transactions
✅ All blockchain operations

Use Backend Auth (M2) For (If Needed):¶

Creating market drafts via API
Curator console access via API
User profile management
Non-blockchain features

Note: Currently, backend auth is NOT shown in UI but still available in code.

🚀 Benefits¶

For Users¶

✅ Simpler: One button, clear purpose
✅ Faster: Direct wallet connection
✅ Standard: Matches other Web3 apps
✅ No confusion: Clear what to do

For Developers¶

✅ Cleaner code: Less complexity in header
✅ Flexible: Can re-add auth UI if needed
✅ Focused: M3 on-chain features first
✅ Maintainable: Separation of concerns

📝 Migration Notes¶

If You Need Backend Auth UI Back¶

Import AuthModal:

import AuthModal from './AuthModal.vue';
import { useAuthStore } from '@/stores/auth';

Add state:

const authStore = useAuthStore();
const authModalOpen = ref(false);
const authMode = ref<'login' | 'register'>('login');

Add buttons:

<template v-else>
  <button class="ghost" @click="openAuthModal('login')">Sign in</button>
</template>

Add modal:

<AuthModal :is-open="authModalOpen" :initial-mode="authMode" />

🎉 Summary¶

Problem: Confusing dual auth with duplicate buttons Solution: Simplified to wallet-only in header Result: Clear, focused, Web3-native user experience

Backend auth: Still available, just not in header UI Wallet connection: Primary method for on-chain operations

Last Updated: November 24, 2025 Status: ✅ Simplified and working Dev Server: ✅ Live at http://localhost:5173 with changes