⭐ Quickstart Guide

🚧

NextJS with React 17

If you use NextJS with React 17 please follow the instructions, here.

Step 1: Create an account

1. Sign up with your wallet to get an environment ID

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

3. Copy your environmentID from the Dynamic overview page

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

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 { DynamicContextProvider, DynamicWidget} from '@dynamic-labs/sdk-react';

const App = () => (
  <DynamicContextProvider
     settings={{
       environmentId: '<<sandboxEnvironmentId>>'
    }}>
    <DynamicWidget /> 
  </DynamicContextProvider>
);

export default App;

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

const App = () => (
  <DynamicContextProvider
     settings={{
       appLogoUrl:
         'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
       appName: 'Example App',
       environmentId: 'Enter your Environment ID here'
    }}>
    <DynamicWidget /> 
  </DynamicContextProvider>
);

export default App;

Step 4: Log in with your wallet, and see data in your developer dashboard

Now that your widget is set up locally, try to log in. As soon as you do, head over to your developer dashboard and click on user management and analytics. You'll be able to see your user show up!

Step 5: Customize your SDK design

There are many ways to customize the Dynamic modal to fit your needs (you can explore them in the SDK configuration section), but to start, we suggest setting a light/dark mode and a primary color for the modal, which you can do in the design section of your developer dashboard.

Step 6: 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).

You can also join our Slack Community to ask us anything on your mind.