'Angular - auth0 AuthHttpInterceptor not attaching token to requests
To cut a long story short, I am having problems with auth0's AuthHttpInterceptor class not actually attaching tokens to any outgoing requests.
I have been following this tutorial series in order to set up auth0 in a simple Flask and Angular application. I followed the Flask component, and have set up a simple endpoint to retrieve some data from my database. Note that the @requires_auth
decorator is exactly the same as that in the tutorial:
@app.route("/api/v1/members", methods=["GET"])
@requires_auth
def get_all_members():
# Pagination Logic
page_num, page_size = 1, 10
if request.args.get('pn'):
page_num = int(request.args.get('pn'))
if request.args.get('ps'):
page_size = int(request.args.get('ps'))
page_start = (page_size * (page_num - 1))
return_data = []
for member in members.find().skip(page_start).limit(page_size):
# Convert all IDs into strings
member = convert_member_ids(member)
return_data.append(member)
return make_response(jsonify(return_data), 200)
This isn't the actual endpoint that will be restricted, I'm only protecting this page in order to test the auth actually works.
In Angular, this is consumed by a component which retrieves the data and displays it on the web page:
export class MembersComponent implements OnInit {
constructor(private webService: WebService) { }
ngOnInit() {
if (sessionStorage['page']) {
this.page = Number(sessionStorage['page']);
}
this.members_list = this.webService.getMembers(this.page);
// TODO: Fix this with a proper expression
this.num_pages = 90 / 10;
}
members_list: any = [];
page: number = 1;
num_pages: number = 0;
}
The resulting request is sent to http://localhost:5000/api/v1/members?pn=1
.
I deviated from the guide and instead followed the official auth0 documentation to implement an instance of the AuthHttpInterceptor class, and this is where the problems begin. My imports and providers arrays from app.module.ts are as follows:
imports: [
BrowserModule, HttpClientModule, RouterModule.forRoot(routes), ReactiveFormsModule, AuthModule.forRoot({
domain: '<my app domain>',
clientId: '<my client id>',
// AuthHttpInterceptor
httpInterceptor: {
allowedList: [
{
uri: 'http://localhost:5000/api/v1/members?pn=1',
httpMethod: HttpMethod.Get
}
]}
})
],
providers: [
{
provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true
},
WebService
],
In theory, and according to the documentation, this should use the auth0 AuthHttpInterceptor
class to intercept outgoing requests to attach authorization headers to them - in this case, only the members endpoint. Except, it doesn't. When I attempt to access the page, the outgoing request doesn't even have the header attached. This can be seen clearly in the console:
Since I have been following the tutorials and docs up to this point - what exactly am I doing wrong here? I have tried multiple different things and nothing solves it. Most of the other examples I have seen of this all implement it in a similar fashion, so I am confused as to why my code isn't working.
Any help would be greatly appreciated!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|