Could not redirect on protected page and access it. And adding auth-callback to url after logging

Hi Scott,

I actually work on a web project with Angular and I would add some Identity Server authentication on it.

I have somes questions related to redirection on redirect url after login.

Foremost, thank you for your example and your tutorial.

https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client

However I faced some troubles while putting it into practice.

I begin my process on my home page with this url :

For the moment, I have no buttons to access the protected component. Also, I used this url to access protected component into my navigator :

http://localhost:4200/#/pages/protected

This url drove me well on identity server authentification page. However, after sign in, the returned url in navigator becomes :

http://localhost:4200/auth-callback#/pages/dashboard

Firstly, how can I avoid the insertion of "auth-callback" in the url ?

Secondly, I am not able to access to my protected page url

Indeed, when I tried to access it, it always redirect me on following url :

http://localhost:4200/auth-callback#/pages/dashboard

Instead of :

http://localhost:4200/auth-callback#/pages/protected

Did I miss something in my configuration ?

Config.cs file on Identity Server Side

new Client
{
    ClientId = "spa",
    ClientName = "SPA Client",

    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,

    RedirectUris =
    {
        "http://localhost:4200/auth-callback",
    },

    PostLogoutRedirectUris = { "http://localhost:4200/" },
    AllowedCorsOrigins = { "http://localhost:4200" },

    AllowedScopes = { 
        IdentityServerConstants.StandardScopes.Email,
        IdentityServerConstants.StandardScopes.Profile,
        IdentityServerConstants.StandardScopes.OpenId,
        Utils.IdentityResourcesUtil.Roles,
        "ibis_api"
    }
},

auth.service.ts file on my angular web project :

import { Injectable } from '@angular/core';
import { UserManager, UserManagerSettings, User, WebStorageStateStore } from 'oidc-client';

@Injectable({
  providedIn: 'root',
})
export class AuthService {

  private manager = new UserManager(getClientSettings());
  private user: User = null;

  constructor() {
      this.manager.getUser().then(user => {
          this.user = user;
      });
  }

  isLoggedIn(): boolean {
    return this.user != null && !this.user.expired;
  }

  getClaims(): any {
    return this.user.profile;
  }

  getAuthorizationHeaderValue(): string {
    return `${this.user.token_type} ${this.user.access_token}`;
  }

  startAuthentication(): Promise<void> {
    return this.manager.signinRedirect();
}

  completeAuthentication(): Promise<void> {
      return this.manager.signinRedirectCallback().then(user => {
          this.user = user;
      });
  }

}

export function getClientSettings(): UserManagerSettings {
  return {
    authority: 'http://localhost:5000/',
    client_id: 'spa',
    redirect_uri: 'http://localhost:4200/auth-callback',
    post_logout_redirect_uri: 'http://localhost:4200/',
    response_type: 'id_token token',
    scope: 'email profile openid',
    filterProtocolClaims: true,
    loadUserInfo: true,
    userStore: new WebStorageStateStore({ store: window.localStorage }),
  };

auth-callback.component.ts file

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'ngx-app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styles: [],
})
export class AuthCallbackComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
      this.authService.completeAuthentication();
  }

}

Thank you in advance for your answer.

scottbrady91 / Angular4-OidcClientJs-Example

Could not redirect on protected page and access it. And adding auth-callback to url after logging #6