Firebase authentication error: auth/invalid-credential

Question

I've been experimenting with the authentication service provided by firebase for more than 2 weeks. Everything was perfectly working until yesterday it became impossible for me to use the facebook auth provider neither twitter to make users connect to my web app.

I've tried to sign out and sign in, I deleted my facebook and twitter apps and created others even with other accounts and the problem persists.

The same problem occurred when I tried to use the code they provide on their github which was working before.

The strange thing is that it's working fine when I use the google provider or the sign in with email and password method.

PS: I made sure the providers are enabled in the console.

const signInWithFacebookButton = document.getElementById('signInWithFacebook');

const auth = firebase.auth();

const signInWithFacebook = () => {

  const facebookProvider = new firebase.auth.FacebookAuthProvider();

  auth.signInWithPopup(facebookProvider)
  .then(() => {
    console.log('Successfully signed in');
  })
  .catch(error => {
    console.error(error);
  })
}

signInWithFacebookButton.addEventListener('click', signInWithFacebook);

Error message when I try to authenticate using facebook :

{code: "auth/invalid-credential", message: "The supplied auth credential is malformed or has expired."}

Error message when I try to authenticate using twitter:

{code: "auth/invalid-credential", message: "Error getting request token: 403 <?xml version="1.…ode-project-fd88e.firebaseapp.com/__/auth/handler"}

Abhinav Kinagi Abhinav Kinagi · Accepted Answer · 2019-07-12T17:22:03

For Twitter login, the error code 403 indicates that access to the URL by the client is Forbidden. It gives such an error because you have to whitelist callback URLs(your site).

From documentation,

As part of our continued effort to ensure safety and security on the Twitter developer platform, any developer using Sign in with Twitter must explicitly declare their callback URLs in a whitelist in the Twitter apps settings which can be accessed in the apps dashboard when logged into your Twitter account on developer.twitter.com. This means that if the callback_url parameter used with the oauth/request_token endpoint isn't whitelisted, you will receive an error.

So in Twitter app settings, you have to add your URL say for example, https://sitename.example.com/auth/twitter and https://sitename.example.com/auth/twitter/callback

You want to use https://yourdomain.com?source=twitter as your callback URL
Add this to the Twitter app dashboard: https://yourdomain.com

Use this in your call to oauth/request_token: https://yourdomain.com?source=twitter.

Refer this community article for more detail:- Twitter callback URLs

Firebase authentication error: auth/invalid-credential

2 Answers