Firebase reauthenticateAndRetrieveDataWithCredential problems

问题

Method reauthenticateAndRetrieveDataWithCredential requires credential.

I tried this and it gives me an error:

const user = firebase.auth().currentUser;
const credential = firebase.auth.OAuthCredential;
await user.reauthenticateAndRetrieveDataWithCredential(credential);
await user.updateEmail(email);
return email;

Error message

reauthenticateAndRetrieveDataWithCredential failed: First argument "credential" must be a valid credential.

I only have oath authentication (no email + password). So I can't figure out what credential firebase need. Any help?

Edit: For some reason my firebase.auth.OAuthCredential or (firebase.auth.AuthCredential) return undefined. User is signedIn/authed.

回答1:

The documentation for reauthenticating the user shows this example:

var user = firebase.auth().currentUser;
var credential;

// Prompt the user to re-provide their sign-in credentials

user.reauthenticateAndRetrieveDataWithCredential(credential).then(function() {
  // User re-authenticated.
}).catch(function(error) {
  // An error happened.
});

Your code fails to implement the comment correctly. You will need to show a prompt to the user to provide their credentials again, put those into the correct credential object type, and pass that in.

For example:

var credential = firebase.auth.EmailAuthProvider.credential(
    email,
    password
);

回答2:

Ran into this issue in a Vue.js project where we have a firebase.js file that handles module imports and exports of const.

Hoping this will help someone save time when using a similar setup.

File: firebase.js

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'


// Initialize Firebase
const app = firebase.initializeApp(options)
export const fb = firebase
export const auth = app.auth()
export const db = app.database()
export const functions = app.functions()

Example of changePassword() in other script file or inside *.vue

import { fb, auth } from './firebase.js'
...
changePassword() {
  if (yourFormValidation == true) {
    let user = auth.currentUser

    const credentials = fb.auth.EmailAuthProvider.credential(
      user.email,
      this.current_password
    )
    user.reauthenticateAndRetrieveDataWithCredential(credentials)
      .then(() => {
        user.updatePassword(this.new_password)
          .then(() => {
            console.log('your password was successfully changed.')
          })
          .catch(error => console.log(error))
      })
      .catch(error => console.log(error.message))
  }
}

Where I was running into Cannot read property 'credential' of undefined"...

Importing only { auth } from './firebase.js and then calling auth.EmailAuthProvider().

How to access other classes found on firebase.auth()...

1. export const fb = firebase in firebase.js

2. import { fb, auth } from './firebase.js' where you are writing your function

3. Call fb.auth.EmailAuthProvider.credential() or other class needed

回答3:

You need to use a subscription to watch for the changes. Use AngularFire to watch for when they are logged in and get the UID (assuming you are using the Authentication login in Firebase so that all data is saved using the UID as the tree path.

You can also add a set timeout to unsubscribe them after a given time

   import { AngularFirestore } from 'angularfire2/firestore';
    import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
    import { AngularFireAuth } from 'angularfire2/auth';
    import { switchMap, map } from 'rxjs/operators';
    import { Observable,  pipe } from 'rxjs';
    import { Observable, Subscription } from 'rxjs';
    import firebase as firebase from 'firebase/app';

private myOAuthSubscription: Subscription;
private myDatasubscription: Subscription;    
public userloggedin:boolean = false;
public uid:string = '';
private functionhasrun:boolean = false;

    public this.items:any = [];

    constructor(
      public _DB: AngularFireDatabase,
      public _afAuth: AngularFireAuth,
    ) {

    //check that the user is logged in 
    try {
      this.myOAuthSubscription = this._afAuth.authState.subscribe(user => {

        if (user && user.uid) {

          console.log('loggedin = true');
          this.userloggedin = true;
          this.uid = String(user.uid);

          if(this.functionhasrun==false){

           this.functionhasrun = true;
           this.funDoDB():

          }

        } else {

        console.log('loggedin = false');
        this.userloggedin = true;
        this.uid = '';

        }
      });
    } catch (e) {
      console.error("fbData_subscription", e);
    }



    }

    ngOnDestroy() {
      this.myOAuthSubscription.unsubscribe();
      this.myDatasubscription.unsubscribe();
    }


    private funDoDB(){
          if(this.userloggedin == true){
          try {

        //subscription using AngulaFire
        this.myDatasubscription = this._DB.list('myDataPath/' + this.uid).snapshotChanges().pipe(map(actions => {
            return actions.map(action => ({ key: action.key, val: action.payload.val() }));
          }))
          .subscribe(items => {

            this.items = [];
            this.items = items.map(item => item);

            console.log("db results",this.items);

            var icount=0;

            for (let i in this.items) {

             console.log("key",this.items[i].key);
             console.log("val",this.items[i].val); 
             console.log("----------------------------------);

             //checking if something exists
             if (this.items[i].key == 'SomeNodePath') {
               var log = this.items[i].val;
             }

            }


          } catch (e) {
            console.error(e);
          }


          });
        }
        }

    npm install --save angularfire2 firebase
    npm install -D rxjs@6.2.2 rxjs-compat@6.2.2

来源：https://stackoverflow.com/questions/51722518/firebase-reauthenticateandretrievedatawithcredential-problems