Auth Core is a library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable.
Introduction
Auth Core can be integrated with any wallet, platform, chain and social login. You can even plug in your existing auth setup.
Wallet management
Auth Core will automatically create a crypto wallet without a private key. The security is guaranteed by MPC (Multi-Party Computing) - based threshold signatures, which is ahead of other technologies.
Customizable
You can tweak the Auth Core to match your branding. You can pick from a few pre-defined accent colors and border-radius configurations. For more advanced use cases, you can provide in a fully custom theme, render your own button, and omit certain features. Dark mode included.
Industry standards
For better interoperability with most products, we support use with web3.js, ethers.js, and viem — the most commonly used libraries in the space.
Installation
Get up and running with Auth Core.
Quick start
You can scaffold a new AuthCore + React app with one of the following commands, using your package manager of choice:
This will prompt you for a project name, generate a new directory containing a boilerplate project, and install all required dependencies.
Alternatively, you can manually integrate Auth Core into your existing project.
Manual setup
yarnadd@particle-network/auth-core-modal
Additional build tooling setup
The Webpack v5 bundler used by Create React App no longer provides Node polyfills, so you'll need to include these modules yourself to satisfy AuthCore's peer dependencies. add the below code to webpack config.
Auth Core Modal will display smart account address and badge when set erc4337 param, you can use smart account send gasless transaction, refer to Account Abstraction.
Embedded Wallet
A fully functional wallet will be embedded in your web page when you set param wallet, and you can custom Wallet UI style to match your branding.
Now, you can use Auth Core in your app.
Usage
Auth Core is implemented based on React, provides a rich set of hook functions and custom components.
Connect Wallet
Custom you own connect button and call connect function to connect Auth Core.
import { useConnect } from'@particle-network/auth-core-modal';const { connect,disconnect,connectionStatus,requestConnectCaptcha } =useConnect();// open modal and connect constuserInfo=awaitconnect();// connect with email.constuserInfo=awaitconnect({ email:'xxx@xx.com', code:'xxxxxx',// optional});// connect with phone.constuserInfo=awaitconnect({ phone:'+1xxxxxxxx',//E.164 format code:'xxxxxx',// optional});// connect with social type.constuserInfo=awaitconnect({ socialType:'google', prompt:'select_account',//optional, only google, discord and microsoft support it.});// connect with JWT.constuserInfo=awaitconnect({ jwt:'xxxxxxxxxx'});
For using a email/phone connect wallet, you can custom UI and get code by requestConnectCaptcha.
For using social connect wallet, you can specify the prompt param. prompt is A space-delimited list of string values that specifies whether the authorization server prompts the user for reauthentication and consent. The possible values are:
none
The authorization server does not display any authentication or user consent screens; it will return an error if the user is not already authenticated and has not pre-configured consent for the requested scopes. You can use none to check for existing authentication and/or consent.
consent
The authorization server prompts the user for consent before returning information to the client.
select_account
The authorization server prompts the user to select a user account. This allows a user who has multiple accounts at the authorization server to select amongst the multiple accounts that they may have current sessions for.
If no value is specified and the user has not previously authorized access, then the user is shown a consent screen.
Connect with specified chain
import { BNBChain } from'@particle-network/chains';// connect with social type.constuserInfo=awaitconnect({ socialType:'google', prompt:'select_account',//optional chain: BNBChain,});
Connect and authorize
When connect Auth Core, Sign-In with Ethereum(EVM) or signMessage(Solana) will auto run.
import { BNBChain } from'@particle-network/chains';// connect with social type.constuserInfo=awaitconnect({ socialType:'google', prompt:'select_account',//optional chain: BNBChain, authorization: { uniq:true,// uniq sign message:'base58 string',// solana need it, evm will ignore it }});// get authorize signatureconstsignature=userInfo.signature;
Disconnect
The user wallet local information will be deleted.
import { useConnect } from'@particle-network/auth-core-modal';const {connect,// connect auth core methoddisconnect,// disconnect auth core methodconnectionStatus,// connection status: 'loading' | 'connecting' | 'connected' | 'disconnected'connected,// whether connected, true or falserequestConnectCaptcha,// request email or phone captcha methodsetSocialConnectCallback,// set social connect callback, need to set up early} =useConnect();
useAuthCore
Get user info and manage modal.
import { useAuthCore } from'@particle-network/auth-core-modal';const {userInfo,// user info, null is returned if not connected needRestoreWallet, // whether need restore wallet, if user has set master password and not input it, will return true
openAccountAndSecurity,// open account and security modalopenSetMasterPassword,// open set master password modalopenChangeMasterPassword,// open change master password modalopenRestoreByMasterPassword,// open input master password modalopenSetPaymentPassword,// open set payment password modalopenChangePaymentPassword,// open change payment password modalopenSetSecurityAccount,// open set security account modalopenLinkLoginAccount,// open link login account modalopenWallet,// open wallet in iframebuildWalletUrl,// get wallet url, used for open in custom iframeopenBuy,// open buy crypto token website} =useAuthCore();
useCustomize
Set the styles of auth modal and wallet modal dynamically.
import { useCustomize } from'@particle-network/auth-core-modal';const { setThemeType,// set theme type, 'light' or 'dark'setCustomStyle,// set auth modal stylessetWalletOptions,// set wallet modal optionssetLanguage,// set languagesetFiatCoin,// set fiat coinsetERC4337// set whether support ERC-4337} =useCustomize();