Refresh page on new user sign in when using Google oAuth 2.0

Question

I'm trying to make a website using Google Sign For Websites. Mostly just for the sake of learning about how it works.

I've followed the steps outlined in that tutorial Google Provides which works fine. Users can successfully sign into my site, it is able to pass the users ID to the backend and then verify the ID server side using a php script.

Php then creates a session for the user on the website. What I can't figure out is how would I refresh the page when a user clicks the Google Sign in button and the sign in is successful. Refreshing the page would allow the home page to be reloaded with the new php session data.

<div class="g-signin2 signin-button" data-onsuccess="onSignIn" data-theme="dark"></div>

function onSignIn(googleUser){

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://mywebsite.com/tokensignin.php');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      };

I've tried using simply location.reload() inside of the onload = function() portion of the code. This causes the page to just infinately refresh every time it is loaded however since Google verifys that the user is signed in through this xhr variable every time.

I've tried looking through their reference to use GoogleAuth.isSignedIn.listen(listener) to monitor any changes but it doesn't seem to fullfull what I want it to or I'm not using it correctly since I don't exactly know what the listener should be.

The other option might be to use their GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure) function but I'm not entirely sure how the properly configure the options field/variable.

If someone could provide some insight as to how this world work I would greatly appreciate it.

To summarize if the user is already signed into my website using Google I want the page to do nothing, if they click the signin button, after the sign in is successful I want to refresh the page they are on.

Answer 1

You could add a listener to xhr with a callback function.

xhr.addEventListener("load", loginComplete);

And then create a function:

function loginComplete(evt) {
    console.log("Login Complete");
    window.location.reload(); 
}

EDIT:

Ok. Since the listener doesn't help. You will need to check if the user is already logged in. To save that information one thing I could think of would be using cookies.

So you could store the Auth Token you receive from Google and set a cookie for it and check everytime before you make your POST.

Here is a nice js cookie library: https://github.com/js-cookie/js-cookie

Then onload you save the id:

xhr.onload = function() {
    Cookie.set('google_token', id_token);
    window.location.reload();
};

And the onSignIn function would be like:

function onSignIn(googleUser){
    var cookie = Cookie.get('google_token');
    if(cookie != undefined){
        //cookie is set
        return;
    }
    ...
    //rest of the function
}

Of course you need to improve this code, for example, check if the token stored in the cookies is still valid, some cases you can just refresh it instead of making the user log in again (the oAuth API provide such things).

Make some security measures to be sure the token is not being injected and etc..