React signin widget NOT logging out when browser / tab is closed

Questions
#1

Hello,

I am using the React okta-signin-widget in a local development environment, connecting to a development Okta account. Everything works peachy except I am not logged out of the site or Okta when I close the browser or tab. If I click on a Logout button, I am logged out though.

What could the issue be?

Thank you.

#2

If you look in your browser’s console, are there any errors? I’ve seen issues with logout when you don’t have a trusted origin defined for your app’s URL.

#3

Also, is your browser set to clear cache/cookies upon close? The Okta session is persisted via a session cookie (you’ll see a cookie called ‘sid’ set on your Okta domain), so if cookies are not getting cleared and/or the user is not logging out (which will kill their Okta session), this could explain the behavior you are seeing.

#4

Hello,

Thank you for your reply.

I am not seeing a cookie called ‘sid’ but I am seeing other Okta cookies, set to expire with Session (see attached image). They are not expiring when the browser is closed.

My browser was not set to clear the cache and delete cookies when the browser is closed. Once I set it, it worked as it should. Obviously, I can’t go around to everybody’s browser who logs into my site and make sure they have this option set. Is there another way to log out a user when the browser is closed?

image
image1301×97 8.12 KB

#5

The cookies you are looking at are created on the domain for your application (our SDKs set those to support important functionality for the OAuth flow), so it won’t include the Okta session cookie, which is only set on your Okta domain.

If you navigate to your Okta tenant directly and check the cookies set on that domain, do you see the “sid” there?

#6

Hello,

Yes, I see the ‘sid’ cookie set there.

image

#7

This “sid” cookies is the one that controls/determines if the user’s Okta session is still valid.

Unless you redirect to the /logout route (which removes this cookie at the Okta domain), you/your app make a CORS request to delete this session (to /api/v1/sessions/me, which is dependent on third party cookies not being blocked, OR the user logs out of Okta directly, then this “sid” cookie will still be present on the Okta domain and is separate from your application session (which is usually managed via tokens).

If cookies are not getting cleared in the users browser when they close it OR if your org is set to grant users persistent session cookies, the Okta session remaining when the user does not perform one of the above logout options is expected.

Can you confirm if your application is triggered either of those API requests I mentioned (either a redirect to /oauth2/{{authorizationServerId}}/v1/logout or a DELETE to /api/v1/sessions/me)?

#8

Hello,

I am not sure how you redirect to a route when a user closes the browser/tab. I am looking into it. Does Okta have any sample code on how to do this in a React SPA?

My app is triggering oktaAuth.signOut('/') when a user clicks on the logout button, but that is all.

#9

If you install the Okta CLI and run okta start react, it’ll use this example:

You can see a video of this at React + Oka CLI - YouTube.

#10

I installed and ran that example and it has the same issue; closing the browser / tab does not log me out.

#11

It works for me. Do you see any errors in your developer console?

#12

Hello,

No errors, but I see some warnings. My browser is not set to clear the cache and delete cookies when the browser is closed.

image
image1872×437 30.3 KB

#13

I’m sorry, I didn’t read your question thoroughly. I didn’t realize you wanted to log the user out when they close the tab, with no actions required from the user. You might be able to accomplish this by changing the Sign-In Widget’s underlying library to use session storage instead of local storage. GitHub - okta/okta-auth-js: The official js wrapper around Okta's auth API

#14

I have been playing around with those setting based on your suggestion and it doesn’t appear to be saving to sessionStorage. I will keep investigating.

export default {
  oidc: {
     clientId: CLIENT_ID,
     issuer: ISSUER,
     redirectUri: REDIRECT_URI,
     scopes: ['openid', 'profile', 'email'],
     pkce: true,
     disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
 },
 tokenManager: {
     storage: 'sessionStorage'
 },
 storageManager: {
     token: {
	    storageType: 'sessionStorage',
	    storageTypes: []
     },
     cache: {
	    storageType: 'sessionStorage',
	    storageTypes: []
    },
    transaction: {
	    storageType: 'sessionStorage',
	    storageTypes: []
    }
  }
};