Logout using embedded sign-in widget fails

Questions OAuth/OIDC
1

I used the example in the oficial Embedded Okta Sign-In Widget fundamentals which is a simple webpage with log-in through JS in an HTML page, where the application on OKTA is configured as SPA.

The log-in works just fine, but when I try to logout, the page reloads and then it doesn’t show the log-in widget again. It shows I’m still logged in (apparently it never logged out). From what I can see, the oktaSignIn.authClient.signOut() method is failing on my case. Basically my original logout function is below:

function logout() {
    oktaSignIn.authClient.signOut();
    location.reload();
}

After looking for the answer in my places and checking some other answers in the forum and reading more about the Okta Auth JavaScript SDK, I came up with the following logout function that is working (apparently) like a charm:

async function logout() {
  // signOut() by itself is not working
  // After the location.reload() the screen doesn't load the sign-in widget,
  // and it shows it is still logged in
  // await oktaSignIn.authClient.signOut();

  // gets accessToken object to revoke it
  // recommended by https://github.com/okta/okta-auth-js#closesession
  const accessToken = await oktaSignIn.authClient.tokenManager.get('accessToken');

  // revokes access token
  await oktaSignIn.authClient.token.revoke(accessToken);

  // closes session, alternative to signOut()
  await oktaSignIn.authClient.session.close();

  // clears okta-token-storage from localStorage. Although documentation for
  // closeSession() says tokens are cleared in TokenManager, the actual browser
  // localstorage maintains the idToken. This clear() removes it
  await oktaSignIn.authClient.tokenManager.clear();

  // Reloads browser to show sign-in widget again
  location.reload();
}

So, my questions are:

  • Why the official example is not working on my case? Am I forgetting something?
  • I’m not sure the solution I came up with is the most efficient one, does anyone suggest that I change anything on it?
  • Why don’t I see other people going through the same logout problems? Would it be because many people implement Okta Log-in for other platforms, like mobiles, back-end apps, machine-to-machine, etc?

Thank you,

1 Like
2

Hello,
Sounds like you have a working solution. You could also do something like,

        oktaSignIn.authClient.signOut({
          clearTokensBeforeRedirect: true,
          postLogoutRedirectUri: 'http://localhost:8080/widget-appembed-A.html'
        });
3

It took me a while to test this, but I finally did and it is not working…
The same behavior is happening… I see the okta-token-storage key in my localStorage is removed and the page reloads, after that it automatically logs back in and the okta-token-storage is back in localStorage.

There is a note for clearTokensBeforeRedirect:

Use this option with care : removing local tokens before fully terminating the Okta SSO session can result in logging back in again when using @okta/okta-react 's SecureRoute component.

I’m not using react and I haven’t set onAuthRequired anywhere so I don’t know if it is applicable, but in any case, it is just not logging out with .signout(), only with .session.close().

4

Thanks for the solution, I just stumbled over the same issue.