Filtering data using Vue Instant Search and Laravel

Hi All, I built-out this demo tonight using Laravel and Vue Instant Search. It’s extremely basic and I have it working fine.

However, I am trying to figure out how to filter the contacts by state name to limit the searchable data set that the user can see. For instance, I may want a user in ‘Ohio’ to only see search results for contacts in Ohio.

I suspect that this has to do with creating a secured api key, but I can not figure out how/where to plug that filter in to this demo app. Your advise/suggestions are appreciated.

Hello,

Secured API keys can definitely help but they need to be generated beforehand with the right indices and the right filter(s). You can generate one from your an API client. See the documentation on this page https://www.algolia.com/doc/api-reference/api-methods/generate-secured-api-key.
Please don’t generate them from the fontend of the application you’re building because it would expose the API key that allows to create/edit Secured API Keys and anybody will be able to modify them. So the idea is to generate the key separately and then use it in your application.

Another solution is to just apply the correct filter based on the location of the user, but anyone able to edit the query can remove the filter and perform the search in all the cities.

Let me know if that helps.

Thank You. Can I create the API key each time a user logs in? Or is it best to generate it when their profile is created/updated and then store that api key with their profile?

Hi @dhofer

It is fine to generate these API Keys when users log in, there is no limit to the number of secured API you cna create.

This tutorial of our documentation may also help: https://www.algolia.com/doc/guides/security/api-keys/how-to/how-to-restrict-the-search-to-a-subset-of-records-belonging-to-a-specific-user/

I hope this helps!

Hello, do you have a demo app somewhere that shows how to generate and use different API Keys with PHP/Laravel/Vue InstantSearch ? Maybe something that I could see in the codesandbox?

Hi @dhofer,

We don’t have a demo of the complete process that I am aware of, but we have this code example for Vue and secured API keys.

Be aware that if you’re generating Secured API Keys using the JavaScript client (or Vue) on your frontend, it will result in a security breach since the user is able to modify the filters you’ve set by modifying the code from the browser.

You can define a number of restrictions (valid until, restrict indices, etc.).

You can see more information about the different restrictions here.

Not sure who would use a ‘feature’ that is advertised as a ‘Security Breach’ but I suppose there are plenty of people… I’m not going down the front-end filter path. Do you have any Laravel folks on your team that I can chat with? I really just need to know, how you change API Keys using InstantSearch. It feels like I’m missing something very very basic.

When you say “change API keys using InstantSearch”, do you mean just change which one is being used? You can do that when you instantiate the search client as shown here. That key is grabbed on the front-end and passed down as a prop, but the key generation is done on the backend, using an API client, such as the PHP one.

Since you’re asking to speak to Laravel folks, I feel that I might be missing your question though…

Hi Maria, I was referring to changing which API key is being used.

Alright, then indeed like my colleagues mentioned, you can do it when you instantiate InstantSearch. There is no security breach to expose the secured API Key in the front-end, what is important is that the Key is generated in the back-end.

Thank You Marie!! This thread has definitely helped me to zero in on what I need to do, now my challenge is ‘how’ to do it with Laravel/PHP and InstantSearch. I am not a hard core laravel/php guy and conceptually get it but a working (simple) example would be a huge help.

Is there an issue with creating a Secure API key for each user, each time they logon (with an expiration date) and then storing that API key with their user profile data? If an existing API key exists on the profile, it could be deleted to help keep things clean.

Then, in the controller that returns my search view, simply pass the Secure API Key as a parameter?

return view('my.view')->with('securedAPIKey',$securedApiKey)

Thanks! Algolia is amazing! I have a lot of future use cases for it.

Hi @dhofer,

Since the secured API key is generated without contacting Algolia, it’s fine to do it directly in your controller every time you load the my.view. You don’t have to persist in your user profile.

Here is the PHP code to generate a secured API key directly in your controller:

    $securedApiKey = \Algolia\AlgoliaSearch\SearchClient::generateSecuredApiKey(
        'YourSearchOnlyApiKey', // Search only key can be generated via dashboard.
        [
            'restrictIndices' => 'index1,index2'
        ]
    );

    return view('my.view')->with('securedAPIKey', $securedApiKey);

Note, if you are using algolia/scout-extended instead of laravel/scout you can use this: algolia.com/doc/framework-integration/laravel/searching/client-side-search/?language=php#generate-search-keys.

Thanks.

Thank You! @nuno.maduro. Much appreciated. Hopefully, I can get this working over the weekend. I need to generate the secured api key in the controller and pass it through to the instantsearch vue component via a prop. That should work. If you happen to know of a sample app that I could use as a reference for that, it would be helpful. :smiley:

@nuno.maduro. I finally got a version of this working. Changing courses though and am going to open a new topic for my new challenge.

2 Likes