Lo que vas a construir
Un sistema de autenticacion completo donde tus usuarios inician sesion con su cuenta de Google en un solo clic. Implementaras un hook personalizado useAuth que maneja todo el estado de autenticacion, un boton de login/logout, proteccion de rutas para contenido privado y persistencia de la sesion. Al terminar, tendras una base solida de autenticacion que puedes reutilizar en cualquier proyecto React o Next.js.
Setup Firebase
- Ir a console.firebase.google.com
- Crear proyecto
- Authentication → Sign-in method → Google → Enable
- Copiar config
Paso 1: Pídele a una IA la integración
Necesito integrar Firebase Auth con Google en React:
- Hook personalizado useAuth
- Botón de login/logout
- Mostrar info del usuario
- Proteger rutas
- TypeScript
Config Firebase: (pegar tu config)
Dame el código completo.
Código típico
// lib/firebase.ts
import { initializeApp } from 'firebase/app'
import { getAuth, GoogleAuthProvider } from 'firebase/auth'
const app = initializeApp({ /* tu config */ })
export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider()
// hooks/useAuth.ts
import { signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth'
export function useAuth() {
const [user, setUser] = useState(null)
useEffect(() => {
return onAuthStateChanged(auth, setUser)
}, [])
const login = () => signInWithPopup(auth, googleProvider)
const logout = () => signOut(auth)
return { user, login, logout }
}
Proteger rutas
function ProtectedPage() {
const { user, login } = useAuth()
if (!user) {
return <button onClick={login}>Login con Google</button>
}
return <div>Bienvenido, {user.displayName}</div>
}