Authenticate with signInWithCredential()

Sasxa picture Sasxa · Oct 16, 2016 · Viewed 12.6k times · Source

I'm trying to connect to the second Firebase app and authenticate with signInWithCredential(), but I don't know how to get valid idToken for the second app:

  connect(accessToken: string, config: FirebaseAppConfig) {
    let one: firebase.app.App = this.angularFireTwo.database["fbApp"];
    one.auth().currentUser.getToken()
      .then(idToken => firebase.auth.GoogleAuthProvider.credential(idToken, accessToken))
      .then(credential => {
        let two = firebase.initializeApp(config, `[${config.apiKey}]`);
        return two.auth().signInWithCredential(credential);
      })
      .catch(console.warn)
      .then(console.info);
  }

I'm getting and error from https://www.googleapis.com/identitytoolkit/v3/:

Invalid id_token in IdP response

If I use signInWithPopup() I can authenticate and connection is working:

        two.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())

Anyone knows what should I do to get valid idToken?


UPDATE:

I've been trying to figure out authentication process and, as far I understand it , it's something like this:

  1. from config: FirebaseAppConfig firebase reads apiKey and authDomain
  2. it contacts the servers and gets Web Client ID for enabled Google provider 123.apps.googleusercontent.com
  3. with this Web Client ID and authDomain it contacts www.googleapis.com, which returns idToken
  4. this idToken is then used to identify the app that's asking user for permission to access user's profile, etc.
  5. when user agrees, callback returns user details + credential used for this authentication, which contains idToken of the web app and accessToken of the user

Now, if I use signInWithPopup() steps 2-3-4 are done in the background (popup window). I just need a way to generate idToken for the step 4, so I can use it to generate credential firebase.auth.GoogleAuthProvider.credential(idToken, accessToken) and sign-in using signInWithCredential().

I have access to everything I need to sign-in to the second app - it's; apiKey, authDomain, Web Client id 456.apps.googleusercontent.com, and user's unique accessToken.

But still can't figure out how to do it. I tried white-listing apps' one and two Web client IDs in their auth configurations, hoping that will allow them to accept each others idTokens, but that didn't work...

Answer

bojeil picture bojeil · Oct 17, 2016

When you call: firebase.auth.GoogleAuthProvider.credential(idToken, accessToken))

The first parameter should be a Google OAuth Id token. You are using the Firebase Id token and that is why you getting the error. Besides, if you are already logged in, why are you logging in again with signInWithCredential?

If you need to sign in with a Google credential you need either a Google OAuth Id token or a Google OAuth access token.

To duplicate Firebase OAuth sign-in state from one app to another, you get the credential from signInWithPopup result and use it to signInWithCredential in the second instance.

two.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then(function(result) { return one.auth().signInWithCredential(result.credential); });