Blockchain authentication for React apps
npm install @ceramicstudio/multiauthOnly Ethereum is currently supported
Multiauth uses Web3React for Ethereum, and re-exports the following connectors so they can be imported directly from @ceramicstudio/multiauth:
FortmaticConnectorInjectedConnectorPortisConnectorTorusConnectorWalletConnectConnector
Connectors can be setup manually as followed:
import { InjectedConnector } from '@ceramicstudio/multiauth'
const connectors = [
{ key: 'injected', connector: new InjectedConnector({ supportedChainIds: [1, 3] }) },
]Connectors can also be created based on environment variables:
import { getEnvEthereumConnectors } from '@ceramicstudio/multiauth'
const fromEnv = getEnvEthereumConnectors('PREFIX') // Prefix defaults to 'MULTIAUTH'
const connectors = [fromEnv.injected, fromEnv.walletConnect].filter(Boolean) // Filter out `null` valuesUsing the following environment variables (with the given prefix instead of MULTIAUTH):
fortmatic(FortmaticConnector):MULTIAUTH_FORTMATIC_API_KEYMULTIAUTH_FORTMATIC_CHAIN_ID: chain ID, ex3
injected(InjectedConnector):MULTIAUTH_INJECTED_CHAIN_IDS: comma-separared chain IDs, ex1,3
portis(PortisConnector):MULTIAUTH_PORTIS_DAPP_IDMULTIAUTH_PORTIS_NETWORKS: comma-separared networks, ex1,3
torus(TorusConnector):MULTIAUTH_TORUS_CHAIN_ID: chain ID, ex3
walletConnect(WalletConnectConnector):MULTIAUTH_WALLETCONNECT_CHAIN_ID: chain ID, ex3MULTIAUTH_WALLETCONNECT_RPC_URL: JSON-RPC URL to connect to network
import { Provider } from '@ceramicstudio/multiauth'
const connectors = ... // From previous step
export function App(props) {
return <Provider providers={[{ key: 'ethereum', connectors }]}>{props.children}</Provider>
}import { useMultiAuth } from '@ceramicstudio/multiauth'
function HelloMultiAuth() {
const [state, connect, disconnect] = useMultiAuth()
switch (state.status) {
case 'connected':
return <p>Connected with account: {state.connected.accountID.toString()}</p>
case 'connecting':
return <p>Connecting...</p>
case 'disconnected':
return <p>Disconnected</p>
case 'failed':
return <p>Failed to connect: {state.error?.message}</p>
}
}GPL 3.0 or later