In this section, we will cover how to implement email and password authentication using Firebase. This is one of the most common methods of authentication and is widely used in many applications.
Key Concepts
- Firebase Authentication: A service that can authenticate users using only client-side code. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook, and Twitter, and more.
- Email and Password Authentication: A method where users can sign up and log in using their email address and a password.
Setting Up Email and Password Authentication
Step 1: Enable Email/Password Sign-In Method
- Go to the Firebase Console.
- Select your project.
- Navigate to the Authentication section.
- Click on the Sign-in method tab.
- Enable the Email/Password sign-in method.
Step 2: Add Firebase Authentication SDK
Add the Firebase Authentication SDK to your project. Depending on your platform (Web, Android, iOS), the steps will vary.
For Web
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>For Android
Add the Firebase Authentication dependency to your build.gradle file:
For iOS
Add the Firebase Authentication pod to your Podfile:
Implementing Email and Password Authentication
Sign Up
To allow users to sign up with an email and password, use the createUserWithEmailAndPassword method.
Web Example
<script>
function signUp() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log("User signed up: ", user);
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.error("Error: ", errorCode, errorMessage);
});
}
</script>
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button onclick="signUp()">Sign Up</button>Sign In
To allow users to sign in with an email and password, use the signInWithEmailAndPassword method.
Web Example
<script>
function signIn() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log("User signed in: ", user);
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.error("Error: ", errorCode, errorMessage);
});
}
</script>
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button onclick="signIn()">Sign In</button>Sign Out
To sign out a user, use the signOut method.
Web Example
<script>
function signOut() {
firebase.auth().signOut().then(() => {
console.log("User signed out");
}).catch((error) => {
console.error("Error signing out: ", error);
});
}
</script>
<button onclick="signOut()">Sign Out</button>Practical Exercises
Exercise 1: Implement Sign Up and Sign In
- Create a simple HTML page with two forms: one for signing up and one for signing in.
- Implement the sign-up and sign-in functionality using Firebase Authentication.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Firebase Auth Example</title>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
<script>
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);
function signUp() {
var email = document.getElementById("signUpEmail").value;
var password = document.getElementById("signUpPassword").value;
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
var user = userCredential.user;
console.log("User signed up: ", user);
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.error("Error: ", errorCode, errorMessage);
});
}
function signIn() {
var email = document.getElementById("signInEmail").value;
var password = document.getElementById("signInPassword").value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
var user = userCredential.user;
console.log("User signed in: ", user);
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.error("Error: ", errorCode, errorMessage);
});
}
function signOut() {
firebase.auth().signOut().then(() => {
console.log("User signed out");
}).catch((error) => {
console.error("Error signing out: ", error);
});
}
</script>
</head>
<body>
<h2>Sign Up</h2>
<input type="email" id="signUpEmail" placeholder="Email">
<input type="password" id="signUpPassword" placeholder="Password">
<button onclick="signUp()">Sign Up</button>
<h2>Sign In</h2>
<input type="email" id="signInEmail" placeholder="Email">
<input type="password" id="signInPassword" placeholder="Password">
<button onclick="signIn()">Sign In</button>
<h2>Sign Out</h2>
<button onclick="signOut()">Sign Out</button>
</body>
</html>Common Mistakes and Tips
- Incorrect API Key: Ensure that you are using the correct API key and Firebase configuration.
- Weak Password: Firebase requires passwords to be at least 6 characters long. Ensure that the password meets this requirement.
- Email Format: Ensure that the email is in the correct format. Firebase will throw an error if the email is not valid.
Conclusion
In this section, we learned how to implement email and password authentication using Firebase. We covered enabling the email/password sign-in method, adding the Firebase Authentication SDK, and implementing sign-up, sign-in, and sign-out functionalities. We also provided a practical exercise to reinforce the learned concepts. In the next section, we will explore social media authentication using Firebase.
Firebase Course
Module 1: Introduction to Firebase
Module 2: Firebase Authentication
- Introduction to Firebase Authentication
- Email and Password Authentication
- Social Media Authentication
- Managing Users
Module 3: Firebase Realtime Database
- Introduction to Realtime Database
- Reading and Writing Data
- Data Structure and Security Rules
- Offline Capabilities
Module 4: Cloud Firestore
- Introduction to Cloud Firestore
- Firestore Data Model
- CRUD Operations
- Advanced Queries
- Security Rules
Module 5: Firebase Storage
Module 6: Firebase Cloud Messaging
- Introduction to Cloud Messaging
- Sending Notifications
- Handling Notifications
- Advanced Messaging Features