Get gmail address using Google Apps Script, Error: redirect_uri_mismatch

I reproduced your steps, and it does retrieve the html but when you try to sign in, the following error is thrown in a pop-up window:

“Error: redirect_uri_mismatch

The JavaScript origin in the request, https://XXXXXXX-script.googleusercontent.com, does not match the ones authorized for the OAuth client.”

You need to copy the URL from the error message and follow these steps:

1) Select the project in google cloud and go to credentials -> Oauth consent screen , in authorized domains add “googleusercontent.com”.

2) Edit your credentials and add the URL you got before to the “Authorized JavaScript origins” part.

3) Deploy as a web app in a new version.

If I understood right, that should work, although a couple of things to point out on how you deploy the web app:

1) If you set the deploy options to execute the app as the user accessing the app, when you access with the link, App script will prompt its own consent screen to log in, then when you click on the sign-in option it’ll automatically sign-in with the user that’s already logged.

2) If you set the deploy options to execute the app as you and in the access option you select “Anyone, even anonymous”, when you click on the sign-in option it’ll prompt you the expected oauth consent screen to log in. The only thing is that when you sign-out and click on sign-in button again, it’ll automatically log in with the previous credentials (In a normal server it would prompt you the consent screen again).

Without the need of implementing Oauth, you can set the deployment options as the setup in “1)”, and then use the User object from App Script to obtain the user’s email, although that’s the only information you can get from there [1].

[1] https://developers.google.com/apps-script/reference/base/user

If I well understand you want to get in frontend the email and user profile information you don't need to do all this complex things.

In backend create this function :

function getUser(){
  //Session.getEffectiveUser().getEmail(); // Just for scope
  var url = "https://www.googleapis.com/oauth2/v1/userinfo?alt=json";
  var param = {
    method      : "Get",
    headers     : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
    'muteHttpExceptions' :true
  };
  var html = UrlFetchApp.fetch(url,param);
  var data = JSON.parse(html.getContentText());
  Logger.log(JSON.stringify(data))
  /* Result is JSON
  {"id":"Google User ID","email":"[email protected]","verified_email":true,"picture":"https://xxxxxxxxxxxxxxxxx/photo.jpg"}
  */
  return data
}

Then now in frontend you can call this function to get in the user details :

function getUserDetails(){
  google.script.run
        .withSuccessHandler(function(user) {
            //Do some stuffs with user details
            // Email is in user.email
          })
        .withFailureHandler(function(msg) {
            console.log(msg);
          })
        .getUser(); 
}

As the script request the Session.getEffectiveUser().getEmail() the user grant scope to allow to get user information.

Then you just have to query the https://www.googleapis.com/oauth2/v1/userinfo?alt=json endpoint to get user details.

Stéphane