authentication - Jquery mobile page won't load after facebook authentication in chrome

Question

I'm running into a strange interaction between chrome and jquery mobile. The application flow is straightforward:

• Homepage / login screen. "Login" link is data-ajax="false" and rel="external" so all the fancy JQM AJAX stuff is disabled.
• A series of 302s for the oauth dance which ends at /auth/facebook/callback
• /auth/facebook/callback 302s to the real page /home which is a very simple Jquery-mobile page

On Chrome and Firefox the jquery mobile 'ajax-loading' spinner shows forever, with the actual page loaded in the DOM but not displaying. On Safari (desktop or mobile) the page displays properly.

Answer 1

The problem is coming from Facebook. When returning from oauth, they add a URL fragment #_=_ to your callback URL, which confuses JQM. As is typical for FB, this is documented as deliberate without justification but vague/incorrect instructions for how to deal with it. A bunch of discussion in this SO question. The best workaround I found is to insert this code to the top of your page before JQM has a chance to get confused:

<script>
    // workaround Facebook oauth feature-bug
    if (window.location.hash == '#_=_') window.location.hash = '';
</script>

Answer 2

To my knowledge, AJAX requests don't handle redirects very well (there are tons of SO questions about this subject).

Instead of doing your authentication in JavaScript, how about a server-side implementation? It will be faster and less complicated for the user's browser.