Dynamic 🛠 Build your dApp Signup, Login & User Management using Dynamic.xyz

[Music] hey I'm Matt from Dynamic and today we're going to get your dap up and running with sign up login and user management through fairly obviously Dynamic so welcome and let's get started we're going to use three separate resources docs. dynamic. XZ the documentation demo. dynamic. XYZ for a demo environment the developer dashboard you'll get access to this as soon as you sign up by the website dynamic.

XYZ and you should see something similar to me here we'll also use a plain create react app instance you can see I have one running right here and we have a code editor over here that very same all right we're going to do a whole bunch of stuff very quickly so follow along hope you enjoy and any questions just let me know once you've signed up in the dashboard we are going to want to configure our sign up and login methods we're then going to want to put a sign up login method onto our react app let's start by taking a note of our environment ID we will need this when we start embedding the app with Dynamic so take a note copy and paste put it somewhere you need easy in your code editor let's for example pop it over here just now so we have that and the next place we're going to go to is configurations let's start with login methods you can see here I have enabled for email signup and social off these are the first two which we're going to support now if you go to the documentation you can see the sections and signing up with email and social you'll see that for social you will need to configure individual options so for example if we look here we see that depending how much you want to support you will need to go and actually take the client ID client secret and then add the redirect URL to coinbase so for each one you need to configure it separately I've done Google here for us already steps available in the documentation all you need to do is turn these on that's it next we're going to want to get something which looks like this sign up with email or with social what we're going to want to do is embed the react SDK into our react app so if we go to the quick start that's the easiest way of doing so I'm going to make some quick choices for us here VH is the default that we use as the client Library I love it I thoroughly recommend it if you need to use ethers just change it to this and we're also going to want to be able to use wagm so we'll need an extra Library called our wagi connector all we need to do copy and paste this now I am going to want to offer our users embedded wallets when they sign up through email or social so for that we will also want ethereum enabled to do that we'll need to do it in our dashboard and also in our code so we have ethereum selected here you can see the notes set the same if you want ethereum embedded wallets use the ethereum allet connectors so we copy straight back over to our code run now I've run this already to save us some time and back over we go to step two we'll want to initialize the SDK so let's copy this over you'll notice it has exactly the same selected here so if you turn off wag me for example this would update as well if you want to use wagm V2 by the way just let me know it's a separate guide because it lives down here in I believe Frameworks wagm V2 and it shows you exactly how to do it there we'll update the default quick starts to reflect that very shortly but for now just take for granted that it lives elsewhere so initializing the SDK let's copy our code back to our editor and let's just paste over a default app component let's do this export default up take our environment ID you see we need to replace it here you see by default this has the environment ID setting and the wallet connectors are set to ethereum wallet connectors in the array which we've already imported you can see we're using our Dynamic wagi connector right here it's really important that the context provider wraps your whole app as high in the component Tre as possible one level down you'll want the wagm connector if you're using it and then you see this interesting one called a dynamic widget we'll get to that in just a moment but let's start our app up by default here we go we have this button and now we have this model this is the dynamic widget what you're seeing so you can see an an action here but how come this one doesn't have a button how come it's directly embedded into the page well that's because there's two kinds of dynamic widget you can see down here in the components introduction there's the embedded widget it's a standalone component and there's the widget itself which renders this a button so we're using the dynamic widget as a button which is why it shows up like this and here we have connect with Google or enter email so I can do this m dynamic. XYZ I'll be right back here we are with the code and voila I'm signed up I don't have an embedded wallet I haven't connected any other wallet but I do have my user profile if we go back to the dashboard if we go to user management we'll see we have our new user step one email and social off done let's add two more things firstly let's add the ability to connect a wallet so for this we have our login methods email and social are enabled web 2 only as a design configuration is enabled so let's disable that we want to allow web 3 as well now this is set to optimize for web 3 users wallet C card will show us the first option before sign up with email and social that's not necessarily what we want here we want to show wallets but as a last option so let's do optimize for web 2 save this and refresh our app I'm going to log out again here we have continue with a wallet let's try metamask we will sign and voila we're now able to sign in with a wallet instead back to our users you can see we have one right here beautiful now I'm going to delete this and I'll keep our email user what we'll do is log in again with email be right back here we are and we can see in our user profile that we have the ability to link a new wallet we're an email user but if we want to add our metamask for some reason link metamask same process sign in boom there we go we now have linked our metam mask as well let's log out go in as a new user forget that we signed up of email go to connect our wallet directly as a new user we want to sign up with our wallet and we can do so right here no problem so back here in our profile tab logged in with this wallet we can now see that we've autol link the two for you we bring you back to your email profile with this wallet attached so you can now log in with your wallet get access to the email profile vice versa it's easily connected we handle a ton of edge cases like this as well as multiwallet and a ton of other stuff so this is a really good reason to use the widget the UI that we provide cuz it's all handled for you it's beautiful that way okay let's add the next step what if you don't necessarily want to connect metamask you want to sign up with email or social but we want to give you an embedded wallet when you do so let's go here we can give you one an evm or salana or indeed both which is super cool let's go evm only for now there are a few choices to make you can dig deep in a documentation or talk to us about what's the best choice generally you can offer pass keys or onetime codes assigning in security methods you can choose when to prompt someone to add a signing method that is at the initial signup which you know what let's do that now or later on transaction so maybe let's not make it required and I'll show you what this means you can also override anything at any time to go manual mode meaning you call it in code as a hook now you'll see what this means okay let's give it a go turning on embedded wallets just like that refreshing the page going here and let's now go plus one at Dynamic XYZ sign up an email be right back here we go here's our codee you can see that we're now prompted for an extra step you're being given a wallet so you need to secure it you can see that you can skip this step because in the configuration that's what we allowed right you can see pasy security prompt at initial signup but it's not required this is a balance of ux for a security right in this case it's an extra point of friction but once I've done so I can sign for stuff with the pass key for my embedded wallet and I don't need to worry about it again this is a good optimization to say okay if you want to do it now you can if not let's skip maybe let's skip this for now and look at that we're an email user but we indeed have a wallet you can see a lovely little tip here where you're also recommended to set up your pass key within the model now if you don't do it when you go to make your first transaction it'll automatically trigger the model to add your pass key so lots of different compromises on the ux and UI all customizable from within this UI here this dashboard okay we have email sign up we have social sign up we have user profiles we have web3 wallet sign up and login we have wallet linking we have embedded wallets why don't we add an extra layer on top which is what if we want to have a situation where our embedded wallets are account obstruction enabled we have a partner zerod Dev who helps us with this so what you do is sign up with them get your project ID enter it here and this is helpful separation of concerns turn on zero Dev do you want new users only to get smart contract wallets or all users including existing do you want to enable Smart contract wallets for all wallets which sign up or just embedded wallets so let's go just embedded okay this is what we want for our use case turn on and here we have our first ER and this is an important error surfaced it on purpose to show us that when we enable certain things we need to reflect that in the code so for example you can see we have a link here to check the different wallet connectors that we're using now you can see right here we have ethereum wallet connectors in order to keep the bundle size light we have split everything up here so in this case what we're going to want to do is check if we need another we actually need zero Dev smart wallet connectors in order to use Zer Dev we can see that it comes from the ethereum a library so we'll stop our app for a second we'll install that Library pop back and check what we need so let's import from there from Dynamic labs and then I think it's ethereum AA just like this we will then add it to our wallet connectors start the app again wait for a moment here we have connect our wallet let's go map plus 3 damic XY be right back there's our code skip for now we got an embedded wallet and there we go so if we check out this user let's go back to our users we can see that we now have two different ones you can see a few seconds ago this user map plus 3 he has an embedded wallet address and on top we have a smart contract wallet as well and this is the one which will now be interacted with for that user and you can do all sorts of neat stuff like set up your gas sponsorship rules all through zero Dev so if you want to go deeper on that ask away we can help you out okay we're almost done we have all of our sign up and login methods configured AA enabled wallets for new users and let's add some account management or onboarding features now so we could go and we could handle more chains for example or we could add more different kinds of wallet configurations but for now let's focus on the user experience after we sign up so what happens if we want to ask for some information let's take an easy one like we want to ask for first name go here toggle it on done let's also say we want to quickly add Access Control my Dynamic D let's call it there's a bunch of configurations in here so I'm just going to show us the easiest one you can see that we allow site access if you have an email or wallet address like so so let's go wallet address I'm just going to take my metamask and pop it in here just like this we'll update the and we just want to make sure it's turned on which it is super okay let's test these two out I am going to log out and let's come back here connect to a wallet metamask sign in Access is the night so in this case let's stop that yeah oops I forgot to save that wallet address on here there we go much better let's update our list let's check that here's the wallet address it is indeed saved let's try and connect that again I'm just going to do a hard refresh it's sign in there we go we're let into the app because we have this wallet address saved in our access list it's asking for optional first name to save let's give it we're now back in if we go to our users tab you can see here in our metamask profile we have our wallet attached and we can see all the different sessions that we have on this user okay so this is a brief overview if you want to start adding more chains and networks you do it down here in the changes networks tab so if you want to enable for example optimism B&B so many other in fact any evm compatible chain if you want to add a custom Network or a custom chain you absolutely can do so as well let me just find it here for your custom networks and we have a setup here where you can add an ebm Network yourself in the code and that'll automatically support whatever you add if you want to go further and you want to start adding plugins like the onramp now I've enable that one for you which is why you saw it this beautiful buy button here you can add CH analysis capture others we have lots of different Integrations if you go down here into the integration guide you can see if you want to send an xtp message after someone signs up you can create a web hook so that would be over here developer web hooks I should have one already set up we do you give it the URL let's edit this one you select the event that you want to use you make sure it's enabled and VOA we'll do the rest for you there are lots of other wonderful Integrations like for example we can integrate with Bellow if you want to have analytics on your wallet addresses and your users and then when it comes to design we haven't touched much in it I know we said we' get into the the details of the different components once again we have the dynamic widget and the dynamic embedded widget there's lots of other stuff too inside here there's loads of hooks so if you want to do everything which we did but do it manually you just hook into the code let's say here's the use embedded wallet hook and you can choose when to create the embedded wallet for the user so everything which you can think of doing you can do in code and you can access the state of everything in code the Hook's super useful for that and everything else lives here the utilities and callbacks there are some examples for you that's funny I've guess I've been clicking around too much and if you need to do things in a headless manner or interact with the API you would do so over here all right folks thank you for watching [Music]