All Categories
General thirdweb Issues
How to secure your API Keys

How to secure your API Keys

In this guide, we will discuss how to protect your API Keys in production applications.

 
💡
We will use thirdweb SDK v5 in guide and vercel as hosting
 
  1. Setup your ThirdwebProvider
      2. import { ThirdwebProvider } from "thirdweb/react";
 
function AppWithProvider() {
  return (
    <ThirdwebProvider>
      <App />
    </ThirdwebProvider>
  );
}
  1. Setup your ConnectButton with clientId
      2. 💡
      If you don’t have a thirdweb clientId, you can use the following guide to create one via the thirdweb dashboard 
      import { defineChain, createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  clientId: process.env.THIRDWEB_CLIENT_ID,
});

<ConnectButton client={client} />
  1. Set Environment Variables

      2. Head over to your vercel project’s dashboard, under project settings > Environment Variables, we will use THIRDWEB_CLIENT_ID as the key & our thirdweb clientId as the value

      Notion image
  1. The next step is to follow this guide and set up proper access restrictions for our clientId. We will use the domain Id restriction to only allow the clientId to be used on our website.
    1. Domain IDs: A domain ID is used to restrict access to the enabled thirdweb infrastructure services based on a specific domain. It serves as an identifier for websites.
    2. Bundle IDs: A bundle ID is a unique identifier used to restrict the Client ID to your Unity native or mobile application.
      3.  
 

That’s it! It is that simple and easy to secure your keys for your react/next applications

 

Can’t get this working? If you’ve followed the above and still have issues, contact our support team for help.

Did this answer your question?
😞
😐
🤩
How to upload a single NFT via thirdweb explorer? How to transfer native tokens