React
If you want to add Pinata to a React project that is client side only you can do so, however it must be stated that using your Pinata API keys in a client side app means they will be exposed! This approach is not secure and it is recommneded to either scope the API keys to certain permissions or use signed JWTs from a server.
It is still highly recommend using the Next.js Quickstart as it is much more secure with server side API routes and works similar to React.
Using Pinata API keys in a React app will expose them, proceed with caution!
Installation
Create an API Key and get Gateway URL
To create an API key, visit the Keys Page and click the “New Key” button in the top right. Once you do that you can select if you want your key to be admin or if you want to scope the privileges of the keys to certain endpoints or limit the number of uses. Make those selections, then give the key a name at the bottom, and click create key.
We highly encourage scoping keys if you are planning to expose them in a client side environment
Once you have created the keys, you will be shown your API Key Info. This will contain your Api Key, API Secret, and your JWT. Click “Copy All” and save them somewhere safe!
The API keys are only shown once, so be sure to copy them somewhere safe!
After you have your API key, you will want to get your Gateway domain. When you create a Pinata account, you’ll automatically have a Gateway created for you! To see it, simply visit the Gateways Page see it listed there.
The gateway domains are randomly generated and might look something like this: