title: How should I structure Firebase auth password reset flow?
body: <p>I'm using the <a href="https://www.firebase.com/docs/web/guide/login/password.html" rel="nofollow">Firebase authentication</a> solution for registering/logging-in users in my Ionic app. I'm struggling on how to best implement my 'password reset flow'.</p>
  
  <p>Currently, when a user forgets their password the flow starts as below:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;p class="forgot-text" ng-click="login.resetPassword()" ng-show="login.email"&gt;Forgot password?&lt;/p&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>vm.resetPassword = function() {
      authService.resetPassword(vm.email);
  };
  </code></pre>
  
  <p>authService:</p>
  
  <pre><code>function resetPassword(email) {
      auth.$resetPassword({
          email: email
      }).then(function() {
          $location.path('/intro');
      }).catch(function(error) {
          alert(error);
      });
  }
  </code></pre>
  
  <p>As a result of the above the user receives an email with a temporary password. Thankfully there is an <code>isTemporaryPassword</code> field on the <code>authData</code> object returned when a user logs in.</p>
  
  <p>I take advantage of this within my authService:</p>
  
  <pre><code>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);
      });
  }
  </code></pre>
  
  <p>This is where my problem arises. When the user reaches <code>/reset</code> I want them to simply be able to enter their new password twice (second entry for confirmation), but the Firebase <code>$changePassword</code> 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 <code>changePassword</code> from my <code>authService</code>:</p>
  
  <pre><code>function changePassword(email, oldPassword, newPassword) {
      auth.$changePassword({
          email: email,
          oldPassword: oldPassword,
          newPassword: newPassword
      }).then(function() {
          $location.path('/people');
      }).catch(function(error) {
          alert(error);
      });
  }
  </code></pre>
  
  <p>I could always just force the user to enter their temporary password yet again, or I could set this temporary password to <code>$rootScope</code>, but I feel like there must be a cleaner option. Any ideas?</p>