How to Update User Password in Firebase and Web ?

Last Updated : 31 Jul, 2024

In the previous article, we have done How to get a currently singed-in user in firebase, In this Article we will see how to update the user password. Firebase auth provides us a method called updatePassword that takes a string parameter as a new password. We can do it simply by passing the new password as an argument to the method updatePassword.

Note: The user must have recently signed in.

The sample output below gives an idea of what we are going to implement:

Syntax:

You can set a user's password with the updatePassword method. By simply pass the new password to the method updatePassword.

const user = firebase.auth().currentUser;
const newPassword = getASecureRandomPassword();
user.updatePassword(newPassword).then(() => {
    // Update successful.
}).catch((error) => {
    // An error occurred
    // ...
});

Note: To set the user's password, the user must have signed in recently.

Step-by-Step Implementation:

Prerequisite: Before going to start must Add the firebase to your Web application. You may 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 [email protected] --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"
};

index.html: We have only three buttons in the body of the HTML file that calls the method signin, showProfile, and UpdatePassword respectively. The definition of the above methods is defined in the JavaScript file.

script.js: JavaScript file that adds the firebase to the web app and methods that are used to sign in the user, Show the profile of the user, and Update the password method that takes the new password as a string and sets it to user uid. Sign-in method performs the user sign-in. If the user has an account. showUserProfile method shows the user profile data in the console. UpdatePassword actually performs the update of the password.

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">
    <script src=
"https://www.gstatic.com/firebasejs/3.7.4/firebase.js">
    </script>
</head>

<body>
    <script src="/app.js"></script>
    <button onclick="signIn()">signIn</button>
    <button onclick="showUserProfile1()"> 
        Show user Profile data using provider
    </button>
    <div>
        <h3>Enter New Password -</h3>
        <input type="password" 
            name="New Password" id="newPassword">
        <button onclick="UpdatePassword()">
            Update Password
        </button>
    </div>
</body>

</html>

JavaScript

const firebaseConfig = {
    // Firebase Configuration file
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);

var email = "[email protected]";
var password = "...";

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 showUserProfile1() {
    const user = firebase.auth().currentUser;

    if (user !== null) {
        user.providerData.forEach((profile) => {
            console.log("Sign-in provider: " + profile.providerId);
            console.log("  Provider-specific UID: " + profile.uid);
            console.log("  Name: " + profile.displayName);
            console.log("  Email: " + profile.email);
            console.log("  Photo URL: " + profile.photoURL);
        });
    }
}

// Method to update the password
function UpdatePassword() {
    const user = firebase.auth().currentUser;
    const newPassword = document.getElementById('newPassword').value;

    user.updatePassword(newPassword).then(() => {
        // Update successful.

        console.log('Update SuccessFul');

    }).catch((error) => {
        // An error occurred
        // ...
    });
}

Output:

How to Use Storage Console in Firebase?

ms471841

Improve

Article Tags :

How to Update User Password in Firebase and Web ?

Similar Reads

Thank You!

What kind of Experience do you want to share?