React Setup
Learn how to create a React app and initialize it with the Okto SDK, including setting up authentication and executing your first token transfer.
Quick Start Template Available!
Skip the manual setup and get started in minutes with our template repository. It includes pre-configured Okto SDK integration, authentication setup, and example components and operations.
Before you begin, set up your developer dashboard by making sure you have :
- Created your Okto Developer Dashboard account
- Get your Okto credits from the dashboard
- Obtained your API keys from the dashboard
- Enabled the specific Chains and Tokens you plan to use in your application
- Optional: Enabled Sponsorship for the desired chains
If you need help, reach out to us on our troubleshooting form and we will contact you.
Prerequisites
Before getting started, ensure you have the following:
- Node.js (v18+) and npm/pnpm/yarn: Download Node.js
- Okto API Keys: You need your
VITE_CLIENT_PRIVATE_KEY
andVITE_PUBLIC_CLIENT_SWA
. Obtain these from the Okto Developer Dashboard. - Google OAuth Credentials: Create OAuth 2.0 credentials in the Google Cloud Console to get your
VITE_GOOGLE_CLIENT_ID
.
- Go to Google Cloud Console.
- Create OAuth 2.0 credentials for your project.
- Set the redirect URI to:
[YOUR_APP_URL]/api/auth/callback/google
(for example,http://localhost:3000/api/auth/callback/google
during local development). - Save your Client ID.
Need detailed instructions? Check our Google Console Setup Guide.
1. Initialize a Vite React App
If you already have a React app, you can skip this step and proceed directly to Step 2 to start integrating Okto.
To create a new React app, run the following commands in your terminal:
Resolving Vite Buffer Error
To resolve a buffer not defined error with Vite, update your vite.config.ts
file with the following configuration:
Don't forget to install the required package:
3. Configure Environment Variables
Create a .env
file in your project root:
Replace the placeholders with your actual credentials.
- Replace all placeholder values (
YOUR_...
) with your actual keys. - Never commit your
.env
file to version control. Add it to your.gitignore
.
- Go to Google Cloud Console.
- Create OAuth 2.0 credentials for your project.
- Set the redirect URI to:
[YOUR_APP_URL]/auth/google
(for example,http://localhost:3000/auth/google
during local development). - Save your Client ID and Client Secret.
Need detailed instructions? Check our Google Console Setup Guide.
6. Implement Authentication
Currently, you can onboard users and support on-chain interaction via the Okto Embedded wallet. To do this you must first authenticate your user via social login. We currently support Google OAuth.
The user's embedded wallet is automatically created or retrieved once the session is created and can be accessed via TypeScript and React.
7. Get User Details and Portfolio
Create a UserDashboard component to display user information:
9. Congratulations!
🎉 Your basic Okto integration is now complete! You're ready to bring your dApp to life. Let's try out a simple user operation!
Trying Out a User Operation
Now that we have our basic setup complete, let's implement a token transfer on Polygon Amoy Testnet to understand how user operations work in Okto.
2. Fund Your Wallet
To perform a token transfer, you'll need some funds in your wallet. Add funds to this address using the Polygon Amoy Faucet.
3. Check Network Information
Before creating the user operation, check the Network Information Guide for getting the correct CAIP-2 IDs of chains.
5. Verify The Transfer
After the transfer is complete, you can verify it through:
- The
getPortfolio
method to check your updated balance - The Polygon Explorer using the transaction hash which can be fetched using the
getOrdersHistory
method using thejobId
.
Now that you've completed your first user operation, you're ready to explore more advanced features! Check out our Usage Guide to learn about other operations like NFT transfers, contract interactions, and more.
For more examples and advanced usage, check out the Template Repo.
SDK Reference
Get Commands
Command | Description | Documentation |
---|---|---|
const account = await getAccount(oktoClient); | Get user's wallet details | Method Overview |
const chains = await getChains(oktoClient); | List supported blockchain networks | Method Overview |
const tokens = await getTokens(oktoClient); | List supported tokens | Method Overview |
const portfolio = await getPortfolio(oktoClient); | Get user's token holdings | Method Overview |
const nfts = await getPortfolioNFT(oktoClient); | Get user's NFT holdings | Method Overview |
const activity = await getPortfolioActivity(oktoClient); | Get transaction history | Method Overview |
const orders = await getOrdersHistory(oktoClient); | Get transaction order history | Method Overview |
const collections = await getNftCollections(oktoClient); | Get NFT collections | Method Overview |
User Operations (Intents)
Intents are pre-built action templates within the Okto SDK that simplify common Web3 tasks. They provide one-liner functions for complex blockchain interactions.
1. Token Transfer
Send tokens to another address. Learn more
2. NFT Transfer
Transfer NFTs between addresses. Learn more
3. Raw Transaction (EVM)
Execute custom EVM contract calls. Learn more
Quick Start Template Available!
Skip the manual setup and get started in minutes with our template repository. It includes pre-configured Okto SDK integration, authentication setup, and example components and operations.
Additional Resources
Need help? Join our Discord community or email us at [email protected]
.