Identity Toolkit does not work - Error code: Bad response from IDP

The problem that I am currently unable to solve is bad response from IDP and the cause is supposed to be the lack of mode=select but I'm unaware now about the page where the mode=select must be implemented

As a matter of fact I have added the code into two separated pages, the first one is index.php which does the following:

<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<script type="text/javascript">
var config = {
apiKey: 'AIzaSyAaMAfu7S2AITODrGJzVkIYBXlZR3FYhuQ',
signInSuccessUrl: 'http://www.lascuolacheverra.org/signin?mode=select', // i tried to add the `mode=select here`
signInOptions: ["google", "password"],
idps: ["Google", "AOL", "Microsoft", "Yahoo", "Facebook"],
oobActionUrl: '/',
siteName: 'La scuola che verrà A.P.S.',
    
    // Optional - function called after sign in completes and before
    // redirecting to signInSuccessUrl. Return false to disable
    // redirect.
    // callbacks: {
    //  signInSuccess: function(tokenString, accountInfo,
    //    opt_signInSuccessUrl) {
    //      return true;
    //    }
    // },
    
    // Optional - key for query parameter that overrides
    // signInSuccessUrl value (default: 'signInSuccessUrl')
    // queryParameterForSignInSuccessUrl: 'url'
    
    // Optional - URL of site ToS (linked and req. consent for signup)
     tosUrl: 'http://www.lascuolacheverra.org/privacypolicy.html',
    
    // Optional - URL of callback page (default: current url)
    // callbackUrl: 'http://example.com/callback',
    
    // Optional - Cookie name (default: gtoken)
    //            NOTE: Also needs to be added to config of the ‘page with
    //                  sign in button’. See above
    // cookieName: ‘example_cookie’,
    
    // Optional - UI configuration for accountchooser.com
    acUiConfig: {
     title: 'Sign in to lascuolacheverra.org',
     favicon: 'http://www.lascuolacheverra.org/favicon.ico',
     branding: 'http://www.lascuolacheverra.org/images/lascuolacheverra.jpg'
     },
    
    
    // Optional - Function to send ajax POST requests to your Recover URL
    //            Intended for CSRF protection, see Advanced Topics
    //      url - URL to send the POST request to
    //     data - Raw data to include as the body of the request
    //completed - Function to call with the object that you parse from
    //            the JSON response text. {} if no response
    /*ajaxSender: function(url, data, completed) {
     },
     */
};
// The HTTP POST body should be escaped by the server to prevent XSS
window.google.identitytoolkit.start(
                                    '#gitkitWidgetDiv', // accepts any CSS selector
                                    config,
                                    '{{ POST_BODY }}');
</script>

<!-- End modification -->

The second part of the code is in another index.php and does the following:

<!DOCTYPE html>
<html>
<head>

<!-- Copy and paste here the "Sign-in button javascript" you downloaded from Developer Console as gitkit-signin-button.html -->

<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<link type=text/css rel=stylesheet href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
<script type=text/javascript>
window.google.identitytoolkit.signInButton(
                                           '#navbar', // accepts any CSS selector
                                           {
                                           widgetUrl: "/widget",
                                           signOutUrl: "/",
                                           }
                                           );
</script>

<!-- End configuration -->

</head>
<body>

<!-- Include the sign in button widget with the matching 'navbar' id -->
<div id="navbar"></div>
<!-- End identity toolkit widget -->

<p>
{{ CONTENT }}
</p>
</body>
</html>

I would like to know how I have to proceed in order to correctly use mode=select since as of today Identity Toolkit is available to my homepage but I can't use it to the fullest because of this bug.

Solution

signInSuccessUrl: 'http://www.lascuolacheverra.org/signin?mode=select', // i tried to add the mode=select here

This should not point to the /signin page. Maybe point it to / or /signed-in.

Also, remove

// signInOptions: ["google", "password"], // <-- this apparently masks out the idps

idps: ["Google", "AOL", "Microsoft", "Yahoo", "Facebook"],

I did some testing with this, and if I add signInOptions, then idps is ignored and you end up only being able to sign in with google and password.

Apparently only using signInOptions is the way to do it. I've read idps instead of signInOptions in other examples, and I'm using idps with success.

Update I misread the code a bit. I thought \signin was the page showing the widget, which the tutorials place under \widget. My mistake because in my project I'm replacing \widget with \secure-sign-in. So, if your \signin page is not the \widget page then your code was already OK. And in any case you should remove the ?mode=select because this is only used for the \widget and is added automatically by the window.google.identitytoolkit.signInButton function.