We are working on the firebase series, Firebase gives various functions to use in our application. like database, authentication, hosting, etc., In this article, we will see how to delete a user account from the firebase authentication.
Firebase has a delete function that deletes the user account from the firebase authentication console. If you are using firebase Authentication in your web app then you also need to give the user account delete option as per the user’s need. We can simply do it in firebase by just simply calling the firebase delete method.
Prerequisite: Before going to start we need to set up the firebase to the web app, You can follow [ Firebase Integration with web] GFG article to implement the firebase on the web and User Authentication using Email and Password.
Approach:
Delete User: You can delete a user account with the delete method of the firebase auth. First, we will get the currently signed-in user and then delete it.
// Current signed-in user to delete
const user = firebase.auth().currentUser;
user.delete().then(() => {
// User deleted.
}).catch((error) => {
// An error occurred
// ...
});
we will create two buttons on the user end. The first one is for sign-in the user and the second one is to delete the user from the authentication console.
Step-by-Step Implementation: Below is the implementation to Delete the user in Web and Firebase.
Step 1: To Add firebase to your web App you can refer to this article.
Project structure: The project structure will look like this.
Step 2: After creating the Web application, Install the firebase module using the following command.
npm install firebase@8.3.1 --save
Step 3: Go to your firebase console and create a new project and copy your credentials.
const firebaseConfig = {
apiKey: "your api key",
authDomain: "your credentials",
projectId: "your credentials",
storageBucket: "your credentials",
messagingSenderId: "your credentials",
appId: "your credentials"
};
Note: These credentials are confidential.
Step 4: Create the HTML file.
index.html: The index file contains the button, For sign-in the user and deleting the user account, and calling the respective Function to perform an action.
Why Sign-In? We are deleting the user account then what is the need for the user sign-in again? Some security-sensitive actions such as deleting an account, setting a primary email address, and changing a password—require that the user has recently signed in. If you perform one of these actions, and the user signed in too long ago, the action fails with an error.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>samplefirebaseforweb</title> <script src=</head><body> <script src="/app.js"></script> <button onclick="signIn()">signIn</button> <div> <button onclick="DeleteUser()"> Delete User Account </button> </div></body></html> |
Step 6: Create the Javascript file.
script.js: The script file contains the definition of the two functions signIn and DeleteUser. In DeleteUser, the delete method of firebase performs the permanent delete of the user account from the firebase console Authentication.
Note: Before deleting the account user must sign in recently other wise it will raise the error.
Javascript
const firebaseConfig = { // Firebase Application configure code};// Initialize Firebaseconst app = firebase.initializeApp(firebaseConfig);var email = "ms471841@gmail.com";var password = "12345678";function signIn() { firebase .auth() .signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; console.log("Sign In SuccessFul!"); // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });}function DeleteUser() { const user = firebase.auth().currentUser; user .delete() .then(() => { // User deleted. console.log("User Account Deleted Successful"); }) .catch((error) => { // An error occurred // ... });} |
Output: The output window contains the two browser screens separately, Left one live server and right one firebase console.
