Connect angular and express apps

[pavebor144]

Hello,

I’m trying to secure an Angular application I made as well as the respective backend API written in express.

I have implemented angular and express apps according to configuration provided in guides. But when I try to hit my API I always get No authorization token was found error.

Any thoughts what I’m doing wrong?

Angular config

...
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthHttpInterceptor, AuthModule } from '@auth0/auth0-angular';



@NgModule({
  declarations: [
   ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routesConfig),
    ReactiveFormsModule,
    AuthModule.forRoot({
      // The domain and clientId were configured in the previous chapter
      domain: 'XXX.eu.auth0.com',
      clientId: 'CLIENT_ID',
      redirectUri: 'https://localhost:4200/entites',
    
      // Request this audience at user authentication time
      audience: 'https://XXX.eu.auth0.com/api/v2/',
    
      // Request this scope at user authentication time
      // scope: 'read:current_user',
    
      // Specify configuration for the interceptor              
      httpInterceptor: {
        allowedList: [
          {
            uri: 'https://XXX.eu.auth0.com/api/v2/*',
            tokenOptions: {
              // The attached token should target this audience
              audience: 'https://XXX.eu.auth0.com/api/v2/',
    
              // The attached token should have these scopes
              // scope: 'read:current_user'
            }
          }
          }
        ]
      }
    })
  ],
  providers: [
    ...
    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Angular API call

@Injectable()
export class MyService {

    constructor(private http: HttpClient) {
    }

    getAll() {
        return this.http.get('/api/entities');
    }
}

express config

...
import { expressJwtSecret } from 'jwks-rsa';
import { expressjwt } from 'express-jwt';

const checkJwt = expressjwt({
    secret: expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: 'https://XXX.eu.auth0.com/.well-known/jwks.json'
  }) as any,
  audience: 'https://localhost:4200/api',
  issuer: 'https://XXX.eu.auth0.com/',
  algorithms: ['RS256']
});

const bodyParser = require('body-parser');

const app: Application = express();

app.use(bodyParser.json());
app.use(cookieParser());
app.use(checkJwt);

// REST API
app.route('/api/entites').get(readAll);

httpsServer.listen(9000, () => console.log("HTTPS Server running at https://localhost:" + (httpsServer.address() as AddressInfo).port));

[tyf]

Hello @pavebor144 welcome to the community!

@pavebor144

But when I try to hit my API I always get No authorization token was found error.

I assuming you are receiving a 401 here? This typically means that there is no Access Token added to the authorization header in the request to the API like was the case in this community topic.

The following documentation regarding the AuthHttpInterceptor could be helpful:

Auth0 Angular SDK Quickstarts: Call an API

Keep us posted!

[pavebor144]

I found the problem. First of all I made some mistakes related to configuration. Additionally interceptor just failed to match my API when I provide a path which includes localhost.

...
      httpInterceptor: {
        allowedList: [
          'https://localhost:4200/api/*', // <= not working
          'localhost:4200/api/*', // <= not working
          '/api/*' // <= working
        ]
      }

Can you explain why full path doesn’t work?

[tyf]

Sorry for the delayed response on this one, but glad to know you got the issue sorted!

@pavebor144

Can you explain why full path doesn’t work?

I’m not positive why the full uri isn’t respected, but the docs do show the use of the path:

@auth0/auth0-angular