Search code examples
angularfirebasefirebase-authenticationangularfire2ionic4

firebase.auth.Auth.signInWithCredential is deprecated. Please use firebase.auth.Auth.signInAndRetrieveDataWithCredential instead


When is use this.afAuth.auth.signInWithCredential everything works great in my Ionic app. I can sign in using Google authentication and the user profile is pushed to firebase. However, I get an error in the console that signInWithCredential is deprecated and to use signInAndRetrieveDataWithCredential. The problem is that signInAndRetrieveDataWithCredential doesn't provide any user data(uid, user email, displayname)...it's all null.

So what can I do? The console error is saying not to use signInWithCredential even though it's working. signInAndRetrieveDataWithCredential returns null for the user.

  async googleLogin(): Promise<void> {
    try {

      const gplusUser = await this.gplus.login({
        'webClientId': environment.googleWebClientId,
        'offline': true,
        'scopes': 'profile email'
      });
      return await this.afAuth.auth.signInWithCredential(
        firebase.auth.GoogleAuthProvider.credential(gplusUser.idToken)
      ).then((credential) => {
        console.log('creds', credential);
        this.updateUserData(credential);
      });
    } catch (err) {
      console.log(err);
    }
  }
  
      private updateUserData(user) {
    const userRef: firebase.firestore.DocumentReference = firebase.firestore().doc(`users/${user.uid}`);

    const data: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
    };
    console.log('user data', data);
    return userRef.set(data);
  }


Solution

  • UPDATE 11 Dec. 2019

    Note that the signInAndRetrieveDataWithCredential() method has been deprecated and that we need to use the signInWithCredential() method.

    So, the code shall be adapted to

      return this.afAuth.auth.signInWithCredential(
        firebase.auth.GoogleAuthProvider.credential(gplusUser.idToken)
      ).then((credential) => {
        console.log('creds', credential.user);
        this.updateUserData(credential.user);
      });
    

    If I correctly understand your question, I think your problem comes from the fact that the two methods return a different object:

    As explained here, signInWithCredential() returns a User object,

    while

    As explained here, signInAndRetrieveDataWithCredential() returns a UserCredential object, which contains a User object.

    So you should modify your code as follows

      ....
      return this.afAuth.auth.signInAndRetrieveDataWithCredential(
        firebase.auth.GoogleAuthProvider.credential(gplusUser.idToken)
      ).then((credential) => {
        console.log('creds', credential.user);
        this.updateUserData(credential.user);
      });