Debugging Firebase Authentication in react - reactjs

My sign in with firebase authentication completes successfully. I am using signInWithPopup. It returns a blank screen but does not break the flow. However after logging in, a message appears in my console. The message is :
A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.
How do I handle this exception?
The second part of the question is what data in response(that we get in promise from firebase sign in with popup) correlates with the above mentioned exception? Is it a completely different problem or does it have anything to do with the blank popup? Thank you in advance. If more information is needed to solve the problem, kindly say so.

This may be a newly introduced bug with Firebase and one of its dependencies. I suggest rolling Firebase to a previous and consistent version for Firebase and its sister modules
Source:
https://github.com/firebase/firebase-js-sdk/issues/4988

Related

Is there a way to handle URIError in React?

Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!

AdalJs acquireToken fails with invalid state error

My adaljs code to fetch a token for a web api is suddenly failing. This has been working for months now. Since yesterday, I get the following error.
Invalid_state. state: 7ea40a81-5491-47a1-8ebc-89488acb673a|https://sykesenterprises.onmicrosoft.com/MyAPI
This happens when the acquireToken method is called.
I am using the example from https://blog.mastykarz.nl/building-office-365-web-applications-react/ to use react with adaljs.
Managed to sort this out. If anyone else has the same issue, the answer was to just call adal.handleWindowCallback() at the entry point to the application.
The issue occurs because the sample you are referring to needs to be updated as per the latest version of Adal 1.0.16. I was able to fork the repo and submit a pull request to the owner to fix the invalid_state issue. Please refer to the link below to see the code changes:
https://github.com/waldekmastykarz/office-mygroups-react/pull/3/files

Weird data binding behavior with socket.io

I am creating a socket.io app using angular 2 on the frontend and I am getting a very weird behavior that I have never seen before when working with socket.io. I have no idea if my code is causing the issue or if it is something within the interaction between angular2 and socket.io, but if it is my code, I can't say what code I might need to post.
The mysterious behavior: At first instinct, my process for testing if my sockets connections are working properly is to open up an incognito tab, go to my project site, log in as a different user and see if API requests are emitted properly across the users. However; right now EVERY action that is made on either of the users happens to the other user. EX: if I type into a form one of the clients, the other clients form will get updated with the same information. If I click the forms submit button to post the data in the form, the other clients submit button will be clicked as well. Occasionally, it happens when navigating between states, where the other client will also navigate to the state. The behavior also occurs when logging on to a completely different computer, so imagine it is an issue with how socket.io emits data.
All the clients are connecting and disconnecting appropriately and are getting assigned unique socket ID's.
Turns out, the solution was a bit simpler than I was expecting it to be. I strange behavior occurs through a conflict with npm live-server running at the same time as my socket.io connection. I still cannot explain why the conflict was manifested as this sort of strange behavior, but at least I got it to stop by running the app as an express app serving up the index.html.
If anyone could explain why this might have been happening, I would love to hear.

FB.getLoginStatus never fires the callback function in Facebook's JavaScript SDK

The simple thing of calling FB.init (right before </body>) and then FB.getLoginStatus(callback) doesn't fire the callback function.
After some debugging, I think the SDK is stuck in the "loading" (i.e. FB.Auth._loadState == 'loading') phase and never gets to "loaded", so all callbacks are queued until the SDK has loaded.
If I force-fire the "loaded" event during debugging - with FB.Event.fire('FB.loginStatus', 'loaded') in case you're intersted - then the callbacks are invoked correctly.
Extra details that might be relevant:
My app is a facebook iframe app (loaded via apps.facebook.com/myapp)
I'm using IE9. The same behavior happens in Chrome
The app is hosted in http://localhost
What's going on? Why is the SDK never gets to loaded?
Thanks
UPDATE: Just tried it on Chrome and it worked (not sure why it didn't work before). Still doesn't work in IE
I had this same problem in Firefox 3.5 on Windows, but only on the very first log in to the page (probably because it was a slower machine and there was some weird timing issues going on).
I fixed it by forcing FB to refresh the login status cookie every time it checks:
FB.getLoginStatus(callback, true); //second argument forces a refresh from Facebook's server.
Without "force=true", sometimes it wouldn't fire the callback.
I had the exact same problem, and I solved it disabling "Secure Browsing" in the Facebook Security settings. Keeping Secure Browsing on forces the pages as "https", but I had no "Secure Canvas URL" set up, and this gave me a lot of errors in the console as well.
Hope this may help someone :)
In my experience, getLoginStatus() never calls the callback in Firefox when third-party cookies are disabled.
The original poster mentioned his application is hosted on http://localhost. I've never had luck with that, and believe it will cause problems.
Just today, I've had problems where getLoginStatus is not calling the callback on any browser, unless the user is actually connected to the app! I'm hoping this is a bug on facebook's end that they will solve.
Yet another possibility for FB.getLoginStatus not firing its callback is when using a "test" user account that has not been authorized to view that application. Its pretty bad that facebook doesn't give you any error messages.
I have also seen failed callbacks on bad appIds and redirectUrls.
I also ran into this issue specifically in Chrome. I tried calling it on page load and after a user-initiated action with no success.
It turned out that it was not a cross-domain issue. The getLoginStatus() call was being blocked by the Un-Passwordise extension in Chrome. As soon as I disabled the extension, it worked perfectly, even on page load.
More info about this issue here: Chrome-only cross-domain scripting errs in Facebook iFrame App upon FB.Login(..)
I understand that this question is a little old now, but I ran across it searching for solutions.
Double-check what you have set in your Facebook app configuration under the section "Website with Facebook Login". The Site URL domain must match the domain your page with the FB.getLoginStatus (and other related auth Javascript) is served from.
After hours of struggling, I realized that I could not reuse an existing app configuration I had on a new server and had to create a new app to handle the website login for this new server.
The other answers are probably equally valid in your specific case, but since there may be others like me who have struggled for a while on this, hopefully this gives you one other place to check. Making a new app with the correct Site URL was the answer in my particular case.

Redirect (?) issue in CakePHP 1.3: "Failed to load source"

From the /posts/edit-view I'm submitting a form to the action addCategory in my Post controller.
The action does all the work it has to do, and subsequently calls $this->redirect($this->referer());.
At first sight my app works fine, but I encountered some hickups when moving to a production server. Monitoring the calls in Firebug I see that the action acually returns a 302 Found but the 'Response' is Failed to load source for: http://localhost/xps/posts/addCategory.
This happens on both dev en production servers, only on the production server it makes the redirect flow fail. On both servers the controller actions are executed well: category is added.
Removing all the code in the action results in the same failure. Removing the redirect removes the failure, but that's not getting me anywhere.
A second (though maybe irrelevant) irregularity is that the submit method of the form is identified as PUT in Firebug although I explicitly set it to POST in Cake.
I recently switched from CakePHP 1.3.4 to 1.3.6, but reversing does not change the behavior
I use the RequestHandler, Session and Auth components and call parent::beforeFilter() in beforeFilter().
I also found the following thread http://cakephp.1045679.n5.nabble.com/puzzle-over-activity-td1260972.html It suggests to remove $this->Auth->authorize = 'controller'; but I don't have that stated anywhere anyway.
Does anyone have an idea where to look next?
Just a guess, but if you are using Security component, it might cause problems. Also, sometimes when using the ajax and sessions it can cause problems. Maybe if the page requires sessions, you could try it without sessions and see if it works.
Ok, I found it.
The Failed to load source is still there but is not the cause of failure.
In one of my Behaviors I had a space after ?> which messed up the headers, which made me look into the wrong detail.

Resources