A beautiful, smart and dynamic wallet login flow that just works

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;