Documentation for the automatic "Continue as" Google popup

Question

How do I get one of the automatic "Sign in with Google" frames on my site? It happens if you're signed into an account and visit Kayak.com for instance. Any documentation I come across is for the older "Sign in with Google" button.

Here's what it looks like just by visiting Kayak.com.

Answer 1

Edit (October 29, 2020):

The first link is now working again (as pointed out by @ManSamVampire):

https://developers.google.com/identity/one-tap/web

Edit (November 9, 2019):

It seems the links now lead to 404s. I can't find any information about the disappearance of One Tap sign-in.

Original Answer:

I had the same question and found this (I Googled "google automatic login"):

https://developers.google.com/identity/one-tap/web/

The screenshots they have are for mobile, but the popup looks exactly the same as the one you see on other web apps.

If you click on the Guides tab, you should find some docs there including a Getting Started section:

https://developers.google.com/identity/one-tap/web/get-started

That will show you how to get the credentials setup just like you would for any other Google API, like the Maps JavaScript API for example.

Once you have your credentials, you load the library from Google in your main HTML file or wherever you load your other scripts, if you have any:

<script src="https://smartlock.google.com/client"></script>

You should then be able to access the library through the googleyolo Object:

window.onGoogleYoloLoad = (googleyolo) => {
  // The 'googleyolo' object is ready for use.
};

What you are seeing in that screenshot (and what I have seen as well) looks to be a googleyolo.hint() call.

It seems to be dependent on whether the user has already logged into the site or not. If they have or if they have a password saved for the site in their browser, then it should automatically sign them in or at least prompt for it. This API also handles sign-up's in addition to sign-in's which uses the googleyolo.hint() call mentioned before.

More detailed code examples can be found on the Guides page.

You will also need control over the backend for this site to verify the integrity of the ID tokens from a successful googleyolo.hint() or googleyolo.retrieve() call. That is covered at https://developers.google.com/identity/one-tap/web/idtoken-auth.