Error with Google login on custom domain

[dd76]

I have a universal login page from with a “Login with google” button which works as expected until I configure the page to be served from a custom domain.

In that case I get the following “redirect_uri_mismatch” error:

The redirect URI in the request, https://<CUSTOM_DOMAIN>/login/callback, does not match the ones authorized for the OAuth client

I have added https://<CUSTOM_DOMAIN>/login/callback to the Allowed Callback Urls but the error persists.

I am confused as to why my app is trying to redirect to https://<CUSTOM_DOMAIN>/login/callback in the first place, as it is configured to redirect to http://localhost:1337.

Can anyone explain what is happening and how I can fix this?

Thanks.

[jerdog]

Can you share your connection code, taking out any sensitive information?

[dd76]

Hi, thanks for looking at this.

This is the relevant (I think!) code from the custom login page:

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

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

          var webAuth = new auth0.WebAuth(params);

          var databaseConnection = 'Username-Password-Authentication';

          function login(e) {
            e.preventDefault();
            var username = document.getElementById('email').value;
            var password = document.getElementById('password').value;

            webAuth.login({
              realm: databaseConnection,
              username: username,
              password: password
            }, function(err) {
              if (err) displayError(err);
            });
          }

          function loginWithGoogle() {
            webAuth.authorize({
              connection: 'google-oauth2'
            }, function(err) {
              if (err) displayError(err);
            });
          }

[jerdog]

Make sure that you’re calling the full auth0 tenant and domain in your code (i.e. auth0Tenant and auth0Domain in your code). This would include region if applicable (<tenant>.<region>.auth0.com>. The dashboard should list for you the correct information to be applied, as would our Quickstarts and information found on Universal Login

[dd76]

Your suggestion have helped me a make some progress, but I am now getting a ‘invalid token/ state does not match error’.

I’ll try to summarise the situation.

With the following configuration ( domain: "<tenant>.<region>.auth0.com"), both username-password login and google login redirect to http://localhost:1337/callback but both result in a “invalid token/ state does not match" error:

var params = Object.assign({
        domain: "<tenant>.<region>.auth0.com", 
        clientID:  '<clientID>',
        redirectUri: 'http://localhost:1337/callback',
        responseType: 'token id_token',
        overrides: {
		      __tenant: "<tenant>",
		      __token_issuer: "<tenant>.<region>.auth0.com"
      	}
      }, config.internalOptions);

(Changing __tenant to "<tenant>.<region>.auth0.com" results in the same error)

With the following configuration ( domain: '<customDomain>') , username-password login works but google login has the “redirect_uri_mismatch” error:

var params = Object.assign({
        domain:   '<customDomain>',
        clientID:  '<clientID>',
        redirectUri: 'http://localhost:1337/callback',
        responseType: 'token id_token',
        overrides: {
		      __tenant: "<tenant>",
		      __token_issuer: "<tenant>.<region>.auth0.com"
      	}
      }, config.internalOptions);

The hosted page is accessed by a call to angularAuth0.authorize() and auth0 is initialised with

angularAuth0Provider.init({
    clientID: '<clientID>',
    domain: '<customDomain>',
    responseType: 'token id_token',
    redirectUri: 'http://localhost:1337/callback',
    scope: 'openid profile email'
 });

[jerdog]

@dd76

invalid token/ state does not match

So does this help you with your troubleshooting?

Invalid token - `state` does not match

[nserdakov.developer]

You just need to add the https://<CUSTOM_DOMAIN>/login/callback to your list of allowed urls IN GOOGLE application. Enter the application and add. If you do this - you will not have any error.

I ask community to add to google tutorial this steps, because I also faced on it.

[jerdog]

Where would you suggest we add this info in that doc you linked @nserdakov.developer ?

And do you get this resolved @dd76?

[dd76]

Hi, I did get this resolved and @nserdakov.developer’s is correct, that is what I needed to do.