Các công cụ Vibe Code

Google, Email, OTP - Tất cả trong một

Triển khai hệ thống đăng nhập đa dạng cho congdongvibecode.com chỉ bằng prompting.

Yêu cầu thực tế:

• Đăng nhập bằng Google (phổ biến nhất)
• Đăng nhập bằng Email/Password (truyền thống)
• Đăng nhập bằng số điện thoại OTP (tiện lợi)

Bước 1: Kích hoạt providers trong Firebase Console Authentication > Sign-in method > Enable:

• Google
• Email/Password
• Phone

Bước 2: Prompt cho Gemini tạo AuthContext: "Tạo React Context cho Firebase Auth với Next.js App Router:

• Hook useAuth() trả về { user, loading, signInWithGoogle, signInWithEmail, signInWithPhone, signOut }
• Lưu user state và auto-detect khi refresh page
• TypeScript với types đầy đủ"

Code mẫu được generate:

'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { 
  GoogleAuthProvider, 
  signInWithPopup, 
  signInWithEmailAndPassword,
  signInWithPhoneNumber,
  RecaptchaVerifier,
  onAuthStateChanged,
  signOut as firebaseSignOut
} from 'firebase/auth';
import { auth } from '@/lib/firebase';

// ... (context implementation)

export const signInWithGoogle = () => {
  const provider = new GoogleAuthProvider();
  return signInWithPopup(auth, provider);
};

Kết quả: Component <SignInButton /> với 3 nút đăng nhập đẹp mắt, hoạt động tức thời.