Google Apps Scripts OAuth - returnURL to update the add on

Question

I'm using the following library for Google App Scripts (Google Docs Addon):

https://github.com/googlesamples/apps-script-oauth2

I have my script as the return url:

https://script.google.com/macros/d/___/usercallback

And I have the following callback which runs fine:

function authCallback(request) {
    var Service = geService();
    var isAuthorized = Service.handleCallback(request);
    if (isAuthorized) {
        return HtmlService.createHtmlOutput('Success! You can close this tab.');
    } else {
        return HtmlService.createHtmlOutput('Denied. You can close this tab');
    }
}

In my main code for the add-on UI, I have the following switch for adding a sidebar:

if(!Service.hasAccess()) {
    var authorizationUrl = Service.getAuthorizationUrl();

    template = HtmlService.createTemplateFromFile('HuddleSidebarNoAuth');
    template.authorizationUrl = authorizationUrl;
    html = template.evaluate();


} else {

    template = HtmlService.createTemplateFromFile('HuddleSidebar');
    html = template.evaluate();

}

I need it to rerun this on successful callback so it hits the hasAccess condition and re-renders the sidebar without refreshing the page. Am I going about this the wrong way?

Answer 1

In your sidebar script you could have the action that initiates the oauth2 flow also trigger a listener for hasAccess. Then as soon as hasAccess returns positive the listener can be cancelled and the UI loaded appropriately.

Be as aggressive or conservative as you like with the timeout duration. Too long and there will be a delay once the Auth tab has been closed.

function showSidebar() {
  ...
        '<a href="<?= authorizationUrl ?>" target="_blank" onclick="initateAccessListener()">Authorize</a>. ' +
        'Reopen the sidebar when the authorization is complete.');
    ...
  }
}

function initiateAccessListener() {
    timeoutID = window.setTimeout(checkHasAccess, 2000);
}

function checkHasAccess() {

  // code to call a google side function the check hasAccess

  // if (hasAccess) {

  //     window.clearTimeout(timeoutID)
  //     """call to reload sidebar UI content"""

  // } else {
  //    timeoutID = window.setTimeout(slowAlert, 2000);
  // }
}

Apologies for the pseudocode but i'm answering from my phone