How to set up Abstraxn Smart Wallets using the Abstraxn Dashboard.

​
Get Your API Key

To use Abstraxn Smart Wallets, you need to obtain an API key from the Abstraxn Dashboard.
Why create an App first?An App in the Abstraxn Dashboard represents your application or project. It acts as a container that organizes all your services, including Wallet Services, Paymasters, Bundlers, and more.Think of it this way:
  • App = Your project/application (e.g., “My DApp”, “NFT Marketplace”)
  • Wallet Service = A specific wallet service configuration within that app
You need to create an App first because Wallet Services are associated with a specific App. This allows you to:
  • Organize multiple services under one project
  • Manage different configurations for different apps
  • Track usage and analytics per application
Once you create an App, you can then add a Wallet Service to it, which will provide you with the API Key needed for your React application.
  1. Visit https://dashboard.abstraxn.com/ and log in or sign up
  2. Navigate to the Apps section:
First-time users: If you’re visiting for the first time and haven’t created any apps yet, you’ll see an empty table with a Create New App button at the top. This is normal - proceed to step 3 to create your first app.
If you already have apps, you’ll see a list of your existing apps and a Create New App button at the top. Apps page with Create New App button
  1. Click the Create New App button to open the creation modal Create New App modal form Fill in the form:
    • Chain: Select the blockchain (e.g., Ethereum, Polygon, etc.)
    • Network: Select the network (Mainnet, Testnet, etc.)
    • Name: Enter a name for your app
    • Description: (Optional) Add a description
    • Click Create App
  2. After creating your app, navigate to Wallets section: Wallets page with Add Wallets button
  3. Click Add Wallets button to create a new wallet service Create New Wallet modal form Fill in the form:
    • Wallet Name: Enter a name for your wallet service
    • App: Select the app you created earlier
    • Click Create Wallet
  4. After creating the wallet, click View Details on your wallet from the wallets list
  5. On the wallet details page, you’ll see your API Key displayed. Click the copy button to copy it. Wallet details page showing API Key The wallet details page URL format is: https://dashboard.abstraxn.com/auth/wallets/{walletId}
Warning: Keep your API key secure by storing it in environment variables. Never expose it in public client-side code or commit it to version control.

​
Configure Environment Variables

Create a .env file at the root of your project and add your API key.

​
For Vite Projects

Create a .env file in your project root: 
VITE_ABSTRAXN_API_KEY=your_api_key_here
The VITE_ prefix is required for Vite to expose the variable to your client-side code. Access it in your code using: 
import.meta.env.VITE_ABSTRAXN_API_KEY;

​
For Next.js Projects

Create a .env.local file in your project root: 
NEXT_PUBLIC_ABSTRAXN_API_KEY=your_api_key_here
The NEXT_PUBLIC_ prefix is required for Next.js to expose the variable to the browser. Access it in your code using: 
process.env.NEXT_PUBLIC_ABSTRAXN_API_KEY;
Note: For Next.js, you can also use .env for server-side only variables, but use .env.local for variables that should be available in the browser. The .env.local file is automatically ignored by git.

​
Additional Configuration (Optional)

​
Wallet Service Configuration

To enable specific login methods and customize your wallet service:
  1. Navigate to Wallets → Configuration in the dashboard
  2. Configure your preferred authentication methods (OTP, Passkey, Google, Discord, Twitter, etc.)
  3. Customize wallet settings as needed