Angular + OIDC Implicit Flow Silent Renew

Question

I'm using the angular-auth-oidc-client package for authentication in my Angular application with our OIDC server. We use the implicit flow, and it works, but some of our users get logged out while doing stuff in the application at the end of the access token lifetime. So we wanted to implement the Silent Renew functionality, which is detailed in the docs for the package.

So, I added a silent-renew.html file and placed it in the /src folder for the Angular application, as well as tried placing it in the /assets folder. When in the /assets folder, I get an error in the console that the Angular application can't find a matching route:

It shows up just once, and the silent renew doesn't work; you still get logged out. If it's in the /assets folder, no error shows up, but the silent renew still doesn't work.

My real question is: where do I place the silent-renew.html file and how do I properly configure the package to do the silent renew?

When deployed, we build the angular app and place it in a docker container, served by NGINX. Locally, we're just using the CLI to serve the application.

FabianGosebrink FabianGosebrink · Accepted Answer · 2019-01-18T07:00:30

you can modify the angular.json as follows:

{
  "projects": {
    "test2": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "assets": [
              "src/silent-renew.html" // <-- add this line
            ],
          },
        },
      }
    }
  }
}

of course you will have to have a file called silent-renew.html.

When doing a build this file will be copied into the dist folder (or whatever folder you're building into) beside the index.html.

Hope this helps

Fabian

Angular + OIDC Implicit Flow Silent Renew

1 Answers