1

I'm trying to implement OpenId and oidc-client-js in react. Right now I'm stuck in implementing logout function.

From what I understand, I need to set the post_logout_redirect_uri and use signoutRedirect() to logout the user. Logging out the user works, but unfortunately it stays in the identity server logout page. What I need to do is to redirect the user to the post_logout_redirect_uri.

Can someone tell me what am I missing here? Thanks in advance!

This is the URL where I get redirected. https://identityserver.xx.com/Account/Logout?logoutId=CfDJ8Cqm6alCoddAqWl...


Here's my tech stack:


Below is my Identity server admin settings.

  • Front Channel Logout Uri: http://localhost:3000/signout-oidc
  • Post Logout Redirect Uris: http://localhost:3000/signout-callback-oidc

Here's the logout code

    logout = async () => {
        try {
            userManager.signoutRedirect({
                id_token_hint: this.user?.id_token,
                post_logout_redirect_uri : process.env.REACT_APP_LOGOFF_REDIRECT_URL,
                state: this.user?.state
            }).then( () => {
                console.log('done signoutRedirect')
            });

            userManager.clearStaleState()
        }catch(error){
            console.log(error);
        }
    }
Wreeecks
  • 2,186
  • 1
  • 33
  • 53

1 Answers1

2

in AccountController -> BuildLoggedOutViewModelAsync method check AutomaticRedirectAfterSignOut is true when constructing the viewmodel.

  var vm = new LoggedOutViewModel
            {
                AutomaticRedirectAfterSignOut = AccountOptions.AutomaticRedirectAfterSignOut, //this must return true.
                PostLogoutRedirectUri = logout?.PostLogoutRedirectUri,
                ClientName = string.IsNullOrEmpty(logout?.ClientName) ? logout?.ClientId : logout?.ClientName,
                SignOutIframeUrl = logout?.SignOutIFrameUrl,
                LogoutId = logoutId
            };

in your view LoggedOut.cshtml check ~/js/signout-redirect.js is included properly.

@section scripts
{
    @if (Model.AutomaticRedirectAfterSignOut)
    {
        <script src="~/js/signout-redirect.js"></script>

    }
}

if your logged out page doesn't contain anchor tag with <a id="post-logout-redirect-uri" ...> you probably have mismatching post_logout_redirect_uri configured in request and client.

rawel
  • 2,923
  • 21
  • 33
  • Thanks for your reply. The Identity server seems to work fine. not sure if this loggedout.cshtml is relevant to my issue. I'm sending this request from a react service... – Wreeecks Oct 21 '21 at 03:11
  • can you check the HTML(F12) for the logged out page to see if it contain the anchor tag and js I mentioned? – rawel Oct 21 '21 at 03:17
  • it has the signout-redirect.js but there's no anchor tag. It also contains an iframe that loads the logout callback page... – Wreeecks Oct 21 '21 at 04:01
  • then probably mismatching postlogoutredirects in your client settings and identityserver registered client – rawel Oct 21 '21 at 04:53
  • check [ClientPostLogoutRedirectUris] table in the identity server and it should match exactly to your configured postlogoutredirect uri. check scheme and trailing '/' – rawel Oct 21 '21 at 05:00
  • http://localhost:3000/signout-callback-oidc doesn't look like the URL you want the user to redirect. Probably you want to land on the home page _http://localhost:3000/. So set it as so and make sure the identity server table has the exact uri. – rawel Oct 21 '21 at 05:05
  • I think your suspicion is correct, I'm trying to debug IDS server and found out that `post_logout_redirect_uri` always returns null. This might be the case. Thanks for pointing me to this direction. – Wreeecks Oct 22 '21 at 03:12