Angularfire: reset user password

[escarabin]

Hello,

There is no mention on how to reset a user's password in the doc and FirebaseAuth does not contain any method to do it. May someone help me with that ?

Thanks in advance

[julienevano]

Hi @escarabin,

A new version of angularfire2 compatible with Firebase 3 is under development and will be available soon with this functionality.

In the mean time you can either:

• apply the changes that I have suggested in my PR https://github.com/angular/angularfire2/pull/195
• or create your own custom authentication service using angularfire2 and Firebase directly at the same time, similar to:

import * as Firebase from 'firebase';
import { AngularFire, FirebaseAuth } from 'angularfire2';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  firebaseAuth: FirebaseAuth;
  private _firebase: Firebase;

  constructor(AngularFire: AngularFire) {
    this.firebaseAuth = AngularFire.auth;
    this._firebase = new Firebase('https://<your-app>.firebaseio.com');
  }

  resetPassword(credentials: FirebaseResetPasswordCredentials): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this._firebase.resetPassword(credentials, error => {
        if (error) {
          reject(error);
        } else {
          resolve();
        }
      });
    });
  }

  changePassword(credentials: FirebaseChangePasswordCredentials): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this._firebase.changePassword(credentials, error => {
        if (error) {
          reject(error);
        } else {
          resolve();
        }
      });
    });
  }

  changeEmail(credentials: FirebaseChangeEmailCredentials): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this._firebase.changeEmail(credentials, error => {
        if (error) {
          reject(error);
        } else {
          resolve();
        }
      });
    });
  }
}

Hope this helps. Let me know if you have any questions.

[escarabin]

Thank you very much your help, I created a custom AuthService and it worked like a charm.

[bangonkali]

Hi @julienevano could you expound on your example?

I tried doing As per documentation from here:

I get an error on my 'ng serve':

file changed app\auth\auth.service.ts
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  c:/Users/bango/Documents/Projects/agus/tmp/broccoli_type_script_compiler-input_base_path-yxkIbstu.tmp/0/src/app/auth/auth.service.ts (8, 21): Cannot find name 'Firebase'.
  c:/Users/bango/Documents/Projects/agus/tmp/broccoli_type_script_compiler-input_base_path-yxkIbstu.tmp/0/src/app/auth/auth.service.ts (12, 22): Cannot use 'new' with an expression whose type lacks a call or construct signature.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
    at BroccoliTypeScriptCompiler (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:5)
    at Angular2App._getTsTree (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)
    at Angular2App._buildTree (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)
    at new Angular2App (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
    at module.exports (C:\Users\bango\Documents\Projects\agus\angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
    at new Class (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
    at C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\bango\Documents\Projects\agus\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

[julienevano]

Hi @bangonkali,

My previous example was working for the version of angularfire2 before the compatibility with Firebase 3.

Now it has been updated, with Firebase 3, you don't need to instantiate a new Firebase reference because you inject the Firebase providers, and specify your Firebase configuration when you boostrap your app.

However, because the method resetPassword is still not exposed on angularfire2, you can keep your own custom authentication service and add a method which is referencing directly firebase global object to access the authentication service of Firebase 3 and call the sendPasswordResetEmail method, similar to:

import { AngularFire, AngularFireAuth } from 'angularfire2';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  firebaseAuth: AngularFireAuth;

  constructor(private _AngularFire: AngularFire) {
    this.firebaseAuth = _AngularFire.auth;
  }

  resetPassword(email: string)): Promise<void> {
    return firebase.auth().sendPasswordResetEmail(email);
  }
}

Hope this helps.

[bangonkali]

Hi @julienevano Awesome it worked great!

If it's not too much to ask, could you also send in an example for this using RxJS? I was under the impression that it was a cleaner approach to promises. If my understanding is correct , one can refactor this using observables. Is this possible?

[julienevano]

Hi @bangonkali,

Please find an example with observable:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { AngularFire, AngularFireAuth } from 'angularfire2';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  firebaseAuth: AngularFireAuth;

  constructor(private _AngularFire: AngularFire) {
    this.firebaseAuth = _AngularFire.auth;
  }

  resetPassword(email: string): Observable<void> {
    return Observable.fromPromise<void>(firebase.auth().sendPasswordResetEmail(email));
  }
}

However, in my opinion, Observables should not always replace Promises:

• For read operations such as getting a collection or an object, because they can be a stream of data it makes sense to subscribe to them in order to always get the latest value.
• But in the case of single write operations such as delete, create or update, for me it is not necessary to return an observable because it should only return a single response and not a stream of response. So in this scenario there is no advantage of Observables vs Promises.

Hope this helps.

[shamrozwarraich]

@julienevano @bangonkali
using the above example with promise and Observables ..but in both cases getting the error in console
www.googleapis.com/identitytoolkit/v3/relyingparty/getOobConfirmationCode?key=AIzaSyCLiJEcrWpH8IqUx59Yu-pv2O79pHV7Jjk:1 POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/getOobConfirmationCode?key=AIza 503 (OK) login.ts:33 Error: Q

[julienevano]

Hi @shamrozwarraich,

Could you give us more details about the context of your issue:

1. Have you upgraded your Firebase app to the new console Firebase 3?
2. Did you make sure to initialise all the properties of the Firebase config?
3. Could you give use an extract of your code calling the above example?
4. Could you give use more details about the content of the failing request such as the Request Payload (section in the headers tab of the request details in Chrome Debugger Tool)?

Thank you.

[shamrozwarraich]

@julienevano hiii ,,,

1 : am using package.json
"angularfire2": "^2.0.0-beta.2", "firebase": "^3.2.0",
2 :done in my app.ts
3:using it on ionic 2 and calling the promise example as mention above in login.ts as

  `  resetPassword() {
    console.log("checkkkkkkkk");
      this.service.resetPassword("[email protected]")
       .then(data => {console.log("Success" + data);
       }).catch(error => {
           console.log("failed" + error); 
       });

}`
serve the app and got error in console

[gopchi]

Guys, could you help me a bit? I am having an issue displaying the Error/Success Messages.
Here is the code from my service, which I inject into the component ForgottenPassword.

   resetPassword(formObj:any){
        this.loading = true;
        return firebase.auth().sendPasswordResetEmail(formObj.email).then( (success) => {
           this.loading = false; 
           this.successMsg = 'We successfully sent a reset password link to your email.';

        }, (error:Error) => {
           this.loading = false;
           this.errorMessage = error.message;

        });
  }

I have put the service in the providers for the component, also have initialized it in the constructor as loginService. But when I try to output loginService.errorMessage when actually there is an error, it does not render it. Here is the *ngIf :
<div class="row center-align center" [ngClass]="{'animated': loginService.errorMessage, 'shake': loginService.errorMessage}" *ngIf="loginService.errorMessage">{{ errorMessage }}</div>

The funny part is that when I console log it, it shows...

I suppose that is something from using the native Firebase SDK, because I have used the same approach for the SignUp, Login components and they both work fine that way.

I would appreciate some help, thanks!

[sean-hill]

Hey, is this functionality currently baked into beta-8? I don't see it documented anywhere.

[touqeershafi]

resetPassword(email: string): Observable<void> { return Observable.fromPromise<void>(firebase.auth().sendPasswordResetEmail(email)); }

throwing this error:

Argument of type 'Promise<any>' is not assignable to parameter of type 'Promise<void>'. Property '[Symbol.toStringTag]' is missing in type 'Promise<any>'.)

[aucevica]

Although compile ok, I'm getting:

Error: Error in ./ForgotpassComponent class ForgotpassComponent - inline template:23:16 caused by: firebase is not defined

` forgotPassRequest(emailAddress) {

const authx = firebase.auth();
authx.sendPasswordResetEmail(emailAddress).then(function () {
  alert(' Email sent');
}, function (error) {
  alert(error); 
});

}`

[boskiv]

I have done it with:

...
import * as firebase from 'firebase';

@Injectable()
export class AuthData {
...
resetPassword(email: string): any {
    return firebase.auth().sendPasswordResetEmail(email);
  }
...
}

Found solution in firebase Readme.MD file from node_modules/firebase

If you are using ES6 imports or TypeScript:

import * as firebase from 'firebase';
var app = firebase.initializeApp({ ... });

[courageDeveloper]

@shamrozwarraich ensure that the email you are trying to send the reset password to also exist in your database.

[syedsaadqamar]

May be my answer will be helpful, Password can be changed by firebase-admin using cloud function you will just have to pass email and new password from the client-side(Angular, ionic, ...)

Cloud function:

import * as functions from 'firebase-functions';

import * as admin from 'firebase-admin';
const cors = require('cors')({ origin: true });

export const resetUserPassword = functions.https.onRequest( async (req, res) => {

return cors( req, res, async () => {
    const email = req.body.data.email;
    const password = req.body.data.password;

    admin.auth().getUserByEmail(email)
    .then((getUserRecord) => {
      admin.auth().updateUser(getUserRecord.uid, {
        email,
        password
      })
      .then(function(userRecord) {
        res.send({
          status: 200,
          data: userRecord
        })
      })
      .catch(function(error) {
        res.send({
          status: 500,
          data: error
        })
      });
    })
    .catch((error) => {
      console.log('Error fetching user data:', error);
    });
  })
});

Client side code(IONIC):

import { AngularFireFunctions } from '@angular/fire/functions';
export class AuthService {
constructor(
 private functions: AngularFireFunctions
) {}
  resetUserPassword() {
    const userNewCredential = {email: 'user-email', password: 'your-new-password'};
    this.functions.httpsCallable('resetUserPassword') 
    (userNewCredential).toPromise().then((updatedUser) => {
      console.log(updatedUser);
    }).catch((error) => console.log(error));
 }