Additional scopes in a custom login page

How do I add additional scopes in a custom login template?
I have based our page on the ‘Custom Login Form’ template and need to add a Google scope not in the Social Connections list. When using the default login, this could be achieved using connection_scope in the URL.
I tried adding scope when webAuth.authorize is called but it did not seem to make any difference, code snippet below.

<script src="https://cdn.auth0.com/js/auth0/9.14/auth0.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
  <script>
    window.addEventListener('load', function() {

      var config = JSON.parse(
        decodeURIComponent(escape(window.atob('@@config@@')))
      );

      var leeway = config.internalOptions.leeway;
      if (leeway) {
        var convertedLeeway = parseInt(leeway);
      
        if (!isNaN(convertedLeeway)) {
          config.internalOptions.leeway = convertedLeeway;
        }
      }

      var params = Object.assign({
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: config.authorizationServer.issuer
        },
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code'
      }, config.internalOptions);

      var webAuth = new auth0.WebAuth(params);
      var databaseConnection = 'Username-Password-Authentication';
      var captcha = webAuth.renderCaptcha(
        document.querySelector('.captcha-container')
      );

      function login(e) {
        e.preventDefault();
        var button = this;
        var username = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        button.disabled = true;
        webAuth.login({
          realm: databaseConnection,
          username: username,
          password: password,
          captcha: captcha.getValue()
        }, function(err) {
          if (err) displayError(err);
          button.disabled = false;
        });
      }

      function signup() {
        var button = this;
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;

        button.disabled = true;
        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password,
          captcha: captcha.getValue()
        }, function(err) {
          if (err) displayError(err);
          button.disabled = false;
        });
      }

      function loginWithGoogle() {
        webAuth.authorize({
          connection: 'google-oauth2'
        }, function(err) {
          if (err) displayError(err);
        });
      }
  
      function displayError(err) {
        captcha.reload();
        var errorMessage = document.getElementById('error-message');
        errorMessage.innerHTML = err.description;
        errorMessage.style.display = 'block';
      }

      document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
    });
  </script>```

Hi @mark.hall,

I’m doing some research on this now!

Just to makes sure I understand, you are wanting to add a scope not in this list of permissions, correct:

Which scope(s) are you needing to add?

Thanks,

Stephanie

2 Likes

One is a Google drive one (just this one https://www.googleapis.com/auth/drive.metadata.readonly - we had to get approval from Google, if we request any additional ones at login it flags a warning) and Google Classroom scope, which is not in the list.

Previous with the standard non-customised login, this was added using connection_scope=https://www.googleapis.com/auth/drive.metadata.readonly as a query param when calling the authorize endpoint - my question is how can this be achieved with the custom login page?

In order to configure your Google social connection to request the additional scopes, you can use the Management API to override the scopes configured in the dashboard using the options.upstream_params property.

To do this, request a PATCH to the /api/v2/connections/{the_connection_id} endpoint, with a payload like this:

Note: Changes to the ‘options’ object in the JSON will overwrite all the existing options.
To get the connection ID, you can use the /api/v2/connections endpoint

{
  "options": {
    ...[the full options object as it is right now]..,
    "upstream_params": {
     "scope": { 
       "value":"email profile https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/classroom.courses.readonly"
    }
}

Setting the “options.scope” property will override the permissions that are configured in the connection settings in the dashboard. Be sure to keep “email profile” in the scopes since those are required for authentication.

Once the social connection is configured to request the correct scopes, no changes should be required for your custom login page.

Let me know if you have additional questions!

Stephanie

1 Like

Thanks, Stephanie - will this show in the GUI once done?

The additional scopes won’t show up in the dashboard, but you can make sure they are configured by calling GET /api/v2/connections/{id}.

You should see the scopes in the upstream_params property in the response.

1 Like

For anyone else reading this, I also added access_type=offline in the same way

{
  "options": {
    ...[the full options object as it is right now]..,
		"upstream_params": {
			"scope": {
				"value": "email profile https://www.googleapis.com/auth/drive.metadata.readonly"
			},
			"access_type": {
			   "value":"offline"
			}
		}
}

And also, if using curl to do this, don’t forget to set Content-Type: application/json -H "Content-Type: application/json"

2 Likes

Thanks for sharing the solution for offline access!