Penerapan Autentikasi Email/Kata Sandi
Terapkan fungsi pendaftaran dan login pengguna menggunakan kredensial email dan kata sandi dengan Firebase Authentication.
Penerapan Autentikasi Email/Kata Sandi adalah pelajaran Firebase Auth & Realtime Database Apps gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Firebase Auth & Realtime Database Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Firebase Auth & Realtime Database Apps mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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!
Belajar Firebase Auth & Realtime Database Apps dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 11
- Pelajaran
- 44
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penerapan Autentikasi Email/Kata Sandi” gratis?
Ya — teks lengkap “Penerapan Autentikasi Email/Kata Sandi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Firebase Auth & Realtime Database Apps, upgrade ke CoddyKit PRO. Kursus Firebase Auth & Realtime Database Apps mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Penerapan Autentikasi Email/Kata Sandi”?
Terapkan fungsi pendaftaran dan login pengguna menggunakan kredensial email dan kata sandi dengan Firebase Authentication. Kamu berlatih Firebase Auth & Realtime Database Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Firebase Auth & Realtime Database Apps?
Tidak diperlukan pengalaman sebelumnya. Firebase Auth & Realtime Database Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Penerapan Autentikasi Email/Kata Sandi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Firebase Auth & Realtime Database Apps ini?
Ya. Setiap pelajaran Firebase Auth & Realtime Database Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penerapan Autentikasi Email/Kata Sandi
- Mengelola Sesi & Status Pengguna
- Menangani Kesalahan Autentikasi
- Pengaturan Ulang Kata Sandi dan Verifikasi Email