Theo's Typesafe Cult•3mo ago

Handling Third-party lib client component that relies on ENV vars.

Hi, I am currently trying to add search on my project, and I stubbled upon a common scenario that I don't know how to handle yet... I am trying to use Meilisearch with react-instantsearch library. I have this snippet of code, from the doc:

"use client";

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";

export const { searchClient } = instantMeiliSearch(
  env.NEXT_PUBLIC_SEARCH_API_URL,
  env.NEXT_PUBLIC_SEARCH_API_KEY,
);

export default function InstantSearchComponent() {

  return (
    // @ts-ignore
    <InstantSearch indexName="steam-videogames" searchClient={searchClient}>
      {/* @ts-ignore */}
      <SearchBox />
      {/* @ts-ignore */}
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({
  hit,
}: {
  hit: {
    id: string;
    image: string;
    name: string;
    description: string;
  };
}) {
  return (
    <article key={hit.id}>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.description}</p>
    </article>
  );
}

"use client";

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";

export const { searchClient } = instantMeiliSearch(
  env.NEXT_PUBLIC_SEARCH_API_URL,
  env.NEXT_PUBLIC_SEARCH_API_KEY,
);

export default function InstantSearchComponent() {

  return (
    // @ts-ignore
    <InstantSearch indexName="steam-videogames" searchClient={searchClient}>
      {/* @ts-ignore */}
      <SearchBox />
      {/* @ts-ignore */}
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({
  hit,
}: {
  hit: {
    id: string;
    image: string;
    name: string;
    description: string;
  };
}) {
  return (
    <article key={hit.id}>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.description}</p>
    </article>
  );
}

- I could do this... but I prefer avoiding sensitive keys on client if possible. - I can create the searchClient props on the server, but I can't pass it to a client component. - I can't use the InstantSearch component server-side. How am I supposed to handle this type of Third-party problems where I have to create things client-side that depends upon sensitive keys?

10 Replies

Neto•3mo ago

with a lot of hope and not the master key

Neto•3mo ago

from drizzle docs, the algolia search is using a client side key

lelabo•3mo ago

Still, isn't leaking client side key bad practice ? That could still be used to impersonate my access to a service...

Neto•3mo ago

is it leaking? no it's designed that way it's the risk of using a external source for that other option is to proxy the request internally and securing it yourself, but you can't use the client thingy in theory, with instant-meilisearch you can proxy it

const { searchClient, setMeiliSearchParams } = instantMeiliSearch(
  '/api/my-meili-search', // Host
  'NOTHING_TO_SEE' // API key
)

const { searchClient, setMeiliSearchParams } = instantMeiliSearch(
  '/api/my-meili-search', // Host
  'NOTHING_TO_SEE' // API key
)

and on /api/my-meili-search you make the safe request and handle the api thing you just pay one more request per search

lelabo•3mo ago

I just read that most of the time, you also need to actually control from where comes the request when using client side key. The only bad design is to use them without ensuring who is actually using them. But in environment when I don't control the components and the host (non-self-hosted content for example), I will have to make sure that this is handled correctly or find another solution.

Neto•3mo ago

i mean in a perfect case, you would always use serverside and never show anything but something you don't have a server and can only offer some kind of authentication for the data source via public key sucks but it is what it is

lelabo•3mo ago

I understand, I already had the sentiment it was the only way to do it... But I did not understand why it wasn't as important with client side key.

Neto•3mo ago

most of them offer a read only kind of access with meilisearch you have three keys

Neto•3mo ago

https://www.meilisearch.com/docs/learn/security/basic_security#master-key-and-api-keys

Securing your project — Meilisearch documentation

Neto•3mo ago

stripe you have two kind of keys, a private one to manage the products and more a public one for the client to start orders and checkout stuff

Gaming

Programming

Handling Third-party lib client component that relies on ENV vars.