Quickstart Guide

πŸ“˜

We're in closed beta

If you don't have access, you can request it using our closed beta submission form: Sign up to our closed beta

Dynamic can be configured in less than a minute, and we find examples are often the easiest way to explain how it works. Lets explore how to set up Dynamic's React SDK:

Step 1: Create an account

  1. Sign up with your wallet to get an environment ID (you'll need to contact us to add you to our allow list)

  2. Create an organization and a set up your first project

  3. Configure your site's CORS origins (optional)

  4. From the Dynamic Dashboard panel, choose the APIs tab and copy your sandbox's environmentID

Step 2: Install our npm package

You can install Dynamic's SDK with either yarn or npm

We currently support React and NextJS.

Installation with npm

npm install @dynamic-labs/sdk-react

Installation with yarn

yarn add @dynamic-labs/sdk-react

Step 3: Configure the SDK

Copy the following snippet into your project and paste in your environmentID (you may also want to update the appLogoUrl and appName with your actual logo and company name):

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

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

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</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 {
  useDynamicContext,
  DynamicAuthFlow,
  DynamicContextProvider,
} from '@dynamic-labs/sdk-react';

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

  if (user && !showAuthFlow) {
    return (
      <div>
        <p>User is logged in</p>
        <p>Address: {user.walletPublicKey}</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;

Step 4: Celebrate! (and dive deeper into Dynamic)

That's it. You should now have a fully working version of the Dynamic login flow. Now that you have it set up, you can deep dive into our methods and objections guidelines, play around with options in your developer dashboard, customize your UI via the dashboard, pull user data from the API and do much more. The world is your oyster (imagine a deep movie voice).


What’s Next
Did this page help you?