angular-auth-oidc-client: [Bug]: Silent renew periodic check doesn't run on page reload

Version

16.0.0

Please provide a link to a minimal reproduction of the bug

Unable to provide a link as it would contain the details of our IDP and require login

Please provide the exception or error you saw

I have set up silent renew and it works without problem, until the page is refreshed then I notice the event that states, 'silent renew, periodic check finished!' no longer is logging. 

I noticed this when working on the app locally and updating the code causing the site to refresh multiple times on code save.

If this is a configuration issue on myside, my apologies, please let me know what should be changed.

Steps to reproduce the behavior

1. Set up the project to use silent renew (see additional context for module configuration).
2. Set up a route that uses the AutoLoginPartialRoutesGuard
3. Load the app and hit the route that is protected and it will log you in via your IDP. Afterwhich, you will notice the logs in the console that silent renew is checking periodically.
4. Reload the page and notice that silent renew is no longer checking periodically.

A clear and concise description of what you expected to happen.

I would expect that even if the user using the app decides to reload the app, that silent renew will continue to check periodically and not force the user to login after each time the token expires.

Additional context

Auth Module Configuration:

AuthModule.forRoot({
      config: {
        authority: environment.auth.authority,
        redirectUrl: window.location.origin + `/pages/callback`,
        postLogoutRedirectUri: window.location.origin + `/pages/logged-off`,
        clientId: environment.auth.clientID,
        secureRoutes: [
          'http://localhost/project',
          environment.auth.secureRoute,
        ],
        scope: `openid profile email ${environment.auth.scopes}`, // 'openid profile ' + your scopes
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        renewTimeBeforeTokenExpiresInSeconds: 600,
        unauthorizedRoute: '/pages/unauthorized',
        logLevel: LogLevel.Debug,
      },
    }),

Routes

export const DEMO_ROUTES: Routes = [
  {
    path: '',
    component: ParentDemoComponent,
    children: [
      {
        path: 'demo',
        canActivate: [AutoLoginPartialRoutesGuard],
        data: { title: 'Demo' },
        component: DemoComponent,
      },
      {
        path: '',
        redirectTo: 'demo',
        pathMatch: 'full',
      },
    ],
  },
];

On initial login, I see this happening about every 3 or 4 seconds

After I reload the page, it will no longer check every 3 or 4 seconds, however on a navigation event within the app, there is a check for access token validity but no more periodic check for silent renew. Even if the user is using the app continuously, once the token expires, it is not being exchanged and will cause the user to login again.

About this issue

Original URL
State: closed
Created 10 months ago
Comments: 18

Most upvoted comments

@RakouskyS

@smithbrianscott

Mine is working now. I found that by creating a route called ‘callback’ and only using it during initial login that on page reload, the ‘checkAuth’ is not being fired and in turn not setting up the refresh token periodic check. I added ‘checkAuth’ to the app.component.ts and it is now working as expected.

Hi! Do you still have the callback route, which calls the checkAuth, in addition to the checkAuth in your app.component.ts? I think had the same setup as you did before.

Open the page

get redirected to /login-page

login-page.component.ts calls checkAuth() (in my own authService)

get redirected to identity server

login

get redirected to /callback

callback.component.ts calls checkAuth() (in my own authService)

authService redirects to main page

I would now add another checkAuth (not in my authService) in the app.component.ts. Did you get rid of the loginpage/callback page or did you add another checkAuth in your app.component.ts as I am planning to do? Thanks for you help.

I do not have a login-page component as I just use the AutoLoginPartialRoutesGuard on routes that needs to be secured by authentication. I ‘moved’ checkAuth to app.component.ts but I still have a callback.componet.ts file that is now empty (meaning it doesn’t checkAuth anymore) and does nothing but be an open route that is not secured by a guard so that the authentication provider can have a redirect that isn’t hitting a secured routed. The checkAuth in app.component is all that is needed and can be removed from callback component.

Thanks for answering, I noticed pretty quickly that the checkAuth in the callback component leads to redirect loops. Thanks for the help! It all works perfectly now.

RakouskyS on Sep 27, 2023

@RakouskyS

@smithbrianscott

Mine is working now. I found that by creating a route called ‘callback’ and only using it during initial login that on page reload, the ‘checkAuth’ is not being fired and in turn not setting up the refresh token periodic check. I added ‘checkAuth’ to the app.component.ts and it is now working as expected.

Hi! Do you still have the callback route, which calls the checkAuth, in addition to the checkAuth in your app.component.ts?

I think had the same setup as you did before.

Open the page

get redirected to /login-page

login-page.component.ts calls checkAuth() (in my own authService)

get redirected to identity server

login

get redirected to /callback

callback.component.ts calls checkAuth() (in my own authService)

authService redirects to main page

I would now add another checkAuth (not in my authService) in the app.component.ts. Did you get rid of the loginpage/callback page or did you add another checkAuth in your app.component.ts as I am planning to do?

Thanks for you help.

I do not have a login-page component as I just use the AutoLoginPartialRoutesGuard on routes that needs to be secured by authentication. I ‘moved’ checkAuth to app.component.ts but I still have a callback.componet.ts file that is now empty (meaning it doesn’t checkAuth anymore) and does nothing but be an open route that is not secured by a guard so that the authentication provider can have a redirect that isn’t hitting a secured routed. The checkAuth in app.component is all that is needed and can be removed from callback component.

pasadyaguy on Sep 27, 2023

We updated the sample. You do not need the checkAuth() in the callback-route directly, because the app.component normally hosts the router outlet and therefore the callback.component. However, it is in your project: Just make sure an unauthenticated state can call the checkauth, when it returns from the IDP 😉

FabianGosebrink on Sep 27, 2023

Fix is underway 🙂 https://github.com/damienbod/angular-auth-oidc-client/pull/1842

FabianGosebrink on Sep 19, 2023

Mine is working now. I found that by creating a route called ‘callback’ and only using it during initial login that on page reload, the ‘checkAuth’ is not being fired and in turn not setting up the refresh token periodic check. I added ‘checkAuth’ to the app.component.ts and it is now working as expected.

pasadyaguy on Sep 19, 2023

There seems to be more broken than the silent refresh. I also don’t get any events from OidcSecurityService.userData$ when a refresh occures. Which means no userData related content is showing up anywhere on the page at all after a refresh. Once it is broken even a full reload is not helping. I have to create a whole new browser session in order to fix the issue.

ThorstenKunz on Aug 31, 2023

I have same issue #1828

davidsarkany on Aug 26, 2023