Skip to content

EMAIL_SETUP_GUIDE.md

Latest commit

 

History

History
151 lines (117 loc) · 3.91 KB

EMAIL_SETUP_GUIDE.md

File metadata and controls

151 lines (117 loc) · 3.91 KB

📧 Email Setup Guide - Fix Feedback Email Issues

🚨 Current Issue

The feedback form isn't sending emails because SMTP isn't configured properly.

🔧 Quick Fix - Gmail Setup

Step 1: Set up Gmail App Password

  1. Go to Google Account settings
  2. Security → 2-Step Verification (enable if not already)
  3. App passwords → Generate new app password
  4. Select app: Mail, Select device: Other (custom name: "SamX")
  5. Copy the 16-character password (like: abcd efgh ijkl mnop)

Step 2: Update .env.local

Create/update .env.local file:

# Email Configuration - WORKING GMAIL SETUP
SMTP_USER=your.email@gmail.com          # ← Your Gmail address
SMTP_PASSWORD=abcd efgh ijkl mnop        # ← The 16-char app password (no spaces)
SMTP_FROM=your.email@gmail.com           # ← Same as SMTP_USER

# Other existing config...
NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:6233
ADMIN_EMAIL=admin@localhost
ADMIN_PASSWORD=admin123

Step 3: Restart the App

npm run dev

Step 4: Test Feedback

  1. Go to dashboard → Click "Send Feedback" in sidebar
  2. Fill out form with your info
  3. Check terminal for email logs
  4. Check your inbox for the feedback email

🐛 Why It Wasn't Working

Issue 1: Missing SMTP Config

// This was failing silently
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: undefined,        // ← Not set
    pass: undefined         // ← Not set
  }
});

Issue 2: Same From/To Problem

If SMTP_USER and the recipient (founder@ixcoach.com) are the same, Gmail might not deliver it.

Fixed by:

  • Better error logging
  • SMTP connection verification
  • Clear configuration messages

✅ What I Fixed

1. Better Error Handling

// Now shows exactly what's missing
console.log('Email config check:', {
  hasUser: !!smtpUser,
  hasPassword: !!smtpPassword,
  user: smtpUser?.substring(0, 5) + '***'
});

if (!smtpUser || !smtpPassword) {
  throw new Error('SMTP not configured');
}

2. Connection Verification

// Tests SMTP connection before sending
await transporter.verify();
console.log('SMTP connection verified');

3. Added Feedback to Main Menu

  • Full Path: /Users/jedi/react_projects/ix/samx/src/components/layout/main-layout.tsx
  • UX Flow: Dashboard sidebar → "Send Feedback" → Same feedback modal appears
  • Implementation: Uses same openFeedback event system

🎯 Test the Complete Flow

1. Configure Email (5 minutes)

  • Set up Gmail app password
  • Update .env.local
  • Restart app

2. Test from Main Menu

  • Dashboard → Sidebar → "Send Feedback"
  • Fill form → Submit
  • Check terminal logs → Check email

3. Test from Floating Button

  • Any page → Floating feedback button (bottom right)
  • Same flow

🔧 Alternative: Development Mode

If you don't want to set up real email right now, I can create a development mode that:

  • ✅ Saves feedback to database
  • ✅ Logs "email" to console
  • ✅ Shows success message
  • ❌ Doesn't actually send email

Add this to .env.local:

EMAIL_MODE=development  # Skip real email sending

Want me to implement the development mode option?

📧 Gmail Troubleshooting

Common Issues:

  1. "Less secure app access" - Use App Password instead
  2. 2FA not enabled - Enable 2-Step Verification first
  3. Wrong password format - Use 16-char app password, not regular password
  4. Spaces in password - Remove all spaces from app password

Test Command:

# Check if SMTP config is loaded
node -e "console.log({
  user: process.env.SMTP_USER,
  hasPass: !!process.env.SMTP_PASSWORD,
  from: process.env.SMTP_FROM
})"

Working setup = emails will flow to founder@ixcoach.com! 📧