<GoogleLogout /> does not log out

[ajoshi83]

Added login and logout buttons on page as below: <GoogleLogin clientId="xxx" buttonText="Login" onSuccess={responseGoogle} onFailure={responseGoogle} /> <GoogleLogout buttonText="Logout" onLogoutSuccess={logout} />

Steps I followed: 1.Clicked Login button, logged in with my google credentials 2.Clicked Logout button 3.Clicked Login button again

Expected: On step 3 I should see login popup by google again as I did click logout button in step 2.

Actual: On step 3, I didn't saw login popup and I am auto-logged in

[john1jan]

@ajoshi83 can you provide a sample code or jsfiddle. It will be helpful in tracking down the issue

[ajoshi83]

Hello John. Thanks for the reply. I created brand new react app using 'create-react-app', installed "react-google-login", Added , buttons and done imports in "App.js" as advisied on "https://www.npmjs.com/package/react-google-login"

Just to let you know, I am using React16 and below is my "App.js":

App.zip

Thanks, Amol

[ajoshi83]

I did some search regarding above on google yesterday and found some posts saying "signout" does not work on localhost. Is this true?

[corydeppen]

Although the sign out component works as expected as long as the page isn't reloaded, I've noticed calling window.gapi.auth2.getAuthInstance() returns null after reloading the page. This makes sense if the GoogleAuth object is initialized when signing in but is destroyed when the page is reloaded and therefore doesn't exist when a user clicks to sign out. Per the getAuthInstance API doc, "You must initialize the GoogleAuth object with gapi.auth2.init() before calling this method."

Would it be reasonable to do something similar to the GoogleLogin component, where there's call to initialize the GoogleAuth object if getAuthInstance returns null? This would ensure the object exists if it was blown away by a page refresh. Might take a bit of refactoring though, as the params used to create the login would be needed to pass to init.

[pohsiangchen]

Hi guys, I think this doc would be helpful. Here is what I done, and it's work on this project demo code.

class GoogleLogout extends Component {
  ...
  signOut() {
    const auth2 = window.gapi.auth2.getAuthInstance()
    if (auth2 != null) {
      auth2.signOut().then(
        auth2.disconnect().then(this.props.onLogoutSuccess)
      )
    }
  }
  ...
}

[corydeppen]

Checking for null is one thing, but it doesn't solve the problem of being able to sign out after the page is reloaded. Since the user will technically still be signed in, the login component wouldn't be rendered and therefore the GoogleAuth object will not have been initialized.

[mikeheft]

I'm super new to React and am so thankful for this package. But with the GoogleLogout, I'm getting Line 16: 'logout' is not defined no-undef. Not really sure what else to look for. Everything regarding this error that I've seen points to here.

[pohsiangchen]

@mikeyduece check out the /demo/index.js Have you defined the logout function?

[mikeheft]

I did now, I thought it was a built in thing. I'll keep googling, but the GoogleLogout is just doing nothing now. No errors, no nothing.

[JonFranchi]

I am experiencing this problem as well. I just verified that Logout does not work from separate/new tabs, but does work in the same tab. I was just looking at Google Documentation on this, and they don't even mention it and their answer would present the same problem.

Since I'm using Offline/code/server side flow, and handing the user a new JWT to work with, I'm just going to throw away the google logout part and invalidate my own token.

EDIT I just saw this in the more detailed identity protocols API documentation:

To programmatically revoke a token, your application makes a request to https://accounts.google.com/o/oauth2/revoke and includes the token as a parameter:

curl -H "Content-type:application/x-www-form-urlencoded" \ https://accounts.google.com/o/oauth2/revoke?token={token}

The token can be an access token or a refresh token. If the token is an access token and it has a corresponding refresh token, the refresh token will also be revoked.

If the revocation is successfully processed, then the status code of the response is 200. For error conditions, a status code 400 is returned along with an error code.

[jakmb]

@corydeppen have you found any good ways to logout after page reload? I'm having trouble getting the logout to work after I use redirectUri and uxMode="redirect". I'm sure there's a workaround but I haven't found it yet.

[TommieEdwardBerry]

I had this same problem and worked on it for days. I am using cookies to store the GoogleID, and everything worked as long as I did not refresh while logged in. The refresh kills the GoogleLogout object, so it won't click anymore. The comments above really helped and made me try to create my own clickable logout image and just replace the GoogleLogout component with a clickable image like this:

\

The code in forceMyOwnLogout is similar to above, except I added an if to make sure the window.gapi exists and this.forceUpdate() at the end. It works very well, and the only side effect, which I actually like is that you are forced to select the logger-inner instead of just logging in without asking who ! Here is the code:

  var forceMyOwnLogout = ((response) => {
      cookie.remove('MyGoogleID', { path: '/' })
      if (window.gapi) {
          const auth2 = window.gapi.auth2.getAuthInstance()
          if (auth2 != null) {
              auth2.signOut().then(
                  auth2.disconnect().then(this.props.onLogoutSuccess)
              )
          }
      }
      this.forceUpdate()
  })

[hraboviyvadim]

@corydeppen Are there any plans to fix this problem? Maybe something like @TommieEdwardBerry did

[hardy1334]

I have used this https://www.npmjs.com/package/react-google-login ,in it works as long as session is not reloaded,but I'm facing problem with implementing Google Logout, @TommieEdwardBerry

[lyxhaven]

@anthonyjgrove Any update on this issue ? I found logout doesn't work as expected. It directly logs you in after you log out without asking you to choose from multiple accounts. And if you reload the page when you logged you, logout won't respond when you click on it. Thanks to @TommieEdwardBerry I have a workaround for now.

[ramonck]

I agree either another component needs to be built or start moving away from this one.

[anthonyjgrove]

You are welcome to submit a PR to fix it.

[ramonck]

You are welcome to submit a PR to fix it.

When I get sometime I will look into it, it's a good project but this Logout issue is killing it.

[thiagonache]

Hi guys,

I think that's it: https://github.com/anthonyjgrove/react-google-login/pull/204

[thiagonache]

@ajoshi83 @TommieEdwardBerry can you guys test it out, please?

[TommieEdwardBerry]

Thanks, I will test it tomorrow!

[TommieEdwardBerry]

Sorry for the delay, but I am having problems with my environment. I can't even get create-react-app to work. I will chime back in if I get it fixed.

[mjgerace]

@anthonyjgrove this fix doesn't appear to work for me. Currently, I get the following error:

google-login.js:1 Uncaught TypeError: Cannot read property 'getAuthInstance' of undefined at e.value (google-login.js:1) at HTMLUnknownElement.callCallback (react-dom.development.js:149) at Object.invokeGuardedCallbackDev (react-dom.development.js:199) at invokeGuardedCallback (react-dom.development.js:256) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270) at executeDispatch (react-dom.development.js:561) at executeDispatchesInOrder (react-dom.development.js:583) at executeDispatchesAndRelease (react-dom.development.js:680) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688) at forEachAccumulated (react-dom.development.js:662)

Edit: getAuthInstance cannot be called in cases where window.gapi does not exist. Usually this means it hasn't been pulled yet. I usually wrap this in a timeout of like 500ms so that it exists when I try to access it as you are doing.

[scotthwsnyder]

@mjgerace did you find an answer to this? I have the same problem exactly: Cannot read property 'getAuthInstance' of undefined

[scotthwsnyder]

@mjgerace, updating to 5.0.2 helped. Now I have a slightly different problem where I cannot sign out if the page has been reloaded: Missing required parameter 'client_id'

About to dive into this one now.

EDIT: I was able to solve easily by adding my app's client_id to the SignOut button as well as the SignIn button. Now all works as expected. v5.0.2 is fantastic. Thank you.

[rivernews]

@scotthwsnyder I ran into the same error where you mentioned "Missing required parameter 'client_id'.

I guess what you mean by SignOut button is the <GoogleLogout> described in the README page, so I pass client ID in like <GoogleLogout clientId={...}>, but then React throws error that clientId is not a property of <GoogleLogout>.

Could you share more about how you fix the issue?

[scotthwsnyder]

@rivernews

1. Make sure to update this package to 5.0.2
2. user "client_id" and not "clientId"

[rivernews]

Update

I kind of get it work, but the Missing required parameter 'client_id' still sometimes show up after refresh (even I make sure I press the logout button before refresh). I'm using React 16.8 and react-google-login 5.0.2.

Whenever I got the missing parameter message, I'll refresh the browser several times and it goes away, at least so far. It takes place kind of random, I'll report here if I can find some pattern to reproduce it.

---

I have 5.0.2 installed but still cannot get it work. Also instead of passing client_id as property on <GoogleLogout>, is it actually making changes within the GoogleLogout component? In that case, I'll have to fork this project and make changes to it, then publish to npm in order to import them to my project. Does my understanding correct?

[max-carroll]

Should we not have an onLogoutFailure method and then if the object is null invoke the onLogoutFailure method? I will write the code to do that if anyone agrees?

class GoogleLogout extends Component {

  signOut() {
    const auth2 = window.gapi.auth2.getAuthInstance()
    if (auth2 != null) {
      auth2.signOut().then(
        auth2.disconnect().then(this.props.onLogoutSuccess)
      )
    }
    else {
       this.props.onLogoutFailure()
    }
  }

[TommieEdwardBerry]

I agree Tommie

On Jun 27, 2019, at 4:17 PM, max-carroll notifications@github.com wrote:

Should we not have an onLogoutFailure method and then if the object is null invoke the onLogoutFailure method? I will write the code to do that if anyone agrees?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[jasmeet17]

Working with react:^16.13.1 and typescript:^4.0.3

I am using gapi-script

npm install gapi-script

const auth2 = gapi.auth2.getAuthInstance();
if (auth2 != null) {
    auth2.signOut().then(
         auth2.disconnect().then(console.log('LOGOUT SUCCESSFUL'))
     )
}

[MatManevi]

I am experiencing this behavior.

It directly logs you in after you log out without asking you to choose from multiple accounts. And if you reload the page when you logged you, logout won't respond when you click on it.

Was a fix merged ?

My dependencies:

{
  "name": "frontend-web",
  "version": "0.2.1",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@loaders.gl/las": "^3.1.8",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.6.4",
    "@mui/system": "^5.7.0",
    "@reduxjs/toolkit": "^1.8.1",
    "axios": "^0.27.2",
    "deck.gl": "^8.7.8",
    "find-closest": "^7.0.1",
    "google-protobuf": "^3.20.1",
    "plotly.js": "^2.12.1",
    "protobufjs": "^6.11.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-google-login": "^5.2.2",
    "react-json-view": "^1.21.3",
    "react-plotly.js": "^2.5.1",
    "react-promise-tracker": "^2.1.0",
    "react-redux": "^8.0.1",
    "react-resize-detector": "^7.1.1",
    "react-rnd": "^10.3.7",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "socket.io-client": "^4.5.1",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

As you may see, we are using version 5.2.2 and I have tried all of the above