Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Angular doesn't redirect me to the specified page after user login.

I'm using wso2 Identity Server to authenticate the users. I want to use the Authorization Code Flow.

In my angular application (in which I use the dependency angular-oauth2-oidc) I have a login page that contains only a button that redirects to the wso2 authorization server. After I log in, i'm not redirected to the right page.

I have a service:

const oAuthConfig : AuthConfig = {
   issuer: 'https://localhost:9443/oauth2/token',
   strictDiscoveryDocumentValidation: false,
   redirectUri: 'http://localhost:4200/dashboard',
   postLogoutRedirectUri: 'http://localhost:4200/login',
   tokenEndpoint: 'https://localhost:9443/oauth2/token',
   userinfoEndpoint: 'https://localhost:9443/oauth2/userinfo',
   clientId: '{{clientId}}',
   responseType: 'code',
   scope: 'openid',
   showDebugInformation: true
 @Injectable({
   providedIn: 'root'
 export class OauthWso2IdentityServerService {
    constructor(private readonly oauthService: OAuthService) {}
    loginWithWso2IdentityServer() {
        this.oauthService.configure(oAuthConfig);
        this.oauthService.loadDiscoveryDocument().then(() => {
          this.oauthService.tryLoginCodeFlow().then(() => {
             if(!this.oauthService.hasValidAccessToken()) {
               //initalize the login flow
               this.oauthService.initCodeFlow()
             } else {
               this. oauthService.loadUserProfile().then((userProfile) => {
               console.log(JSON.stringify(userProfile));
In my LoginComponent i have:
  constructor(private wso2: OauthWso2IdentityServerService) {}
  login() {
      this.wso2.loginWithWso2IdentityServer();
login.html:
<button (click)="login()">login</button>
then I implemented a guard:
export class AuthGuard implements CanActivate {
  constructor(private oauthService: OAuthService, private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     if (this.oauthService.hasValidIdToken()) {
         this.router.navigate(['/dashboard']);
         return true;
   return false;
in app-routing.module.ts:
  { path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },
I get redirected to: http://localhost:4200 (that is a blank page)
According to the documentation of the angular-oauth2-oidc SDK, you are supposed to use this method to initiate the sign-in flow:
this.oauthService.initLoginFlow();
As an aside, WSO2 Identity Server has its own Angular SDK that provides better integration with the Identity Server and Asgardeo.
You can download it from npm by running:
npm install --save @asgardeo/auth-angular
Then, you can configure the SDK:
// app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
// Import Auth Module
import { AsgardeoAuthModule } from "@asgardeo/auth-angular";
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        // Provide the configs (See API Docs)
        AsgardeoAuthModule.forRoot({
            signInRedirectURL: "https://localhost:3000",
            clientID: "clientID",
            baseUrl: "https://localhost:9443"
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }
Then, you can implement sign-in in your component by doing this:
// app.component.ts
import { Component } from "@angular/core";
import { AsgardeoAuthService } from "@asgardeo/auth-angular";
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
export class AppComponent {
    constructor(private auth: AsgardeoAuthService) { }
    // Use this function in a login button to simply sign-in.    
    handleSignIn(): void {
        this.auth.signIn();
    // Use this function in a logout button to simply sign-out.
    handleSignOut(): void {
        this.auth.signOut();
You can find more information about this from the following links.
https://github.com/asgardeo/asgardeo-auth-angular-sdk
https://www.thearmchaircritic.org/tech-journal/add-login-to-an-angular-app-using-asgardeo
https://wso2.com/asgardeo/docs/get-started/try-your-own-app/angular/
https://medium.com/@dasunin30/a-simple-guide-to-authenticate-an-angular-application-with-asgardeo-84b1b622e0c5
                Thanks for the answer! I'm trying to use asgardeo and I configured the AsgardeoAuthModule like you showed me, also specyfing the signOutRedirectURL and setting as signInRedirectUrl :"localhost:4200/login". When I click on the login button I'm redirected to the wso2 identity server login page, but then I'm redirected to my application with this error: "POST localhost:9443/oauth2/token 401" and " "error_description": "Unsupported Client Authentication Method!", "error": "invalid_client", "name": "Requesting access token failed with ", "code": "JS-AUTH_CORE-RAT1-HE03"}"
– ffff
                Dec 5, 2022 at 9:24
                Can you make sure the authorization code grant is enabled in the application settings in the Console app of the identity server?
– Theviyanthan Krishnamohan
                Dec 9, 2022 at 6:17
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.