How to integrate Smart Sessions with React
Learn how to use Reown AppKit with Smart Sessions to grant permission to delegate actions for a specific period of time.
Prerequisites
- A fundamental understanding of JavaScript and React.
- A minimal installation of AppKit in React.
- A new project Id obtained from Reown Cloud at https://cloud.reown.com
- A wallet with the private key in order to sign Transactions
Final Project
Below is the complete working example that demonstrates how Smart Sessions work with AppKit.
Appkit Example with Smart Session
Clone this Github repository and follow the readme to try it out locally.
AppKit Minimal Installation
You can start a small project following the guidelines from our installation React docs
Explain the functionality
In this guide, we’re going to build the front end of a dApp and a server to sign transactions on behalf of the user.
Front-end
- The user will connect to AppKit’s smart wallet using their email, and then grant permission to the server-linked wallet to execute actions on their behalf.
- Refer to the configuration file found in
src/config/configSmartSession.ts
.
API Server
The API server can have two endpoints:
-
getPublicKey: Returns the publicKey for the keypair that is going to execute the different function in from the server. In order to achieve this, a private key needs to be added to the .env file.
-
executeFunction: Triggers the function and checking the execution.
- Refer to the server configuration file found in
config/index.ts
-
Frontend calls the endpoint
getPublicKey
. -
The
requestPermission
modal appears for the user to approve using their wallet. -
In this example, the action is executed by calling the server API (though there are several ways to perform this action).
-
prepareCalls
makes an RPC call to the Blockchain API. -
The server signs the hash with the private key.
-
sendPrepareCalls
makes an RPC call to the Blockchain API.
In order to simplify the code, it is recommended that you use the util file from the server; which can be found here - util/prepareCalls.js
. All the RPC calls are performed to https://rpc.walletconnect.org/v1/wallet?projectId=<PROJECT-ID>
.
Start building
Part 1 | Grant Permission
The user will approve a grantPermissions
request, to allow an explicit address to execute specific calls.
- Start by installing the library that contains the smart session feature in early access:
- We import the grantPermissions function from the package
-
Complete the correct configuration for the file
src/config/configSmartSession.ts
. -
Call the getPublicKey API endpoint to retrieve the public key.
- Decide which permission to allow the server to do for the user:
- Call the
generateRequest
function and use its information to invoke grantPermission, prompting the user for wallet approval of the action.
-
The user must log in with their email in a special way. If the email is
test@gmail.com
. Change it totest+smart+session@gmail.com
to enable smart session support. -
After approving the grant permission, the server can interact in their behalf.
Part 2 | Execute the action
- The server makes the call
wallet_prepareCalls
.
- The Result of the call should be signed with the private key.
- Then we send the
wallet_sendPreparedCalls
with that signature.
- The server can make several calls to
wallet_getCallsStatus
to check when it’s confirmed.
Common Known Issues
-
“The method
wallet_grantPermissions
does not exist / is not available.’- Please double check that your are using the right email adding +smart-sessions to end. Example: test@gmail.com -> test+smart-sessions@gmail.com
-
Don’t forget to add funds to the smart wallet.
-
Ethereum Sepolia isn’t currently working with Smart Sessions. Use Base Sepolia instead for now.