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

MethodDescription
handleLogOut: () => voidA helper-method to logout the user.
setShowAuthFlow: Dispatch<SetStateAction>It controls whether or not display the DynamicAuthFlow SDK component.
showAuthFlow: booleanIt returns true/false value based on ShowAuthFlow hook.
walletConnector: WalletConnector | nullA WalletConnector instance. See WalletConnector table below
user: UserInfoPayload | undefinedA UserInfoPayload, if the user is authenticated. See UserInfoPayload table below
authToken: string | undefinedJSON 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.

FieldDescription
userId: stringDynamic's UUID
environmentId: stringDynamic's environment ID
walletPublicKey: stringUser' wallet public key
chain: stringUser's BlockChain name
wallet: stringUser'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;

Did this page help you?