SignIn

One-click integration allows for a quick connection to Portkey with only basic configuration needed. You can control the display form by adjusting the uiType parameter in the Sign function.

Usage

import { DIDWalletInfo, SignIn, ISignIn } from "@portkey/did-ui-react";
import { useCallback, useState } from "react";

const App: React.FC = () => {
  const ref = useRef<ISignIn>();

  const onFinish = useCallback((didWallet: DIDWalletInfo) => {
    console.log("didWallet:", didWallet);
  }, []);

  return (
    <>
      <button onClick={() => ref.current?.setOpen(true)}>Sign In</button>
      <SignIn
        uiType="Modal"
        onFinish={onFinish}
        onCancel={() => ref.current?.setOpen(false)}
      />
    </>
  );
};

export default App;

API

Property	Description	Type	Default	Version
pin	Default pin. When typeof pin === 'string', the process of setting the pin will be skipped	string | undefined	-	V1.5.3+
keyboard	Is Portkey numeric keyboard used. Only takes effect on mobile devices	boolean	-	V1.5.3+
design	Login UI mode	"SocialDesign" | "CryptoDesign" | "Web2Design"	CryptoDesign
uiType	Is UI displayed as Modal or as a page component	'Modal' | 'Full'	Modal
getContainer	Menu renders the parent node when uiType is Modal	HTMLElement | () => HTMLElement | Selectors | false	document.body
className	Class name of the top level container	string	-
defaultChainId	Default chain ID for login and sing-up	ChainId	'AELF'
defaultLifeCycle	Default lifecycle of the ongoing login process	Partial<TStep1LifeCycle | TStep2SignUpLifeCycle | TStep2SignInLifeCycle | TStep3LifeCycle>	-
isShowScan	Is scan to log in shown	boolean	true
phoneCountry	List of countries that support sending SMS verification codes	IPhoneCountry	-	V2.0.0
extraElement	Customized content	ReactNode	-
extraElementList	Customized content	ReactNode[]	-	V2.0.0
termsOfService	Address of the terms, won't be displayed if not configured. If it is a string, consider it as a link	ReactNode	-
privacyPolicy	Link that directs to the privacy policy	string	-	V2.0.0
validateEmail	Customized rules for email verification	(v:string)=>Promise<any>	-
validatePhone	Customized rules for phone number verification	(v:string)=>Promise<any>	-	V2.0.0
isErrorTip	Is error tip set as default	boolean	true
onError	Callback of error	(error: {errorFields:string, error: any}) => void;	-
onChainIdChange	Triggered when the chain where the user registers address does not match the default chain ID	(chainId?: ChainId) => void;	-
onLifeCycleChange	Triggered when certain cycle changes	(liftCycle: LifeCycleType, nextLifeCycleProps: T): void;	-
onCreatePending	Triggered when the creation/login initiated succeeds	(info: CreatePendingInfo) => void;	-
onFinish	Callback when creation/login is completed	(didWallet: DIDWalletInfo) => void;	-
onCancel	Callback of cancelling when uiType is Modal	() => void;	-
onSignUp	Check if an account has been created using the previous Portkey, and if it needs to proceed with executing the account creation process in the upgraded Portkey. Note: This applies only if you have integrated the SDK up to and including v2.0.0. SDK in higher versions are not affected.	(identifierInfo: { identifier: string; accountType: AccountType; authToken?: string; }) => Promise<SignUpValue>	-	V2.0.0