Install the Dynamic npm package (you'll need an NPM key from us)
This takes a few seconds.
Dynamic is your multi-chain wallet-based authentication and authorization platform.
It takes less time than an Ethereum transaction takes to settle
npm install @dynamic-labs/sdk-react
// you'll need an NPM key from us during beta
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 }) => {
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;
This takes a few seconds.
We support React and NextJS implementations today, with lots more coming soon.
You can further customize things within your developer dashboard. You can also check out a working demo environment here:
This takes a few seconds.
npm install -@dynamic-labs/sdk-react
// you'll need an NPM key from us during beta
We support React, NextJS and vanilla Javascript implementations today, with lots more coming soon.
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 }) => {
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;
You're done with your initial setup! you can further customize things within your developer dashboard. You can also check out a working demo environment here:
Once you configure Dynamic, you can add and remove chains, enable information collection, structure gates and access lists, and much much more, all without touching code.
Dynamic supports EVM chains, Solana and Flow, with much more coming soon. It's as easy as toggling them on.
Dynamic's SDK is fully customizable, meaning you can control colors, corners, experience and much more.
You can automatically block OFAC wallets with a click, and easily upgrade for a full suite of integrated tools from Chainalysis.
Want to turn your site into a member-only experience? you can configure gating in your developer user interface.
Testing your site? create an allow list for your developers and alpha customers. Have wallets you want to block? spin up a block list with a click.
Dynamic's UX gets smarter over time. You don't need to think about new wallets, chains or interactions. Configure Dynamic once, and empower authentication forever.
Returning user? we'll automatically adapt our flow to make it easy for them. Someone new to web3? we'll focus on explaining how to get started.
We obsess over making sure Dynamic works across wallets. As new wallets launch, we'll add them automatically to your flow.
Mobile web is uniquely annoying to maintain, with wallet-browsers, deep linking etc always changing. With Dynamic, it just works.
Dynamic can act as a full service user management system. With Dynamic you get both UI and API access to your users.
Testing your site? create an allow list for your developers and alpha customers. Have addresses to block? spin up a block list with a click.
Want to turn your site into a member-only experience? you can configure gating in your developer dashboard
Once a user connects their wallet, you can quickly add additional onboarding fields to the user's sign up flow.
(optional) Automatically block risky wallets by screening all wallets against Chainalysis' US OFAC sanctions list.
Our goal is to work with all wallets across all chains. See a wallet that we don't yet support? just let us know!
Customize everything. Dynamic's SDK is fully customizable, meaning you can control colors, corners, experience and much more.
We obsess about security. It is a core part of our mission and roadmap. You can read more about it here.
You can leverage our libraries, see code examples, and ask any question in our Slack community.
We like to geek out about wallets, dev tools, web3 and much more. You can read some of the articles we wrote below.
(It's easier than minting an NFT during a gas war.)