Google Auth / Firebase iOS Web App - Pin to homescreen authentication solution

gauth-firebase-ios-webapp-fix.js

////
//
// WARNING 
//
// SOLUTION BELOW IS INHERENTLY INSECURE. 
// READ BELOW COMMENT & THREAD. ON HOW TO BETTER IMPLEMENT THIS 
// https://github.com/firebase/firebase-js-sdk/issues/77#issuecomment-365528036
//
//
////


// You'll need to lead your users to first login in Safari, **then** add your webapp to their home screen.

// Once your users are logged in, and you got your user object in `firebase.auth().onAuthStateChanged` 
// get everything from localStorage, convert it to a base64 string and append it to the end of the URL with a parameter using `window.history.pushState`. 

// When your users pin your website to their homescreen, check this parameter,
// if there's a base64 version of the localStorage in the URL, set the localStorage from the base64 and reload the page with `window.location.reload(false)`.

// This tactic basically allows you to port everything from the Safari's localStorage to the pinned web app's local storage using URL parameters. 


// ** Step 1 : Detect if it's iOS & if it's an ios web app on all pages of the web app. ** 

var isios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var isInWebAppiOS = (window.navigator.standalone === true);

// ** Step 2 : Add below code to your `firebase.auth().onAuthStateChanged` as follows **

firebase.auth().onAuthStateChanged(function(user) {
  if (user) { 
    webAppURLController(); 
  } else { 
    // no user. redirect to sign in IF NOT WEBAPP
    webAppURLController("signin.html");
  }
});


function webAppURLController (redirectURL) {
  if (redirectURL) {
    // Didn't get user, so redirect user to sign in page if we're not in a web app
    if (isInWebAppiOS) {
      var localStorageToRestore = getUrlParameter("auth");
      var isAuthDone = getUrlParameter("doneauth");
      if (localStorageToRestore && !isAuthDone) {
        setLocalStorage(localStorageToRestore);
        window.history.pushState({}, null, '?doneauth=true');
        window.location.reload(false);
      }
    } else {
      //take user to your signin page in the browser again.
      window.open(redirectURL,'_blank');
    }
  } else {
    // Got user, so tokenize URL if on iOS but not a Web App
    if (isios && !isInWebAppiOS) {
      // IF we're in iOS, append auth info from Local Storage to the end of every URL.
      localStorage2URLParameter();
    }
  }
}

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

function getLocalStorage() {
  var object = Object.keys(localStorage).reduce(function(obj, str) {
      obj[str] = localStorage.getItem(str);
      return obj;
  }, {});

  return btoa(JSON.stringify(object));
}

function setLocalStorage(lsobjstr) {
  var parsedObj = JSON.parse(atob(lsobjstr));
  $.each(parsedObj, function(key, val){
    localStorage.setItem(key, val);
  });
}

function localStorage2URLParameter() {
  var localStorageString = getLocalStorage();
  window.history.pushState({}, null, '?auth=' + localStorageString);
}