Firebase custom password reset link not working

Question

For the last two days I've been trying to implement a custom password reset link for my users, instead of the standard '.firebaseapp.com' domain. So, in the setup there was a short 'setup guide', with a rather small code snippet of what I am supposed to include on my web server.

Therefore I created a new directory on my root, called "users". Then I made a 'index.php' file inside that directory, that I want to handle the password reset. Lastly, I updated the code for 'index.php' according to the docs. Which was this:

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // TODO: Implement getParameterByName()

  // Get the action to complete.
  var mode = getParameterByName('mode');
  // Get the one-time code from the query parameter.
  var actionCode = getParameterByName('oobCode'};
  // (Optional) Get the API key from the query parameter.
  var apiKey = getParameterByName('apiKey'};

  // Configure the Firebase SDK.
  // This is the minimum configuration required for the API to be used.
  var config = {
    'apiKey': apiKey  // This key could also be copied from the web
                      // initialization snippet found in the Firebase console.
  };
  var app = firebase.initializeApp(config);
  var auth = app.auth();

  // Handle the user management action.
  switch (mode) {
    case 'resetPassword':
      // Display reset password handler and UI.
      handleResetPassword(auth, actionCode);
      break;
    case 'recoverEmail':
      // Display email recovery handler and UI.
      handleRecoverEmail(auth, actionCode);
      break;
    case 'verifyEmail':
      // Display email verification handler and UI.
      handleVerifyEmail(auth, actionCode);
      break;
    default:
      // Error: invalid mode.
  }
}, false);
</script>

Obviously I tweaked the code, providing the valid apiKey for my app, as well as changing the two quite unnecessary errors, changing this:

var actionCode = getParameterByName('oobCode'};

to

var actionCode = getParameterByName('oobCode');

as well as:

var apiKey = getParameterByName('apiKey'};

to

var apiKey = getParameterByName('apiKey');

So when I did this, I noticed that there was no function 'getParamtersByName()'. After a Google search, I ended up with this code:

function getParameterByName(name) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);

    if(results == null)
        return "";
    else
        return decodeURIComponent(results[1].replace(/\+/g, " "));

}

So after this, I realized that the docs is significantly lacking code. According to Firebase, I also need this snippet in order to set up a password reset form:

function handleResetPassword(auth, actionCode) {
  var accountEmail;
  // Verify the password reset code is valid.
  auth.verifyPasswordResetCode(actionCode).then(function(email) {
    var accountEmail = email;

    // TODO: Show the reset screen with the user's email and ask the user for
    // the new password.

    // Save the new password.
    auth.confirmPasswordReset(actionCode, newPassword).then(function(resp) {
      // Password reset has been confirmed and new password updated.

      // TODO: Display a link back to the app, or sign-in the user directly
      // if the page belongs to the same domain as the app:
      // auth.signInWithEmailAndPassword(accountEmail, newPassword);
    }).catch(function(error) {
      // Error occurred during confirmation. The code might have expired or the
      // password is too weak.
    });
  }).catch(function(error) {
    // Invalid or expired action code. Ask user to try to reset the password
    // again.
  });
}

But then again, after providing this code as well - my page is still blank. And yes, that is because there is simply no code to show a reset password screen. So my question is; how would my approach be to complete this?

Is there any projects that I can take a look at? I mean, there has to be a solution for this, as I doubt that noone is using a custom email validation link.

Help would be much appreciated.

(Please note that I have very little experience with using Firebase for web, and JavaScript is not a language that I am extremely familiar with either, but I understand it).

Answer 1

This is what you should put as a firebase custom password rest link.

function sendEmailClick() {
    var auth = firebase.auth();
    var email, photoUrl, uid, emailVerified;
    var email;
    var user = firebase.auth().currentUser;
    var emailAddress = user.email;

    auth.sendPasswordResetEmail(emailAddress).then(function() {
        // Email sent.
    }).catch(function(error) {
        // An error happened.
    });
};