Implementación de autenticación con correo electrónico y contraseña
Implemente funciones de registro e inicio de sesión de usuarios mediante credenciales de correo electrónico y contraseña con Firebase Authentication.
Implementación de autenticación con correo electrónico y contraseña es una lección gratuita de Firebase Auth & Realtime Database Apps en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Firebase Auth & Realtime Database Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Firebase Auth & Realtime Database Apps incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Email/Password Auth Intro
Welcome to implementing user authentication with Firebase! In this lesson, we'll focus on the most common method: Email and Password.
- It's straightforward and widely understood by users.
- Firebase handles the secure storage of user credentials.
- You'll learn to register new users and sign in existing ones.
Enable Email/Password Provider
Before writing code, you need to enable Email/Password authentication in your Firebase project.
Go to the Firebase console:
- Navigate to Authentication.
- Click on the Sign-in method tab.
- Enable the Email/Password provider.
This tells Firebase to accept these credentials.
Registering New Users
To let new users create an account, you'll use a Firebase Authentication method. This method takes an email and a password, then securely creates a new user record in your Firebase project.
It's crucial to gather the user's email and a strong password from your app's UI.
User Registration Code
Here's how you register a new user using the Firebase SDK. We'll use JavaScript syntax, common for web and mobile apps.
createUserWithEmailAndPassword() is the key function.
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
function registerUser(email, password) {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed up successfully
const user = userCredential.user;
console.log("User registered:", user.email);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error("Registration error:", errorCode, errorMessage);
});
}Signing In Existing Users
Once a user has registered, they can sign in using the same email and password. This process verifies their credentials against the stored records in Firebase.
If the credentials match, Firebase provides a user object, indicating a successful login.
User Login Code
To sign in an existing user, you use signInWithEmailAndPassword(). It works similarly to registration, taking an email and password.
This function also returns a Promise, allowing you to handle success or failure.
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
function loginUser(email, password) {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in successfully
const user = userCredential.user;
console.log("User logged in:", user.email);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error("Login error:", errorCode, errorMessage);
});
}Accessing Current User Data
After a user successfully registers or logs in, you can access their information via the currentUser object. This object holds details like their unique ID (UID) and email.
It's vital for personalizing app content.
import { getAuth } from "firebase/auth";
const auth = getAuth();
function displayUserInfo() {
const user = auth.currentUser;
if (user) {
// User is signed in
console.log("User UID:", user.uid);
console.log("User Email:", user.email);
// You can also get user.displayName, user.photoURL, etc.
} else {
// No user is signed in
console.log("No user currently logged in.");
}
}Logging Users Out
Providing a way for users to sign out is essential for security and user experience. Firebase Auth makes this simple with the signOut() method.
Calling signOut() clears the user's session.
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
function logoutUser() {
signOut(auth).then(() => {
// Sign-out successful.
console.log("User signed out successfully!");
}).catch((error) => {
// An error happened.
console.error("Sign out error:", error);
});
}Basic Error Handling
When dealing with authentication, errors are common (e.g., wrong password, email already in use). Firebase provides specific error codes and messages.
Always include .catch() blocks to gracefully handle these issues and provide feedback to your users.
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
// Example with error handling
signInWithEmailAndPassword(auth, "wrong@example.com", "badpassword")
.then((userCredential) => {
console.log("Login successful!");
})
.catch((error) => {
const errorCode = error.code; // e.g., 'auth/user-not-found'
const errorMessage = error.message; // e.g., 'There is no user record...'
console.error("Auth failed:", errorCode, errorMessage);
// Display user-friendly message based on errorCode
});Check Your Knowledge
Which Firebase Authentication method is used to create a new user account with an email and password?
Recap: Email/Password Auth
Great job! You've learned the fundamentals of Email/Password authentication with Firebase.
- You enable the provider in the Firebase console.
createUserWithEmailAndPassword()registers new users.signInWithEmailAndPassword()logs in existing users.currentUsergives you access to user data.signOut()logs users out.- Always implement error handling for a robust app.
Next, we'll explore managing user sessions and states!
Preguntas frecuentes
¿La lección «Implementación de autenticación con correo electrónico y contraseña» es gratis?
Sí — el texto completo de «Implementación de autenticación con correo electrónico y contraseña» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Firebase Auth & Realtime Database Apps, actualiza a CoddyKit PRO. El curso de Firebase Auth & Realtime Database Apps incluye 4 lecciones en total.
¿Qué aprenderé en «Implementación de autenticación con correo electrónico y contraseña»?
Implemente funciones de registro e inicio de sesión de usuarios mediante credenciales de correo electrónico y contraseña con Firebase Authentication. Practicas Firebase Auth & Realtime Database Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Firebase Auth & Realtime Database Apps?
No se requiere experiencia previa. Firebase Auth & Realtime Database Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Implementación de autenticación con correo electrónico y contraseña»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Firebase Auth & Realtime Database Apps?
Sí. Cada lección de Firebase Auth & Realtime Database Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Implementación de autenticación con correo electrónico y contraseña
- Gestión de sesiones y estados de usuario
- Gestión de errores de autenticación
- Restablecimiento de contraseñas y verificación de correo electrónico