Connect With Auth Core


Live Demo:


It is strongly discouraged to use private key or mnemonic import/generate function, if you use it, you need to secure the data yourself, Particle's SDK has no relationship with the imported/generated mnemonic or private key.

Quick Start

Step 1: Install Connect SDK.

# react connect kit
yarn add @particle-network/connectkit

Step 2: Init Connect SDK.

import { ModalProvider } from '@particle-network/connectkit';
import { Ethereum, EthereumGoerli } from '@particle-network/chains';
import { evmWallets } from '@particle-network/connectors';

// use react kit
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
                projectId: 'replace with your projectId',
                clientKey: 'replace with your clientKey',
                appId: 'replace with your appId',
                chains: [
                wallet: {    //optional: particle wallet config
                    visible: true, //display wallet button when connect particle success.
                    customStyle: {}, //optional: custom wallet style
                promptSettingConfig: { //optional: particle security account config
                    //prompt set payment password. 0: None, 1: Once(default), 2: Always
                    promptPaymentPasswordSettingWhenSign: 1,
                    //prompt set master password. 0: None(default), 1: Once, 2: Always
                    promptMasterPasswordSettingWhenLogin: 1
                connectors: evmWallets({ 
                    projectId: 'walletconnect projectId', //replace with walletconnect projectId
                    showQrModal: false
            language={'en'}   //optional๏ผšlocalize, default en
            walletSort={['Particle Auth', 'Wallet']} //optional๏ผšwalelt order
            <App />

Step3: Add the connect button

Then, in your app, import and render the ConnectButton component.

import '@particle-network/connectkit/dist/index.css';
import { ConnectButton } from '@particle-network/connectkit';

export const App = () => {
  return <ConnectButton />;

// if you want to custom connet button, you can use ConnectButton.Custom.
export const App = () => {
  return (
            {({ account, chain, openAccountModal, openConnectModal, openChainModal, accountLoading }) => {
                return (
                        <button onClick={openConnectModal} disabled={!!account}>
                            Open Connect
                        <br />
                        <br />
                        <button onClick={openAccountModal} disabled={!account}>
                            Open Account
                        <br />
                        <br />
                        <button onClick={openChainModal} disabled={!account}>
                            Open Switch Network

Have a problem? you can refer to this FAQ.

Check User Is Connected

If user connect wallet success, automatic connect next time.

import { useAccount } from '@particle-network/connectkit';

//use this in react component.
const account = useAccount();
if (account) {
    // connect wallet success

Custom Wallet Style

When "visible" true, you can custom wallet style by set "customStyle" config, refer to Custom Wallet Style

Get User Info

If you connect with Particle Network, you can get user info by below interface.

import { useAuthCore } from '@particle-network/auth-core-modal';
import { getUserInfo } from '@particle-network/auth-core';

//use this in react component.
const { useInfo } = useAuthCore();

const userInfo = getUserInfo();

Connect React Hooks


Get provider when wallet connect, you can set the provider to web3.js or ethers.js.


Get wallet address when wallet connect.


Get connect() and disconnect() function for action.


Get ParticleConnect instance do custom action.


openConnectModal without ConnectButton.


Get connected id.


Check if you can switch chain, and get chains.


Get current language and set language.


Get registered wallet metadata.

Auth Core

If you connect wallet with auth core (email/phone/google/apple... etc.), you can also use Auth Core Modal Hooks.

Last updated