inject custom authorization

[Karman40]

Description

I would like to insert a unique header before each call. There is an "HttpInterceptor" that does this, but for some reason it does not run in the case of meilisearch/angularsearch. Is it possible to set your own token for each call before each call?

I would like to run the calls through my own backend, because meilisearch currently does not support that a specific api key can only see certain data within the index, and it is safer to assign it to the user's token. The backend would actually work as a proxy, validating the user data, then modifying the header and forwarding it locally to meilisearch.

Expected behavior

Compatibility with HttpInterceptor

Environment

• OS: Windows 11
• Browser: Google Chrome: 108.0.5359.125 x64
• Meilisearch version: 0.30.4
• instant-meilisearch version: ^0.10.1
• angular-instantsearch version: ^4.3.1
• Angular version: ^14.2.8

Code

For my own backend calls, the token is included perfectly in the header.

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(
    private inj: Injector,
    private auth: Auth,
  ) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (request.url.indexOf('oauthCallback') > -1) {
      return next.handle(request);
    }

    return from(this.auth.currentUser.getIdTokenResult()).pipe(
      switchMap(token => {
        request = request.clone({
          setHeaders: {Authorization: `Bearer ${token.token}`}
        });
        return next.handle(request);
      }),
    );
  }
}

[bidoubiwa]

Hey @Karman40, thanks a lot for the feedback :) I'm moving it to instant-meilisearch as the issue comes from the client and not angular itself.

About your interceptor not working, I'll investigate. Meanwhile, it is possible in Meilisearch to create tokens with specific rights on an index. See this doc.

If this does not cover what you need as permission, please tell us so we can add that in the product feedbacks!

[Karman40]

@bidoubiwa Thank you for your answer!

Sorry if my description is a bit confusing.
The database structure is quite complicated and storing, updating, and deleting the unique "tenat token" would be a lot of work, while the use of existing guards and a proxy would not be so complicated.

there are users and profiles. They are connected to each other and there is no limit to their number. The user also has a permission level within the profile connection.

After that, the data itself is attached to the profile. So, during searches, it should be checked to which profile the data is assigned, whether the user has access to the profile and at what level. unfortunately, the tenat token cannot fully cover this.

We could also monitor the search speed using the proxy. The backend save all http request.

[bidoubiwa]

Hey @Karman40, sorry for the delay.

I thought about your issue; it's indeed weird that your interceptor does not work. From what you describe, I'm not sure the issue comes from our side. Do you have any idea where it might come from?

Maybe you should report the bug to the interceptor you're using?

[Karman40]

@bidoubiwa If the interceptor is not being called when making requests with the "@meilisearch/instant-meilisearch" package, it's possible that the package is making the requests directly using the fetch API or XMLHttpRequest instead of using the Angular HttpClient.

[bidoubiwa]

Hey @Karman40, I dug around a bit, and indeed you are right. instant-meilisearch, through meilisearch-js, uses the fetch API. Algolia's angular-instantsearch has an option where you can provide the requester which instant-meilisearch (nor meilisearch-js) have.

See example.

To solve this issue, we need to make the requester an option in meilisearch-js with a default value using fetch and pass that option to instant-meilisearch.

I'll create an issue in meilisearch-js with this feature request.

[Karman40]

@bidoubiwa Thank you for your feedback!
Can you tell me an ETA?

[bidoubiwa]

Unfortunately, hard to say at the moment. It is planned in a near future but I don't want to create any false hope.
I'll come back to you as soon as the issue is created and the work has been started.

[Karman40]

Hello @bidoubiwa. I hope this letter finds you well. I saw that meilisearch-js already supports custom http request. When do you think this will be available in Angular? Do you see a chance to somehow make it work now (it would be very important)?

[bidoubiwa]

Hello @Karman40, I'll be working on it very shortly. I hope this week! I'll keep you up to date

[Karman40]

@bidoubiwa that's a great new for me! Can i help some how?

[bidoubiwa]

@Karman40 does this answer your needs #1081 ?