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

Question

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.

score 1 · Answer 1 · answered Aug 01 '15 at 06:33

1

You need to create two pages. Let's say url1 and url2.

url1 where you include your sign in button by running:

window.google.identitytoolkit.signInButton()

Set widgetUrl to url2

In url2 where you render the widget by running:

window.google.identitytoolkit.start()

Set the signInSuccessUrl to url1

Do not add ?mode=select to widget url. On sign in button click, it will automatically append it to that url and redirect there.

answered Aug 01 '15 at 06:33

bojeil

29,642
4
69
76

i wan to to clarify this I have used two different pages: index.php under the templates folder which is the main page that handles the general functioning of the website, plus I have created another page always called index.php under the gitkit directory that's why I am not able to understand what is wrong plus Google emailed me stating how important is the use of mode=select and when I tried to ask the proper use and how to do it I was replied ask your question on stack so please solve me this strange problem – Aug 01 '15 at 08:01

Daniel F · Accepted Answer · 2015-08-03T11:09:37.610

0

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.

edited Aug 03 '15 at 11:09

answered Aug 02 '15 at 22:51

Daniel F

13,684
11
87
116

I'll let you know asa i try it – Aug 03 '15 at 03:12
I have removed the signInOptions but still does not work, please reply to this comment as soon as you can my friend – Aug 03 '15 at 09:25
In the meantime I replaced `idps` with `signInOptions`, both work. Is your first index.html reachable as `/widget` and the second as `/`? Also, in the second index.html you're citing the entire file content, in the first one only the javascript code. I hope your first one doesn't contain only that code. Is that piece of javascript all that this page at `/widget` is containing? – Daniel F Aug 03 '15 at 11:03
may we move this discussion to chat? – Aug 03 '15 at 11:10
we must keep commenting here till appears move discussion to chat to avoid extended comments – Aug 03 '15 at 11:12
i am sure that i'm doing something wrong but really i am unable to find the bug – Aug 03 '15 at 11:14
I also did another mistake, I didn't differentiate between `/` and `/signin`. Why are you making this distinction. I mention this because your signOut points to `/` instead of `/signin`. This is not a technical problem. What does the {{ POST_BODY }} contain? Maybe keep it empty once to test if this is the source of the problem? – Daniel F Aug 03 '15 at 11:16
I have removed mode select from index.php but still it doesn't work – Aug 03 '15 at 11:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84997/discussion-between-riccardo990-and-daniel-f). – Aug 03 '15 at 11:17

ltetzlaff · Answer 3 · 2019-07-05T11:52:33.330

Well, I was just encountering the same error "Error code: Bad response from IDP."

As stated in the comments above there are two possibilites:

creation of a page with a SignIn-Button only and another one to which the previous one redirects on button click
appending "?mode=select" to the url as a query parameter

Redirect in your routes, for example on

app.get("/login", function(req, res) {
  res.redirect("/login?mode=select");        
}

The gitkit.js extracts it from the browsers window.location.href.

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

3 Answers3

Linked