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

Questions OAuth/OIDC
1

image
image975×547 118 KB

image
image975×548 80.3 KB

image
image975×548 105 KB

below postman call works

image
image975×545 74.9 KB

below httpClient call fails on Angular.

image
image975×555 116 KB

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
2

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
3

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.

4

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!

5

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

1 Like