[Question/Support] when a user opens a new tab in the web browser, it will redirect the user back to home page

[yukund]

Hi guys,

Background:
I am using openid connect and implicit flow with silent refresh.
When a user opens a link (e.g. http://localhost/books) in a new tab in the web browser, firstly the angular app will do the authentication, and then it will redirect the user back to home page (e.g. http://localhost configured in the auth.config.ts show in below)

Question
In this case, if users want to open a new tab to visit http://localhost/books , how should I redirect the user back to http://localhost/books rather than the homepage after re-authenticated?
Any suggestions?

thanks
Yanbo

auth.config.ts

export const authConfig: AuthConfig = {

  // Url of the Identity Provider
  issuer: 'http://localhost:9193',

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin,

  // URL of the SPA to redirect the user after silent refresh
  silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',

  // The SPA's id. The SPA is registerd with this id at the auth-server
  clientId: 'ng-client',

  // set the scope for the permissions the client should request
  // The first three are defined by OIDC. The 4th is a usecase-specific one
  scope: 'openid profile web-api',

  showDebugInformation: true,
  sessionChecksEnabled: true
}

private configureWithFcWebApi() {

    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndLogin();

    this.oauthService.setupAutomaticSilentRefresh();
   . . .
}

[jeroenheijmans]

Aloha! I'm investigating something very similar.

First up, there's two things troubling you (I think):

1. If the implicit flow sends a user to the IDServer you need to get them back to the original route.
2. If you open a new tab the user is sent to the IDServer at all.

If you solve part 2 then you'd still have your question for new windows, so I suggest possibly solving them both.

For (1), using the "state" in the implicit flow to "remember" the route checkout the "Remembering State" docs, I believe that should fix things.

For (2) you could use localStorage instead of sessionStorage, but do check out #321 where I laid out both my issue with that and a workaround at the bottom.

Hope that helps.

[manfredsteyer]

Thx @jeroenheijmans for this great answer!

[yukund]

@jeroenheijmans , thank you very much. I am going to try it soon.

[yukund]

Hi @jeroenheijmans

For (1), using the "state" in the implicit flow to "remember" the route checkout the "Remembering State" docs, I believe that should fix things.
I am using this.oauthService.loadDiscoveryDocumentAndLogin(); // it does all magic for me.
I tried this.oauthService.initImplicitFlow('http://www.myurl.com/x/y/z');

something like that: https://github.com/manfredsteyer/angular2-oauth2/blob/master/readme.md. However, I got a infinite authorize loop.

Do you have an example that shows how to replace this.oauthService.loadDiscoveryDocumentAndLogin() with this.oauthService.initImplicitFlow('http://www.myurl.com/x/y/z'); this.oauthService.tryLogin()?

For (2) you could use localStorage instead of sessionStorage, but do check out #321 where I laid out both my issue with that and a workaround at the bottom.

I added "{ provide: OAuthStorage, useValue: localStorage }," as you suggested, it is working.
However I still would like to store tokens in the session store. Because, the session store will be cleaned once user log off or closed the browser. it seems more secure.

[jeroenheijmans]

@yukund If you "get an infinite authorize loop" I suggest creating a minimal repro and posting a question on Stack Overflow, which is a lot better suited for such reproducible problems.

As for the example on how to combine loading disco document, implicit flow, and trylogin, you could have a sneak peek at my (work in progress!) example repo where I do something like this:

this.authService.loadDiscoveryDocument()
  .then(() => this.authService.tryLogin())
  .then(() => {
    if (!this.authService.hasValidAccessToken()) {

      this.authService.silentRefresh()
        .catch(result => {
          // See https://openid.net/specs/openid-connect-core-1_0.html#AuthError
          const errorResponsesRequiringUserInteraction = [
            'interaction_required',
            'login_required',
            'account_selection_required',
            'consent_required',
          ];

          if (result && result.reason && errorResponsesRequiringUserInteraction.indexOf(result.reason.error) >= 0) {
            this.authService.initImplicitFlow();
          }
        });
    }
});

This will in order:

1. Load disco document
2. Do tryLogin to check if the URL hash fragment contains a token
3. Try silent refresh to get a token
4. Init implicit flow only if the silent refresh demands it

You could add an ìnitImplicitFlow()` at the complete end too if there's still no valid token, up to your situation.

PS. IMHO the security difference between sessionStorage and localStorage is negligable if you only store short-lived access tokens, but with my above suggestions it shouldn't matter much (except a small delay for users) anyways.

Again, if you have further issues, I suggest asking questions on Stack Overflow, which is much better suited for Q&A than GitHub Issues.

[yukund]

@jeroenheijmans thank you very much for your examples and clear explanation. It is very helpful.
I am going to try it soon. As you suggested if I have further questions I will ask on Stack Overflow.
Again, thank you Jeroen.