NextJS Setup
Learn how to create a Next.js app and initialize it with the Okto SDK.
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
NEXT_PUBLIC_CLIENT_PRIVATE_KEY
andNEXT_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
GOOGLE_CLIENT_ID
andGOOGLE_CLIENT_SECRET
. - Auth Secret: NextAuth requires a secret for signing tokens. Generate one by running:
- 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 and Client Secret.
Need detailed instructions? Check our Google Console Setup Guide.
1. Create Your NextJS App
If you already have a NextJS app, you can skip this step and proceed directly to the next step to start integrating Okto.
Let's start by creating a brand new Next.js app! Open your terminal and run these commands:
When prompted during setup, select:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- Use
src/
directory: No - App Router: Yes
- Customize default import alias: No
- Creates a new Next.js project named
my-okto-app
. - Switches you into the project directory.
2. Install Dependencies
Your Next.js app needs the Okto SDK and NextAuth to work. Let's install them! Run the command below for the package manager of your choice:
3. Set up Environment Variables
Create a .env
file in your project root and add the following environment variables:
- Replace all placeholder values (
YOUR_...
) with your actual keys. - Never commit your
.env
file to version control. Add it to your.gitignore
.
4. Set Up the Okto Provider
Create a provider component to initialize the Okto SDK and authentication context. Create a file at app/components/providers.tsx
with the following code:
The AppProvider
wraps your app with:
SessionProvider
for authentication.OktoProvider
to initialize the Okto SDK using your environment settings.
Remember that the "use client"
directive is required for client-side components.
5. Configure Google Authentication
Set up NextAuth using Google as the provider. Create the file at app/api/auth/[...nextauth]/route.ts
:
Create these folders in your app directory: app/ └── api/ └── auth/ └── [...nextauth]/ └── route.ts
This configuration:
- Sets up NextAuth to use Google for authentication.
- Utilizes JWT for session management.
- Seeds the session with Google's
id_token
, which is later used by the Okto SDK.
6. Set up Root Layout
Update your root layout to include the AppProvider
so that the authentication and Okto context are available throughout your app. Modify app/layout.tsx
as follows:
Using AppProvider
ensures that every page in your application has access to both the session and Okto context.
7. Create a Sample Login Page (page.tsx
)
Let's build a simple page to test out authentication and basic Okto operations. You will create two components—LoginButton
and GetButton
—and update your home page.
a. Create the Login Button Component
This component will trigger Google authentication. Create the file app/components/LoginButton.tsx
:
Using the signIn
method from NextAuth, this button starts the Google authentication flow. No extra configuration is required on the client side.
b. Create the Get Button Component
This component is designed to call a function (such as logging out or fetching account details) and display the result in a modal.
Create the file app/components/GetButton.tsx
:
This component accepts a SDK function as a prop. When clicked, it calls the function with the Okto client, displays the JSON response in a modal, and handles any errors.
c. Update the App Home Page
Integrate both buttons on your home page.
Replace the content of app/page.tsx
with:
After launching the app, use these buttons to:
- Initiate Google authentication.
- Trigger a logout.
- Retrieve your account(list of wallets)details.
8. Run Your dApp
It's time to see your work in action. Inside the my-okto-app
directory, run the appropriate command based on your package manager:
Open your browser and navigate to http://localhost:3000. You should see your "Template App" with buttons to:
- Authenticate using Google.
- Log out.
- Retrieve your account details with the
getAccount
function.
If you encounter any errors when running npm run dev
(or pnpm dev
, yarn dev
), check your terminal for error messages. Common issues include:
- Environment Variable Errors: Double-check that you correctly set up your
.env
file and that all theYOUR_...
placeholders are replaced with your actual keys and secrets. - Package Installation Errors: If you see errors related to missing packages, try re-running the install command (e.g.,
npm install
) to make sure all dependencies are installed correctly.
Trying Out a User Operation
Let's implement a token transfer on Polygon Testnet Amoy to understand how user operations work in Okto.
2. Fund Your Wallet
Before transferring tokens, fund your wallet using the Polygon Amoy Faucet.
3. Review Network Information
Consult the Network Information Guide to ensure you have the correct CAIP-2 chain identifiers.
4. Implement Token Transfer
Create a new component called TokenTransfer.tsx
to handle a token transfer:
5. Add the Component to Your Home Page
Update your app/page.tsx
to include the new TokenTransfer component:
6. Test the Token Transfer
- Run your dApp, open http://localhost:3000, and sign in with Google.
- Then, navigate to the page where your Token Transfer component is displayed and click on the Send 1 POL button.
- A modal will appear showing the transfer status (e.g., "Transfer executed! Result: …").
7. Verify The Transfer
Once complete, verify its success by:
- Checking your updated balance using the
getPortfolio
method - Viewing the transaction details on the Polygon Amoy Explorer
Congratulations! You have successfully integrated the Okto SDK with your Next.js app and executed your first user operation.
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]
.