This is an advanced feature. It is recommended that you reach out to the Privy team if you
are interested in building a custom global wallet experience.
@privy-io/cross-app-provider
library to communicate via the Privy
cross-app protocol. Your app handles the user interfaces, and Privy handles the rest.
The
@privy-io/cross-app-provider
SDK is a vanilla JavaScript library. We recommend using this
library alongside @privy-io/react-auth
for the best development experience.@privy-io/cross-app-provider
SDK and how they
integrate with the React SDK. For a more complete reference implementation, see the
cross-app provider starter repo.
There are two clients in this SDK depending on what style of cross app you are looking to implement. Privy supports both connect and auth mode, where connect allows users to only connect their wallet via a Wagmi connector and auth mode which allows users to login or link with their Privy account.
Connect mode uses the Mobile Wallet Protocol to connect the wallet, and auth mode uses the OAuth2 protocol to securely authenticate the user across apps.
1
Set up a cross-app provider client
2
Build the connect experience
Allow user’s to accept (or reject) a cross-app connection request by using the
Then, use
client
to handle parsing input and responging to the requesting app.First, use the client.getConnectionRequestFromUrlParams
method when the page loads
to read the request into your app.The connection request
The connection request
A connection request object contains:
- the
requesterPublickey
, used to generate the shared secret for encrypted communication - the
callbackUrl
, used to identify the requester and as thetargetOrigin
in calls towindow.postMessage
client.acceptConnection
and client.rejectConnection
to allow your
users to explicitly approve or deny the connection request respectively via clicking
a button like so:3
Build the request experience
This page allows you to control the experience of a global wallet request.First read the request using Once you have the result of handling this request you can return the response to the
requester using Similarly, if the user rejects the request use If there are other errors (e.g. not enough funds for a transaction) use the
client.getVerifiedWalletRequest
to decrypt, parse and
verify the input. This method will also return the connection
object used to
communicate a result back to the requester.client.handleRequestResult
, for example responding to a signature request:client.rejectRequest
to send an
error message to the requester:client.handleError
method to pass the error back to the requester:4
Upgrade your clients
Ensure client apps are using the latest version of
@privy-io/cross-app-connect
5
Set up your custom URLs in the Privy Dashboard
Prior to enabling the custom URLs in your dashboard, ensure that your integration is ready to
receive production traffic, including setting a strong
CSP and adding your custom URLs as
allowed domains for your Privy app.
Custom URLs
,
input the URL(s) where your pages are hosted, and save your changes.