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"}
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
This is worth as an answer: Always click to show your Facebook app secret before copying and pasting it into Firebase setting console. It is counter-intuitive, but Facebook did not implement the clipboard correctly so the hidden asterisk characters will just be copied and pasted verbatim.
Related
I am running a node server with the firebase admin sdk. However, everytime I try to send a push notification from the server, I get a 401 error.
Here's the exact error I'm getting:
errorInfo: {
code: 'messaging/authentication-error',
message: 'An error occurred when trying to authenticate to the FCM servers. Make sure the credential used to authenticate this SDK has the proper permissions. See https://firebase.google.com/docs/admin/setup for setup instructions. Raw server response: "<HTML>\n' +
'<HEAD>\n' +
'<TITLE>PROJECT_NOT_PERMITTED</TITLE>\n' +
'</HEAD>\n' +
'<BODY BGCOLOR="#FFFFFF" TEXT="#000000">\n' +
'<H1>PROJECT_NOT_PERMITTED</H1>\n' +
'<H2>Error 401</H2>\n' +
'</BODY>\n' +
'</HTML>\n' +
'". Status code: 401.'
},
codePrefix: 'messaging'
I'm not exactly sure why I don't have permissions to the project. I have setup my service account, and downloaded the .json file. I even went into the gcloud platform and tried to add any permission that looked correct. Below are all the permissions associated with my service account:
I am running the server locally, and initialized the app like this:
const admin = require('firebase-admin');
const messaging = require('firebase-admin/messaging');
const serviceAccount = require('<path-to-key>');
const fbApp = admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
projectId: '<PROJECT_ID>',
databaseURL: '<DB_URL>'
});
I am not sure what else to do as I've looked through the v1 documentation multiple times and still don't have any clue as to what permissions I'm lacking. I even made sure to "firebase login" into the correct google account to see if that could've been an issue.
Here's my code to send a message:
const sendPushNotifications2 = async (topic, reminder) => {
const payload = genPayload2(reminder);
//await messaging.getMessaging(fbApp).sendToTopic(topic, payload);
await admin.messaging(fbApp).sendToTopic(topic, payload);
};
I have verified the client_id, client_email, and private_key_id values in the .json file. I haven't yet verified the private_key property because I'm not sure where to find it.
It turns out that I had this API disabled: "Firebase In-App Messaging API"
It also turns out that this question was asked before, but I wasn't able to find it. Here's the answer
If anyone else runs into this issue this was my fix:
go to the google cloud platform website
go to APIs and Services
go to Enabled APIs & Services
click + Enable APIs and Services
search for Firebase In-App Messaging API and make sure it's enabled.
You can also just search for messaging and make sure that all the cloud messaging APIs are enabled.
The problem is that new Firebase projects have only the new "Firebase Cloud Messaging API (V1)" enabled by default, and with that configuration - the official firebase-admin NodeJS library will not be able to send messages and will get 401 PROJECT_NOT_PERMITTED errors.
To be able to send message from your server, you MUST also enable the older "legacy" API.
From your Firebase console, go to Project Settings and open the Cloud Messaging tab.
Make sure that both APIs listed are enabled - see screenshot of how it should look:
If any API is not enabled, for the API that is disabled click the three dots menu on the right and select "Manage API"
In the Google Cloud Console page that opens, click the "Enable" button.
Note:
This is basically the same answer as #Tial's self answer, but I was confused by it and (as commented) it got some things wrong - it took me a while to understand it (and the linked answer) to get it right, so I had to clarify.
We build our web application and integrate with Google OAuth2 according to this doc Google Identity Services JavaScript SDK
We would like to use "popup" mode, but when trying to exchange access_token with authentication code, /token return error like "
{"error": "redirect_uri_mismatch","error_description": "Bad Request"}"
We have passed the redirect_url param when calling /token, and it is exactly the same one as configured on the credential page.
What's more weird is that when we switch to "redirect" mode, everything works fine. Same client_id, same client_secret, same grant_type, same redirect_uri.
I don't get it, it's like codes generated under redirect and popup mode are treated differently.
Any help? Thanks a lot!
Set the redirectUri in the OAuth2 client to "postmessage" to indicate that you've already sent the message.
It's an undocumented feature.
Google OAuth redirect_uri_mismatch when exchanging one-time-code for refresh token
As per doc you referenced, Google is not expecting a refirect_url in popup mode. Google will not send a redirect. Instead it will return auth code directly to your callback and the callback will have to send it to your server.
I have used Msal.js for login to microsoft account inorder to call microsoft graph api.
On local everything is working fine but after deployment on production, login is happening but again a login popup is opening up , and my web application is not redirected to home page.
My redirect uri is : "http://localhost:8080/"
I am using node.js to create the localhost server.
My config.js file is -
const msalConfig = {
auth: {
clientId: 'cbd4ec69-c747-4592-ae78-7d8d680d0428',
redirectUri: 'http://localhost:8080/'
}
};
const msalRequest = {
scopes: [
'user.read',
'Files.Read',
'Files.Read.All',
'Files.ReadWrite',
'Files.ReadWrite.All'
]
}
I need to deploy my application on prod, i have made the whole application and now only this thing is not working.
One of the workaround we can follow to resolve the above issue,
Make sure that the port you are using its been updated in server.js with your preferred port number in redirect uri.
We can follow the below given MS DOC and use the sample code.
The sample code will work like, When a user initially clicks the Sign In button, the signIn method invokes the loginPopup function to sign the user in. The loginPopup method prompts and validates the user's credentials by opening a pop-up window with the Microsoft identity platform endpoint. Msal.js starts the authorization code flow after a successful sign-in.
For complete setup please refer this MICROSOFT DOCUMENTATION|Sign in users and call the Microsoft Graph API from a JavaScript .
For a work-related app I use Firebase authentication with Microsoft. In this case, however, it is important that only people from my company (we use Office 365) can sign into this application. I have everything set-up and working in a non-firebase context. But when I use Firebase for authentication, it seems to always point to the /common/ endpoint. This causes problem with my single-tenant-application. If I set the application to accept all tenants, the app works again. But obviously, now everyone can log into my application.
The pop-up is called with a rather conventional:
const provider = new auth.OAuthProvider("microsoft.com");
provider.setCustomParameters({
tenant: "[tenantName].com"
});
auth()
.signInWithPopup(provider)
.then(result => {
But I can't find any instructions on changing the oauth endpoint to use the single tenant endpoint.
How would I go about doing this?
But I can't find any instructions on changing the oauth endpoint to
use the single tenant endpoint.
We can not change the oauth endpoint, even though we add the tenant information to customParameters. The endpoint always use common as the value of tenant. This is the default design.
If we enable Microsoft as a sign-in provider, users using Microsoft accounts (Azure Active Directory and personal Microsoft accounts) can sign in.
Turns out the above is not exactly true. I've switched to signing in with a redirect, and now it (mysteriously) works.
const provider = new auth.OAuthProvider("microsoft.com");
provider.setCustomParameters({
tenant: "[tenant].com"
});
auth().signInWithRedirect(provider);
I have tested this. The tenant is named in the redirect, and people from other tenants cannot log in.
FIXED NOW! But I can't answer my own question yet. See my comment below. And thanks for helping.
I've searched and searched and read the docs and still can't figure this out.
I have a web page about an event. There's also a public Facebook "event" for my event. I'm trying to use the FB Javascript SDK to get the number of attendees for the Facebook event and add it to the number of people who've registered through the website.
I've created an app and I have an appID and secret string. I can get an access token from:
https://graph.facebook.com/oauth/access_token?client_id=XXXX&client_secret=XXXXX&grant_type=client_credentials
and I can then use that access token to get the attendees for a public event:
https://graph.facebook.com/331218348435/attending?access_token=XXXXXXXXX
That's all fine.
I'm now trying to do this same thing using the Javascript SDK.
I've loaded the SDK and done an init:
FB.init({
appId : 'XXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
and I know the SDK is working because I can get an object with the data that doesn't need an access token:
FB.api( '/331218348435', function (response) { console.log ( response ) } );
but when I try to get the attendee data that needs the access token:
FB.api( '/331218348435/attending', function (response) { console.log ( response ) } );
I get an OAuthException: "An access token is required to request this resource."
All the tutorials and information I can find all refers to using the .login method, but I don't want a user to login, I want to login using my app ID without any user interaction.
I'd assumed that the API took the SDK's init request and granted me an access token when I called the .init method, the authentication being done against my website's address (the HTTP referrer - yes I have set my website URL in the Facebook app settings).
Any ideas what might be causing this to not work? How can I get the access token using the Javascript SDK without doing a .login? Am I missing a step? Is this even possible?
Thanks
Form what the rather circular documentations says, getting the attending feed requires a 'generic access_token`. In Facebook terms:
Any valid access_token
Any valid access token returned by our APIs. An access token may not be valid if, for example, it has expired. No special permissions are required. Occasionally, this is referred to as a generic access_token.
So this means that you can use any token you like to access the attending feed, as long as the event is public. The easiest access token to get seems to be an app token: http://developers.facebook.com/docs/authentication/#applogin. You can get this token using only your App ID and Secret, and no user interaction is required.
To summerise the link content: You can get an application access token by sending a GET request to
https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials
You can then use that access_token to make the call for you attending list
FB.api('MyEvent/attending?access_token=ACCESS_TOKEN');
Oh. OK.
Well, for whatever reason, I went away and had my dinner and when I come back it's working fine.
When I updated the settings for my app Facebook said it might take a few minutes for the change to get around the servers. Turned out to take over an hour!
My code was fine.
Thanks for your help.