Methods & Objects

Now that you have the basic flow set up, you can leverage some of Dynamic's built-in methods.

useDynamicContext

Dynamic's React Context which is set via AuthContextProvider

Method	Description
handleLogOut: () => void	A helper-method to logout the user.
setShowAuthFlow: Dispatch<SetStateAction>	It controls whether or not display the DynamicAuthFlow SDK component.
showAuthFlow: boolean	It returns true/false value based on ShowAuthFlow hook.
walletConnector: WalletConnector \| null	A WalletConnector instance. See WalletConnector table below
user: UserInfoPayload \| undefined	A UserInfoPayload, if the user is authenticated. See UserInfoPayload table below
authToken: string \| undefined	JSON web token (JWT) stored if the user is authenticated. This is the user's auth-token. See: backend verification.

WalletConnector

This is Dynamic's abstraction over the wallet interface. This can be used to interact with the users wallet.

Field	Description
`fetchPublicAddress(): Promise<string \| undefined>`	A method to fetch the public address (alternatively the address could be fetched from useDynamicContext's user object)
`getWeb3Provider(): ethers.providers.Web3Provider \| Connection \| undefined`	The provider should be used for read only actions on the block chain. Ethereum - A Web3Provider SOLANA -solana/web3js.Connection
`getSigner() : Promise<ethers.providers.JsonRpcSigner\| Solana Wallet)`	Representation of the signer (the wallet) for actions that require signatures with the private key. Ethereum - JsonRpcSigner Solana - The active wallet
`name: string`	The wallet name
`signMessage(messageToSign: string): Promise<string \| undefined>`	A method to sign a message
`supportedChains: Chain[]`	The chains that the wallet supports

UserInfoPayload

An object containing attributes about the user such as the wallet address, email, first name, etc.

Field	Description
`userId: string`	Dynamic's UUID
`environmentId: string`	Dynamic's environment ID
`walletPublicKey: string`	User' wallet public key
`chain: string`	User's BlockChain name
`wallet: string`	User's Wallet name
`email?: string`	[Optional] - User's email
`alias?: string`	[Optional] - User's alias
`firstName?: string`	[Optional] - User's first name
`lastName?: string`	[Optional] - User's last name
`phoneNumber? string`	[Optional] - User's phone number
`ens? : { name?: string, avatar?: string }`	[Optional] - The wallet's ENS values

Example

Here's an example of using the walletConnector.getWeb3Provider method to get the balance of the user's wallet

import { useEffect, useState } from 'react';

import { BigNumber } from 'ethers';

import {
  useDynamicContext,
  DynamicAuthFlow,
  DynamicContextProvider,
} from '@dynamic-labs/sdk-react';

const Home = () => {
  const { user, handleLogOut, setShowAuthFlow, showAuthFlow, walletConnector } =
    useDynamicContext();

  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (user && walletConnector) {
      const provider = walletConnector.getWeb3Provider();
      provider.getBalance(user.walletPublicKey).then((balance) => {
        setBalance(balance.toString());
      });
    }
  }, [user, walletConnector]);

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</p>
        <p>Balance: {balance}</p>
        <button type='button' onClick={handleLogOut}>
          Log Out
        </button>
      </div>
    );
  }

  return (
    <div>
      <button type='button' onClick={() => setShowAuthFlow(true)}>
        Connect With My Wallet
      </button>
      {showAuthFlow && (
        <DynamicAuthFlow
          onAuthSuccess={({ authToken, user }) => {
            console.log(
              `Welcome ${user.walletPublicKey} your token is ${authToken}`,
            );
            window.location.assign('/success');
          }}
        />
      )}
    </div>
  );
};

const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;

import { useEffect, useState } from 'react';

import { BigNumber } from 'ethers';

import {
  useAuthContext,
  DynamicAuthFlow,
  AuthContextProvider,
  UserInfoPayload,
} from '@dynamic-labs/sdk-react';

const Home = () => {
  const { user, handleLogOut, setShowAuthFlow, showAuthFlow, walletConnector } =
    useAuthContext();

  const [balance, setBalance] = useState<string | null>(null);

  useEffect(() => {
    if (user && walletConnector) {
      const provider = walletConnector.getWeb3Provider();
      provider.getBalance(user.walletPublicKey).then((balance) => {
        setBalance(balance.toString());
      });
    }
  }, [user, walletConnector]);

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</p>
        <p>Balance: {balance}</p>
        <button type='button' onClick={handleLogOut}>
          Log Out
        </button>
      </div>
    );
  }

  return (
    <div>
      <button type='button' onClick={() => setShowAuthFlow(true)}>
        Connect With My Wallet
      </button>
      {showAuthFlow && (
        <DynamicAuthFlow
          onAuthSuccess={({
            authToken,
            user,
          }: {
            authToken: string;
            user: UserInfoPayload;
          }) => {
            console.log(
              `Welcome ${user.walletPublicKey} your token is ${authToken}`,
            );
            window.location.assign('/success');
          }}
        />
      )}
    </div>
  );
};

const App = () => (
  <AuthContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
    }}
  >
    <Home />
  </AuthContextProvider>
);

export default App;