CODEWITHSUNDEEP
javascriptangularjsfirebaseionic-framework
MattDionis
MattDionis

Reputation: 3616

How should I structure Firebase auth password reset flow?

I'm using the Firebase authentication solution for registering/logging-in users in my Ionic app. I'm struggling on how to best implement my 'password reset flow'.

Currently, when a user forgets their password the flow starts as below:

html:

<p class="forgot-text" ng-click="login.resetPassword()" ng-show="login.email">Forgot password?</p>

controller:

vm.resetPassword = function() {
    authService.resetPassword(vm.email);
};

authService:

function resetPassword(email) {
    auth.$resetPassword({
        email: email
    }).then(function() {
        $location.path('/intro');
    }).catch(function(error) {
        alert(error);
    });
}

As a result of the above the user receives an email with a temporary password. Thankfully there is an isTemporaryPassword field on the authData object returned when a user logs in.

I take advantage of this within my authService:

function loginUser(email, password) {
    auth.$authWithPassword({
        email: email,
        password: password
    }).then(function(authData) {
        if (authData.password.isTemporaryPassword) {
            $location.path('/reset');
        } else {
            $location.path('/people');
        }
    }).catch(function(error) {
        alert(error);
    });
}

This is where my problem arises. When the user reaches /reset I want them to simply be able to enter their new password twice (second entry for confirmation), but the Firebase $changePassword method takes not just email and new password, but also old password. This seems redundant to me as the user just entered their old (temporary) password in order to arrive at this screen. Here's changePassword from my authService:

function changePassword(email, oldPassword, newPassword) {
    auth.$changePassword({
        email: email,
        oldPassword: oldPassword,
        newPassword: newPassword
    }).then(function() {
        $location.path('/people');
    }).catch(function(error) {
        alert(error);
    });
}

I could always just force the user to enter their temporary password yet again, or I could set this temporary password to $rootScope, but I feel like there must be a cleaner option. Any ideas?

Upvotes: 3

Views: 2346

Answers (1)

MattDionis
MattDionis

Reputation: 3616

I was able to solve this in a very simple manner. I changed the $location.path line in my authService $resetPassword function to the below:

$location.path('/reset');

I then updated my reset-password.html to the following:

<ion-view view-title="Reset Password" class="login-background">

<div class="signup-form">

<div class="list list-inset signup">
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Email</span>
    <input type="text" placeholder="[email protected]" ng-model="reset.email">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Temporary Password</span>
    <input type="password" ng-model="reset.tempPassword">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">New Password</span>
    <input type="password" ng-model="reset.newPassword">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Confirm</span>
    <input type="password" ng-model="reset.confirmedPassword">
  </label>
</div>

<button class="button button-balanced" ng-click="reset.changePassword()">Update Password</button>

<p class="mismatch" ng-show="reset.mismatch">{{ reset.mismatchMessage }}</p>

Finally, the changePassword function within my controller looks like this:

vm.changePassword = function() {
  vm.mismatch = false;

  if (vm.newPassword === vm.confirmedPassword) {
    authService.changePassword(vm.email, vm.tempPassword, vm.newPassword);
  } else {
    vm.mismatch = true;
    vm.mismatchMessage = 'Password and confirmation must match';
  }
};

Upvotes: 2

Related Questions