Interacting with Particle Auth within web applications using either JavaScript or TypeScript.
@particle-network/authkit
) is the most widely used. Thus, it offers extensive support and flexibility in driving onboarding through social logins, facilitating interaction with Particle’s Wallet-as-a-Service.
The Particle Auth SDK is the primary mechanism for configuring and using social logins. Whether you’re starting from scratch or already have an onboarding or authentication flow set up within your application, the Particle Auth Core Web SDK is a simple yet powerful integration.
@particle-network/authkit
to your project using either of the two following mechanisms:
projectId
, clientKey
, and appId
within this configuration object to authenticate your Particle Auth instance properly. Additionally, you can apply customizations to the wallet modal for a tailored user experience.
index.tsx
file from a create-react-app
project. In this example, the AuthCoreContextProvider
component acts as the configuration wrapper for the entire application.
"use client"
directive
at the beginning of the file.AuthCoreContextProvider
or ParticleNetwork
.
connect
and connected
functions from the useConnect()
hook to handle the connection logic:
handleLogin
function initiates the login process by displaying the login modal if the connected
status is false
, indicating that the user is not currently logged in.
connect()
function to further tailor the login experience beyond frontend customizations.
The following example showcases all available configuration options:
web3.eth.getAccounts
will also initiate login automatically if a user isn’t already logged in.@particle-network/auth-core
is already included as a dependency in @particle-network/authkit
, so you don’t need to install it separately.getConnectCaptcha()
function from @particle-network/auth-core
to send an OTP to the user’s email.
connect()
function, including OTP and email within loginParams
, to verify it and complete the login.
useConnect()
hook provides several functions to check the user’s connection status:
connected
— Returns a boolean value indicating whether the user is logged in (true
) or not (false
). This is useful for managing login logic.
connectionStatus
— Returns a string representing the current stage of the user’s flow:
loading
connecting
connected
disconnected
connectionStatus
to manage login logic or to display relevant status information in the UI.
userInfo
object from the useAuthCore()
hook becomes available.
connect()
will return the same object.name
and avatar
, or access security details such as has_set_master_password
.
This allows you to implement logic that prompts the user to set a master password if they haven’t already done so, thereby improving security.
Available Fields in `userInfo`
userInfo
:
userInfo
, you can use the following method:
To the end-user, sending transactions, regardless of the chosen method, looks like this (depending on customization outlined in the Particle dashboard).
eth_signTypedData
), the process is quite straightforward.
You can accomplish this using standard libraries like Ethers or leveraging Particle’s native functionality. The examples below illustrate both approaches.
For instance, when sending transactions, the signatures are automatically formatted and presented to the user in a popup request. This ensures a user-friendly experience by displaying the relevant data in UTF-8 format.
AuthCoreContextProvider
component and setting up the authentication flow.
promptPaymentPasswordSettingWhenSign
parameter to false
within AuthCoreContextProvider
.useConnect
acts as the primary hook for facilitating login (connection) with Particle Auth.
useEthereum
provides direct interaction with a given EVM chain as an alternative to a traditional library such as ethers.
useSolana
is one of the primary ways to use Solana with Particle Auth if you aren’t using an external connection modal such as wallet-adapter
.
useAuthCore
provides additional functionality, such as retrieving userInfo
after login, forcing different account menus to open, accessing the on-ramp page, and more.
useCustomize
provides several methods for customizing the wallet modal, such as changing the theme type (light or dark), creating a custom style, changing the language, and more.
wallet-adapter
or would like to have a standalone social login button within your application, Particle Auth can be used.