Angular OAuth2.0 OIDC - angular-oauth2-oidc

Question

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)

Did you check the network calls? Are there any error response from IS? — Piraveena Paralogarajah
– Piraveena Paralogarajah, Commented Dec 5, 2022 at 3:51

Theviyanthan Krishnamohan · Accepted Answer · 2022-12-05 05:43:18Z

0

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.

answered Dec 5, 2022 at 5:43

Theviyanthan Krishnamohan

1413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ffff Over a year ago

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"}"

Theviyanthan Krishnamohan Over a year ago

Can you make sure the authorization code grant is enabled in the application settings in the Console app of the identity server?

Collectives™ on Stack Overflow

Angular OAuth2.0 OIDC - angular-oauth2-oidc

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related