Login using Google authentication without opening new window/tab

Question

I want to implement Google login in my site like is done in Stack Exchange, Stack Overflow and more. Meaning that when the user choose Login using Google authentication, the site redirects to a page where he can choose which Google account to use and without opening a new window/tab and redirect to the site Can you help me with links/documentation how to do it Very important not to open new tab/window.

I'm using this: https://developers.google.com/identity/sign-in/web/build-button

You can see that when you click on the button a new window is open, I wand to prevent this.

Thanks in advance

Answer 1

You could try to switch to the JavaScript client authentication and pass the ux_mode option to the signIn() function options.

ux_mode: "redirect"

Documentation here: https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions

Then you can get the user profile like so:

let googleUser = window.gapi.auth2.getAuthInstance().currentUser.get();

if (googleUser) {
    let profile = googleUser.getBasicProfile();

    if (profile) {
        this.state.google.firstname = profile.getGivenName();
        this.state.google.lastname = profile.getFamilyName();
        this.state.google.email = profile.getEmail();
    }
}

This is all documented here and there: https://developers.google.com/identity/sign-in/web/people

Answer 2

Just add data-ux_mode="redirect" to the sign-in div from the Google's example (or to the .render call if you're rendering the login-button programmatically)

<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect"></div>