Angular-oauth2-oidc: Hash routing and append of access_token not working

[PaulienVa]

We are using version 4.0.3. as we are not yet able to upgrade to angular 7.
When we want to use hash routing in our angular application, this framework redirects appending the access_token using a & instead of a #.
Does anyone knows why it does that ?
We are now getting the following error : Cannot match any routes. URL Segment: [segment]&acces_token
The only way to fix this, is to postfix the redirect url with a ? ...

Is there also a way to not show the access_token in the url? We actually don't want to show that

[manfredsteyer]

Hi,

the good thing about using the hash-fragment is, that it will never be send to the server. By definition, it stays in the browser.

Regarding the issue with hash routing, the following link could be interresting:
https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/routing-with-the-hashstrategy.html

Wishes,
Manfred

[PaulienVa]

The hash strategy does not work for us, as we do not want to set the initialNavigation to false.
Still it is ok to append the access_token prefixing it with & but I guess it is not nice that we need to postfix our redirect url with a ? to make both ends work, isn't it possible to make this easier and make it work more out of the box?

[Plankton93]

I have the same problem. I implemented the implicit flow. It all works fine when i am using {useHash: false}. But if i set it to true, the redirect doesn't work right. I don't want to set initialNavigation: false. After this setting my application doesn't route anymore. If i set the redirect url to the example url with #, it doens't work either.

public login(): Promise<void> {
    return this.oauthService.tryLogin()
      .then(() => {
        if (!this.oauthService.hasValidAccessToken()) {
          this.oauthService.initImplicitFlow();
          return Promise.resolve();
        }
      }).then(() => {
        if (this.oauthService.hasValidAccessToken()) {
          localStorage.setItem("id_token","value");
          this.initTokenData(this.oauthService.getAccessToken());
        }
        return Promise.resolve();
      }).catch(e => {
        console.log("ERROR: ", e);
        return Promise.reject(e);
      });
  }

RouterModule.forRoot(INIT_ROUTES,
      {
        useHash: true,
        preloadingStrategy: PreloadAllModules,
        enableTracing: true
        })

loginUrl: 'https://***/oauth/authorize',
  logoutUrl: 'https://***/exit',
  redirectUri: "http://localhost:4200/#/home",
  clientId: '***',
  scope: 'write',
  oidc: false,
  responseType: 'token'

This is my implementation of it and it does not work! After the login i get redirected to my application and i get following url http://localhost:4200/#/home&access_token. I have a fallback component which is activated on ** routes. I am getting the fallback component rendered and not the home component.
Is there any solution to this problem?

[jeroenheijmans]

There's not a great satisfactory built-in library solution perhaps for older versions (e.g. v4 mentioned in the question), so if you're on one of those versions and landed here you might need to look for workarounds, unfortunately.

For newer versions, I saw Manfred mention in #622 mentioning the intention to move to the "history" API, where this issue could be tackled.

Closing the issue for now, since it's not seeing any other substantial activity.

(Let us know if there's a reason to re-open it, or leave additional comments if folks have tips and workarounds for those older versions.)