nextjs-auth-module 1.1.0

package/src/app/api/forgot-password/route.js

@@ -0,0 +1,79 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { sendResetPasswordEmail } from '@/lib/email';
+
+function generateResetToken() {
+  return Math.random().toString(36).substring(2, 15) + 
+         Math.random().toString(36).substring(2, 15);
+}
+
+export async function POST(request) {
+  console.log('=== FORGOT PASSWORD API CALLED ===');
+  
+  try {
+    const { email } = await request.json();
+    
+    if (!email) {
+      return NextResponse.json(
+        { error: 'Email is required' },
+        { status: 400 }
+      );
+    }
+
+    console.log('Processing email:', email);
+
+    // Check if user exists
+    const result = await pool.query(
+      'SELECT id, email FROM users WHERE email = $1',
+      [email.toLowerCase()]
+    );
+
+    if (result.rows.length > 0) {
+      const resetToken = generateResetToken();
+      const expiresAt = new Date(Date.now() + 3600000); // 1 hour
+      
+      console.log('Generated reset token:', resetToken);
+      console.log('Expires at:', expiresAt);
+      
+      // ✅ CORRECT: Using your actual column names
+      await pool.query(
+        `UPDATE users 
+         SET reset_password_token = $1, 
+             reset_password_expires = $2 
+         WHERE email = $3`,
+        [resetToken, expiresAt, email.toLowerCase()]
+      );
+      console.log('User updated with reset token');
+      
+      // Log the reset link for development
+      const resetUrl = `${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/reset-password?token=${resetToken}`;
+      console.log('\n🔐 ========== PASSWORD RESET LINK ==========');
+      console.log(`Reset URL: ${resetUrl}`);
+      console.log(`Token: ${resetToken}`);
+      console.log('==========================================\n');
+      
+      // Try to send email
+      try {
+        await sendResetPasswordEmail(email, resetToken);
+        console.log('Email sent successfully');
+      } catch (emailError) {
+        console.error('Email sending failed:', emailError.message);
+      }
+    } else {
+      console.log('No user found with email:', email);
+    }
+
+    return NextResponse.json({
+      message: 'If an account exists with this email, you will receive password reset instructions.'
+    });
+
+  } catch (error) {
+    console.error('=== FORGOT PASSWORD ERROR ===');
+    console.error('Error:', error.message);
+    
+    return NextResponse.json(
+      { error: 'Unable to process request. Please try again.' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/login/route.js

@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { comparePassword, generateToken } from '@/lib/auth';
+
+export async function POST(request) {
+  try {
+    const { email, password } = await request.json();
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      );
+    }
+
+    // Find user
+    const result = await pool.query(
+      'SELECT id, email, name, password FROM users WHERE email = $1',
+      [email]
+    );
+
+    if (result.rows.length === 0) {
+      return NextResponse.json(
+        { error: 'Invalid credentials' },
+        { status: 401 }
+      );
+    }
+
+    const user = result.rows[0];
+    const isValidPassword = await comparePassword(password, user.password);
+
+    if (!isValidPassword) {
+      return NextResponse.json(
+        { error: 'Invalid credentials' },
+        { status: 401 }
+      );
+    }
+
+    const token = generateToken(user.id, user.email);
+
+    return NextResponse.json({
+      user: { id: user.id, email: user.email, name: user.name },
+      token,
+    });
+
+  } catch (error) {
+    console.error('Login error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/register/route.js

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { hashPassword, generateToken } from '@/lib/auth';
+
+export async function POST(request) {
+  try {
+    const { name, email, password } = await request.json();
+
+    // Validation
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user exists
+    const existingUser = await pool.query(
+      'SELECT id FROM users WHERE email = $1',
+      [email]
+    );
+
+    if (existingUser.rows.length > 0) {
+      return NextResponse.json(
+        { error: 'User already exists' },
+        { status: 400 }
+      );
+    }
+
+    // Hash password and create user
+    const hashedPassword = await hashPassword(password);
+    const result = await pool.query(
+      'INSERT INTO users (name, email, password) VALUES ($1, $2, $3) RETURNING id, email, name',
+      [name || null, email, hashedPassword]
+    );
+
+    const user = result.rows[0];
+    const token = generateToken(user.id, user.email);
+
+    return NextResponse.json({
+      user: { id: user.id, email: user.email, name: user.name },
+      token,
+    }, { status: 201 });
+
+  } catch (error) {
+    console.error('Registration error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/reset-password/route.js

@@ -0,0 +1,91 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import bcrypt from 'bcryptjs';
+
+async function hashPassword(password) {
+  return await bcrypt.hash(password, 10);
+}
+
+export async function POST(request) {
+  console.log('=== RESET PASSWORD API CALLED ===');
+  
+  try {
+    const { token, newPassword } = await request.json();
+    
+    console.log('Received token:', token);
+    
+    if (!token || !newPassword) {
+      return NextResponse.json(
+        { error: 'Token and new password are required' },
+        { status: 400 }
+      );
+    }
+    
+    if (newPassword.length < 6) {
+      return NextResponse.json(
+        { error: 'Password must be at least 6 characters' },
+        { status: 400 }
+      );
+    }
+    
+    // ✅ CORRECT: Using your actual column names
+    const result = await pool.query(
+      `SELECT id, email, reset_password_expires
+       FROM users 
+       WHERE reset_password_token = $1`,
+      [token]
+    );
+    
+    console.log('Query result rows:', result.rows.length);
+    
+    if (result.rows.length === 0) {
+      return NextResponse.json(
+        { error: 'Invalid reset token' },
+        { status: 400 }
+      );
+    }
+    
+    const user = result.rows[0];
+    console.log('User found:', user.id);
+    console.log('Token expires at:', user.reset_password_expires);
+    console.log('Current time:', new Date());
+    
+    // Check if token is expired
+    if (new Date() > new Date(user.reset_password_expires)) {
+      console.log('Token has expired');
+      return NextResponse.json(
+        { error: 'Reset token has expired. Please request a new password reset.' },
+        { status: 400 }
+      );
+    }
+    
+    // Hash new password
+    const hashedPassword = await hashPassword(newPassword);
+    console.log('Password hashed successfully');
+    
+    // ✅ CORRECT: Using your actual column names
+    await pool.query(
+      `UPDATE users 
+       SET password = $1, 
+           reset_password_token = NULL, 
+           reset_password_expires = NULL 
+       WHERE id = $2`,
+      [hashedPassword, user.id]
+    );
+    
+    console.log('Password updated successfully for user:', user.id);
+    
+    return NextResponse.json({
+      message: 'Password reset successful! You can now login with your new password.'
+    });
+    
+  } catch (error) {
+    console.error('=== RESET PASSWORD ERROR ===');
+    console.error('Error:', error.message);
+    
+    return NextResponse.json(
+      { error: 'Unable to reset password: ' + error.message },
+      { status: 500 }
+    );
+  }
+}

package/src/app/forgot-password/page.jsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { useAuth } from '@/context/AuthContext';
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { forgotPassword } = useAuth();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const result = await forgotPassword(email);
+      console.log('API Response:', result);
+      setMessage(result.message || 'Password reset instructions sent!');
+      setEmail(''); // Clear email after success
+    } catch (err) {
+      console.error('Error:', err);
+      setError(err.message || 'Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex items-center justify-center px-6">
+      <div className="max-w-md w-full">
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8">
+          <div className="mb-6">
+            <Link href="/login" className="inline-flex items-center text-blue-600 hover:text-blue-700">
+              <ArrowLeftIcon className="w-4 h-4 mr-2" />
+              Back to Login
+            </Link>
+          </div>
+
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl mb-4 shadow-lg">
+              <span className="text-white text-2xl">🔐</span>
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">Forgot Password?</h2>
+            <p className="text-gray-700">Enter your email and we'll help you reset your password</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
+                {error}
+              </div>
+            )}
+            
+            {message && (
+              <div className="bg-green-50 border border-green-200 text-green-600 px-4 py-3 rounded-lg text-sm">
+                {message}
+                {message.includes('instructions') && (
+                  <div className="mt-2 text-xs">
+                    Check your email or look at the terminal for the reset link.
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-medium text-gray-900 mb-2">
+                Email Address
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-gray-700"
+                placeholder="email@gmail.com"
+                required
+                disabled={loading}
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-medium hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <span className="flex items-center justify-center">
+                  <svg className="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+                  </svg>
+                  Sending...
+                </span>
+              ) : (
+                'Send Reset Instructions'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Remember your password?{' '}
+              <Link href="/login" className="text-blue-600 hover:text-blue-700 font-medium">
+                Back to Login
+              </Link>
+            </p>
+          </div>
+
+          {/* Development helper */}
+          {process.env.NODE_ENV === 'development' && (
+            <div className="mt-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-xs text-blue-800">
+                💡 Development Tip: Check your terminal console for the password reset link!
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/login/page.jsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { EyeIcon, EyeSlashIcon, EnvelopeIcon, LockClosedIcon, ArrowRightIcon, FingerPrintIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await login(email, password);
+      if (rememberMe) {
+        localStorage.setItem('rememberedEmail', email);
+      } else {
+        localStorage.removeItem('rememberedEmail');
+      }
+      router.push('/');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load remembered email on component mount
+  useState(() => {
+    const rememberedEmail = localStorage.getItem('rememberedEmail');
+    if (rememberedEmail) {
+      setEmail(rememberedEmail);
+      setRememberMe(true);
+    }
+  }, []);
+
+  // Demo credentials for testing
+  const fillDemoCredentials = () => {
+    setEmail('muler@gmail.com');
+    setPassword('12345678');
+    setError('');
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50 flex items-center justify-center px-4 py-8 relative overflow-hidden">
+      {/* Animated Background */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-32 w-80 h-80 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
+        <div className="absolute -bottom-40 -left-32 w-80 h-80 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
+        <div className="absolute top-40 left-1/2 w-80 h-80 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
+      </div>
+
+      <div className="max-w-md w-full relative z-10">
+        {/* Logo/Brand */}
+        <div className="text-center mb-8">
+          {/* <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 rounded-2xl mb-5 shadow-2xl transform hover:scale-105 transition-transform duration-300">
+            <span className="text-white text-3xl font-bold">⚡</span>
+          </div> */}
+          <h2 className="text-4xl font-bold text-gray-900 mb-3 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+            Welcome Back
+          </h2>
+          <p className="text-gray-600 text-lg">Sign in to continue your journey</p>
+        </div>
+
+        {/* Login Form */}
+        <div className="bg-white/90 backdrop-blur-sm rounded-3xl shadow-2xl p-8 border border-gray-100">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <div className="bg-red-50 border-l-4 border-red-500 text-red-700 px-4 py-3 rounded-lg text-sm flex items-start gap-3 animate-shake">
+                <div className="text-red-500 text-lg">⚠️</div>
+                <div>{error}</div>
+              </div>
+            )}
+
+            {/* Email Field */}
+            <div className="group">
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Email Address
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <EnvelopeIcon className="h-5 w-5 text-gray-400 group-focus-within:text-indigo-500 transition-colors" />
+                </div>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all text-gray-700 placeholder-gray-400"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Password Field */}
+            <div className="group">
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Password
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <LockClosedIcon className="h-5 w-5 text-gray-400 group-focus-within:text-indigo-500 transition-colors" />
+                </div>
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all text-gray-700 placeholder-gray-400"
+                  placeholder="Enter your password"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 transition-colors"
+                >
+                  {showPassword ? <EyeSlashIcon className="w-5 h-5" /> : <EyeIcon className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+
+            {/* Remember Me & Forgot Password */}
+            <div className="flex items-center justify-between">
+              <label className="flex items-center cursor-pointer group">
+                <div className="relative">
+                  <input
+                    type="checkbox"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    className="sr-only"
+                  />
+                  <div className={`w-5 h-5 border-2 rounded transition-all duration-200 flex items-center justify-center ${
+                    rememberMe 
+                      ? 'bg-indigo-600 border-indigo-600' 
+                      : 'border-gray-300 bg-white group-hover:border-indigo-400'
+                  }`}>
+                    {rememberMe && <CheckCircleIcon className="w-4 h-4 text-white" />}
+                  </div>
+                </div>
+                <span className="ml-2 text-sm text-gray-700 group-hover:text-gray-900 transition-colors">
+                  Remember me
+                </span>
+              </label>
+              <Link
+                href="/forgot-password"
+                className="text-sm text-indigo-600 hover:text-indigo-700 font-medium hover:underline transition-all"
+              >
+                Forgot password?
+              </Link>
+            </div>
+
+            {/* Login Button */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative w-full py-3.5 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white rounded-xl font-semibold hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+            >
+              <span className="relative z-10 flex items-center justify-center gap-2">
+                {loading ? (
+                  <>
+                    <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    Signing in...
+                  </>
+                ) : (
+                  <>
+                    Sign In
+                    <ArrowRightIcon className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                  </>
+                )}
+              </span>
+            </button>
+          </form>
+
+          {/* Divider */}
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-4 bg-white text-gray-500">Or </span>
+            </div>
+          </div>
+
+        
+          {/* Sign Up Link */}
+          <div className="text-center">
+            <p className="text-sm text-gray-600">
+              Don't have an account?{' '}
+              <Link 
+                href="/register" 
+                className="text-indigo-600 hover:text-indigo-700 font-semibold hover:underline transition-all"
+              >
+                Create account
+              </Link>
+            </p>
+          </div>
+
+          {/* Demo Credentials Button */}
+          <div className="mt-4">
+            <button
+              type="button"
+              onClick={fillDemoCredentials}
+              className="w-full text-center text-xs text-gray-500 hover:text-indigo-600 transition-colors py-2 flex items-center justify-center gap-2"
+            >
+              <FingerPrintIcon className="w-4 h-4" />
+              Use Demo Credentials
+            </button>
+            
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes blob {
+          0% { transform: translate(0px, 0px) scale(1); }
+          33% { transform: translate(30px, -50px) scale(1.1); }
+          66% { transform: translate(-20px, 20px) scale(0.9); }
+          100% { transform: translate(0px, 0px) scale(1); }
+        }
+        @keyframes shake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-5px); }
+          75% { transform: translateX(5px); }
+        }
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        .animate-shake {
+          animation: shake 0.3s ease-in-out;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+      `}</style>
+    </div>
+  );
+}