Angular2 & Firebase - How to store email and password to use 'reauathenticateWithCredential'

Question

What I'm trying to achieve

• A simple update email and password 'form'.

Issue

• When I've recently signed in, changing the email works fine
• When I haven't recently authenticated, an error is thrown

Questions

• How do I use the 'reauathenticateWithCredential' method?
• Where would I store the users password to pass into the method?

Change Email Form

 saveNewEmailAddress(email: string) { this.authService.updateEmailAddress(email); } 

Auth Service

The email seems to appear in intelliSense (so i'm hoping that works :) ). However, how do I pass a password through?

 updateEmailAddress(email: string) { const currentUser = firebase.auth().currentUser; const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password); currentUser.reauthenticateWithCredential(credentials).then(function () { currentUser.updateEmail(email).then(function () { // Success }).catch(function (error) { // An error happened. }); }) } 

Any help here, code examples, advice would be greatly appreciated. Very new to this.

---

---

---

UPDATE

This is how i've got it to work. Please advise if this is good or not. What I've changed is:

• When attempting to change the email, I list the current email, a new email input field and a password field
• The password field is for the current password
• Once a new email address AND password have been entered, the 'save' button becomes enabled
• I take the new email and password and pass them to the auth service where I run the method to update the email

Account Component HTML

  <!-- Password --> <div class="form-group" [ngClass]="{'has-error': (customerForm.get('password').touched || customerForm.get('password').dirty) && !customerForm.get('password').valid }"> <label class="col-md-2 control-label" for="passwordId">Password</label> <input #currentPassword class="form-control" id="passwordId" type="text" placeholder="Password(required)" formControlName="password"/> <span class="help-block" *ngIf="(customerForm.get('password').touched || customerForm.get('password').dirty) && customerForm.get('password').errors"> <span *ngIf="customerForm.get('password').errors.required"> Please enter your Password. </span> <span *ngIf="customerForm.get('password').errors.minlength"> The password must be longer than 10 characters. </span> </span> </div> <!-- Save Button --> <div class="form-group"> <button class="btn btn-primary" type="submit" [disabled]="!customerForm.valid" (click)="saveNewEmailAddress(newEmail.value, currentPassword.value);"> Save </button> </div> 

Account Component TS

  saveNewEmailAddress(email: string, password: string) { this.authService.updateEmailAddress(email, password); } 

Auth Service

 updateEmailAddress(email: string, password: string) { const currentUser = firebase.auth().currentUser; const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password); currentUser.reauthenticateWithCredential(credentials).then(function () { currentUser.updateEmail(email).then(function () { console.log('i think it worked!'); currentUser.sendEmailVerification().then(function () { console.log('email sent'); }).catch(function (error) { // An error happened. }); }).catch(function (error) { console.log(error); }); }) } 

Answer 1

I managed to work this out by including a password confirmation in the email change pop up. That way I can carry the password value through into the service, therefore the reauthentication :)