User I am using Angular Auth OIDC Client for authentication, but it works in postman calls and fails for Angular httpClient calls in browser and gives me unauthorization error 401



below postman call works

below httpClient call fails on Angular.

type or paste code here
*******************auth-config.module.ts*******************************************
```import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';


@NgModule({
    imports: [AuthModule.forRoot({
        config: {
            authority: 'https://dev-xx5jaeo2xxxxxsvi.us.auth0.com',
            redirectUrl: window.location.origin,
            clientId: 'VKsDsuugMR0FGC0O2b0CiwSuZAxxxxxx',
            scope: 'openid profile offline_access',
            responseType: 'code',
            silentRenew: true,
            useRefreshToken: true,
            logLevel: LogLevel.Debug,
            secureRoutes:['http//localhost:8080'], //securing the backend 
            customParamsAuthRequest:{
                audience: 'http://localhost:8080/'
            }
        }
      })],
    exports: [AuthModule],
})
export class AuthConfigModule {}


*******************save-video-details.component.ts*******************************************
  saveVideo(){
    //Call the video service to make a http call to our backend
    console.log("inside saveVideo:")
    const videoMetaData: VideoDto = {
      "id": this.videoId,
      "title": this.saveVideoDetailsForm.get('title')?.value ,
      "description": this.saveVideoDetailsForm.get('description')?.value,
      "tags": this.tags,
      "videoUrl": this.videoUrl,
      "videoStatus": this.saveVideoDetailsForm.get('videoStatus')?.value,
      "thumbnailUrl": this.thumbnailUrl
      
    }
    console.log(videoMetaData);
    this.videoService.saveVideo(videoMetaData).subscribe(data=>{
      this.Matsnackbar.open("Video metaData Updated successfully","OK");
    });
  }
1 Like

Maybe I missed it, but I don’t see where in your Angular application you pass the user’s access token along as Bearer auth in the Authorization header (which looks to be what works for you in Postman).

Is it possible the call is failing because the authorization is missing or malformed?

1 Like

Hi andrea, I think it worked when I used “http://localhost:8080/api/videos/” in auth-config.module.ts and when I reloaded it, it worked. But its strange even when I use http://localhost:8080/, now still its working. below is the code

import { NgModule } from ‘@angular/core’;
import { AuthModule, LogLevel } from ‘angular-auth-oidc-client’;

@NgModule({
imports: [AuthModule.forRoot({
config: {
authority: ‘https://dev-8j5jxxxxxxxjs5nsvi.us.auth0.com’,
redirectUrl: window.location.origin,
clientId: ‘VKsDsuugMR0FGC0Occcccccccc91YuMh’,
scope: ‘openid profile offline_access’,
responseType: ‘code’,
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
secureRoutes:[‘http://localhost:8080/’], //securing the backend
customParamsAuthRequest:{
audience: ‘http://localhost:8080
}
}
})],
exports: [AuthModule],
})
export class AuthConfigModule {}

also I am using HTTP_Interceptos so, may be thats why I do not need to pass token I guess. Correct me if I am wrong.

Hey there @jaimin !

I’m confused about why it started working for you, but maybe I shouldn’t question it. :laughing:

I see you’re using the angular-auth-oidc-client and want to utilize their interceptor with the secureRoutes you declared. Just to make sure, did you provide the interceptor in the app.module.ts too?

Is everything working for you now, or are you still seeing errors?

Keep us posted!

Yes its working for me now. I sent how it worked.

1 Like