Google Sign-in not working in incognito mode

Viewed 25530

I have used Google sign-in my angular 9 project. I am using google sign-in js API. It's giving error Cookies are not enabled in current environment in google chrome incognito mode, although it's working fine in normal google chrome tab. below is the error details.

details: "Cookies are not enabled in current environment."
error: "idpiframe_initialization_failed"

Understand that in incognito mode by default third party cookies are disabled but what is the solution for this? I found other sites that are using google sign-in is perfectly working in google chrome incognito mode.

5 Answers

Angular is just javascript in a browser. So a user loading an angular app is being served a bunch of javascript from your server. If that server handles authentication with google-api, then your user only interacts with your server (albeit with a redirect to sign into google).

This authentication flow doesn't require 3rd party cookies.

However! If your authentication is handled directly in the user's browser, then your app will not work if 3rd party cookies are disabled (as they are in incognito mode).

For example, I have an angular app that I serve via Github pages. Github serves the app but then doesn't do anything else. Since I need to create a document in the user's GDrive, I authenticate and access their resources all from within a javascript client. For that to work securely, users of my ap must allow 3rd party cookies. There isn't really a way around that.

If I had a backend for my app, then the user could give my server permission to access their google drive and no 3rd party cookies would be required. At that point, it's not the frontend javascript client (angular app) that is accessing the user's GDrive, but instead my server.

Using a backend allows for a different and generally more secure authentication flow. To a user, however, the user experience is the same. This is why in some situations the user must allow 3rd party cookies and in others, they do not.

In general, you can secure a server much better than you can trust a user's system/browser to be secure. If security is a concern, you really should be making API calls from a server rather than from within a browser. Doing so should also fix your problem.

You're probably using 'ux_mode': 'redirect' which involves iframes and cookies.

Try using popup mode.

PS. You mention "Other sites perfectly working" - they are probably using oAuth2 authentication flow server-side, which is based on redirects.

PPS. More info https://developers.google.com/identity/sign-in/web/troubleshooting see "Known issues"

Easy solution could be turning of Block third-party cookies. go to your first page of incognito, you can see in the bottom Block third-party cookies turn that of.

this solution works at least for me.

If anyone is struggling with google login (specifically getting access token) in incognito mode, reference following example implementation in Next.js

export default function useGoogleLogin() {
  useEffect(() => {
    const matches = window.location.hash.match(/access_token=([^&]*)/);
    if (!matches) {
      return;
    }

    console.log('Access token', matches[1])
  }, []);

  const handleLogin = () => window.location.replace(getAuthUri());

  return { handleLogin };
}

And here's a implementation of getAuthUri

export default function getAuthUri() {
  let base = window.location.href,
    state = "";
  let i = base.indexOf("#");
  if (i > -1) {
    state = base.substring(i);
    base = base.substring(0, i);
  }
  return (
    "https://accounts.google.com/o/oauth2/v2/auth" +
    "?client_id=" +
    encodeURIComponent(process.env.GOOGLE_CLIENT_ID) +
    "&redirect_uri=" +
    encodeURIComponent(base) +
    "&state=" +
    encodeURIComponent(btoa(state)) +
    "&response_type=" +
    encodeURIComponent("token") +
    "&scope=" +
    encodeURIComponent("profile") +
    "&include_granted_scopes=" +
    encodeURIComponent("true")
  );
}

Session Management is required to be done if we want to sustain any data in incognito mode.

Spring Session provides an API and implementations for managing a user’s session information while also making it trivial to support clustered sessions without being tied to an application container-specific solution. It also provides transparent integration with:

HttpSession: Allows replacing the HttpSession in an application container-neutral way, with support for providing session IDs in headers to work with RESTful APIs.

WebSocket: Provides the ability to keep the HttpSession alive when receiving WebSocket messages

WebSession: Allows replacing the Spring WebFlux’s WebSession in an application container-neutral way.

Related