Easy Web3: Login with MetaMask - HTML and JS

what's up everybody it's tim the guy with uh not a regular upload schedule um whenever i do find stuff that is interesting or stuff that i think that i could share with the world that i might be valuable with uh that's when i upload a video so that's how my schedule works it's really not regular i don't think there's really enough people to make it regular uh but there is something though that i'm bringing to you today that i am interested in and that i do actually seem to know a little bit about so i can be helpful to others uh and that's web3 now i know we've heard a lot of stuff about web3 some people are probably even wondering what is web3 uh for those who are uninitiated you can do a google search and that'll probably tell you uh probably way too much um but the idea is basically being able to leverage blockchain with the internet and one of the most important features of web3 that has just come out is the fact that you can log in now with a wallet and you may think like what's the big deal with that well when you log in with a wallet you don't have to have money in it or anything like that you can just create one and they have plenty of browser extensions to do that uh when you create one all you do is when you sign into a service you know how you can authenticate with google or facebook or twitter or anything like that well now you can actually provide a login method for people to where when they sign in you actually don't surrender as a user any information to that site and anything that you give that site is totally volunteered like when you sign in with twitter so like i've built many projects that have login with twitter you actually give up a little bit of information about yourself when you authenticate with twitter when you give that site permission they can then read a multitude of information about you and one of those being your email one of those being your name one of those possibly even being your location if that's set depends on the provider and a whole bunch other things with web3 one of the strongest benefits that i personally use a lot is this kind of uh semi-anonymous uh authentication workflow because when you authenticate with a wallet that validates your ownership of that wallet and maybe the surface i'm building i don't really need to know anything special about you i just want to be able to say hey yes i know who you are and we're going to log in with you all right so what we're going to focus on today is really the very very basic basic uh intro of how to log in with metamask which is an ethereum based blockchain wallet so we're going to be working with the uh well not directly the ethereum blockchain but we will be working with metamask which provides some really easy endpoints that we can just grab with javascript and all we're going to do is just with regular html and vanilla javascript we're going to just log in with metamask and you know we'll just display the the user's wallet uh name a wallet address on the screen when they're logged in that's it and we'll just follow along with the meta mask documentation add some other stuff on top of that but we're not using react we're not doing anything fancy uh that can be in another video um but without further ado i mean really uh let's hop over to the other screen and get started okay okay so okay so right now we have this terminal open and we are on the desktop what we're going to do is we're going to make a new directory called web3 login we're going to cd into web3 login and then we're going to make a new file called index.html now keep in mind we're going to open up vs code at that same location so keep in mind this is just a regular index html file this will not be complicated uh it's going to be the absolute bare minimum for how to get started so the bare minimum for a html file right is the html tags the head tag let's call it let's give it a title of web3 metamask login and then let's do a body because we gotta have a body okay and then inside there we'll just be like we are just getting started okay so kind of formatted it a little weird but either way that's our very very basic uh index.html file we can test that by doing open index.html and look there we go we have our site and we're all ready now there is something that is special about metamask in the fact of you cannot use this browser extension like like i can open it and view the stuff that's in there which i i sold an nft recently so that's why i have money in it um but you can see that right now this use this file url is you know this file slash well triple slash and then it's the directory to the uh information we actually can't use the library that metamask loads into every page when we're in the file mode so actually what we need to do is every macbook should come with this if you're a windows user this also applies to you you just have to install python 3. um but we can do python 3-m http server and what this is going to do is this is going to start up a port on localhost port 8000 it's going to just do be a simple file server as you see if we go to 8000 we've got the same page because index.html will by default load in so let's just get started with making a very very basic kind of uh like layout you know let's just do something interesting uh we're going to use a packaged css class called tailwind css tailwind css i highly recommend um i don't necessarily recommend it for a static site like this uh because there is a basically you know how you can wind up writing a lot of css and then not and then you know maybe refactoring later down the road and you not realize that you've deleted a bunch of classes i mean that you don't use a lot of classes well with tailwind it automatically determines what classes that you're using and actually purges all the ones that you don't use which makes the package size a lot smaller when you include this link in your header tag we are going to make every class that's available in tailwind css available to us but we also can't really shake any of the unused classes out so this does require a little bit bigger file size to be loaded than necessary but again we're just you know working with some very basic stuff here um if you're not familiar with tailwind css i personally very much like it it's kind of just like a css framework uh and there's a whole bunch of pre-built classes that you can use to very easily just kind of like you know get your get your html formatted very pretty so the way that it works is like we would do uh this would be flex it would be the full screen and it would be the height of the full screen we're talking about the body here and we want everything that is in the body to just be like straight up centered and so we'll refresh the page and look our text is now right there okay so what we're going to do is we're going to add a button and this button is gonna be a really pretty shade of purple and it'll be rounded so people don't cut their hands on the edges uh let's do purple background to purple 100 we'll add some padding in there we'll make the text white and let's just see what that looks like should be pretty simple yeah we're just getting started let's have that be login with metamask right and so what we'll do here is we're just going to make this look a little bit prettier because we're going to be adding a lot more stuff to this uh one thing that we're going to need is an id and we're going to call it login button right and we will have well let's see because if this is disabled it's not going to change the classes it's just going to make it unclickable yeah so that's not very useful to us um we'll have to change these we'll have to change these classes around uh to show that the button is disabled because according to html we put a disabled attribute in here it'll be just but we're not at that stage yet so okay we'll just have login with metamask and then what we're going to do is we're just going to have a giant script tag at the end of this thing and that is how our entire app is going to run um so we can do a document uh let's do on i guess we can do dom loaded uh i guess this is kind of you know just we want we want something to work when the uh javascript is i mean when the page is loaded we're just gonna have a little alert show up we should get a little alert now let's see uh it's dom let me see okay so you know how long have i been programming uh content loaded i literally have to do this every day for my job uh like i program literally every day and i still wind up going to the docks to do things every single day uh so you know doesn't matter how long you've been programming you're literally always going to be googling stuff so don't ever feel discouraged about that okay anyway so we are have it to where the when the window loads essentially when the dom content loaded event fires uh we're going to be able to execute a function so the first thing we want to do is uh let's just do toggle button so what toggle button is going to do is it's going to it's going to be a function and doesn't take any parameters and what we're going to do here is we're going to determine is meta mask installed in the current browser and the way that you can do that is actually so meta mask i think it's i o yeah so metamask is this chrome extension right and it has actually some really really good documentation and here it is right here um it has everything from account management you can sign transactions you can send money to another person if you have another wallet address like on your app that you want to send to but we're just going to be talking about logging in today so to do that on the global window object just like how we attached an event listener here we're going to look for a object called ethereum and so the what that will be is that will be the instance of meta mask that we can interface with so what we're going to do is we're going to check to see if uh if metamask is enabled which actually we can have that uh we don't need it as a global we'll just do this we'll just say okay if i mean really you just do that so if window a theory if there is no window ethereum uh then what we're gonna do is we're gonna need to disable the button and otherwise we will enable the button so to disable a button we will first have to determine what our button is so we'll do login button and we'll do document.getelementbyid and we're going to be called loginbutton and so now this variable will be shared and it's in the same scope as all of this so we can actually access login button from inside these functions and so what we're going to do is we're going to login button and we're going to set the inner text to metamask is not installed and that will set the inside of our button right here to metamask is not installed and then what we want to do is we actually want to change the uh the clock we want to remove this bg purple and the text white and then make it gray with a slightly grayer text um and we can simulate that by just turning this to false and then we'll know if our toggle button function is working because i have meta mask installed so we're automatically going to go to the next stage um but we don't need to be uh worrying about that at this point so let's go to let's do login button and we're going to do class list and we're going to do remove and we want to get rid of these two classes which you can actually just pass a string here and then what we want to do is we want to add two more classes where we want this to be uh let's say yeah 500 is probably fine and then do make this dark and then we want to return false and we'll just set this equal to true and what's going to happen is essentially this this or true is going to shortcut this if statement and it's going to execute this all the time uh so when we reload our page we should get a great oh we got metamask is not installed but we didn't get i bet you is that our uh what we got let's see what the heck's going on okay we got class list removed let's go to uh let's just throw a debugger in here i literally have to do this all the time and i haven't like prepared this video or anything like that like you're gonna just see how this stuff is normally done um so we've got login button and we've got loginbutton.classlist right and we want to remove and so that'll probably work yeah that worked okay uh am i am i did i just advise everybody incorrectly i think this can either take an array or something i know you can do more than one at a time and then trying to add these back let's see if we can do um i swore it was a list no ah what the heck do we really have to hmm okay hold on we're gonna google stuff again uh let's see should be classless should be able to remove multiple oh okay it's just a string separated not in an array okay you see it's stuff like this that i i just wind up forgetting every day because i guess you know in my small brain i have a i just made room for other stuff likely memes um okay anyway let's refresh this page okay there we go so metamask is not installed not gonna lie that looks kind of like trash let's make the text uh a little lighter yeah that's that's better and then we'll do uh cursor not allowed and that'll just make our little pointer our pointer change oh whoops did it again there we go there you go and now it says like oh you know cursor is not allowed like a kind of cool little thing to add just for a ui standpoint okay now that we've made this button like you know way too overbuilt already uh what we're going to do is we're going to go to the fact of the matter of the to the use case of when someone does have ethereum installed and actually we really don't need to do anything but uh what i want to do here is instead of always having some on click class always be here because you know you could just add on click here right and then you could just have you know when you do this it logs you in what i want to do is only when the button has loaded and we have determined that the button is clickable because they have the ethereum object present that is when i want to do the window listener so we'll do login button and we'll do add event listener and we'll do on click oh sorry click and i mean we don't really need that we don't really need the event at all actually and actually we can get rid of it here as well okay and so when we're clicked this is when we're going to start the whole authentication process so how do you log in with metamask well they actually make it very very simple there is a method called ethereum.request where you would request accounts and what that will do is that is going to then give you a list of accounts there's really only it's an array that's one item long um because in the future they intend to have people be able to authenticate with multiple at one time which actually even though these docs don't say it they actually are you actually are able to authenticate with more than one at one time but either way what we're going to do is because we know that window.ethereum is present then when this function gets clicked let's actually just make a whole another breakout function we'll do function and we'll do log in with metamask and actually we'll just put that right here and then we will do uh ethereum request and i believe what did it look like request and then it was method and we want to be able to ask this user hey what ethereum accounts do you have in your wallet right now and that's actually going to give us a an array called accounts and then what we want to do is get the first account so we could have another window object up here and because we're coding in vanilla javascript and they're you know react and we're not in react where we can like manage state or anything like that uh we're just gonna have a window object at the top of the scope and essentially that's gonna be the uh user wallet address and we're going to have that set to just nothing and so now whenever now there's like kind of a global variable called user wallet address this is obviously something that's like pretty risky but this is a very basic tutorial of just how to get logged in um more advanced implementations of this would obviously you know you require just something a little bit more robust um but what we're going to do here is we're going to say i think we're gonna let's just debugger right here and make sure that everything is getting uh called properly okay so we're logged in and we have something called accounts oh this is an asynchronous function okay so this asynchronous function is actually going to require that we await for a window ethereum request and the reason is is because when the modal pops up for which we'll show actually right here when the modal pops up it could take someone a millisecond it could take someone two seconds five or whatever to wait for us to confirm what we're what account we're trying to log in with and when we click next and all of that or if we cancel uh and so what we need to do is actually support an asynchronous function and we wait for the user to actually tell us hey yes i'm authenticating with this account and the way that actually we should be handling um you know rejections right for people that decline us let's handle the rejection case first so click cancel and what should happen is we should actually wound up with do we not get the thing triggered it should i've gone to the next one i think actually we can catch it they should have a i believe they have a case for this oh they really don't show that wow that's kind of surprising i mean they have this accounts dot zero but that's incl that's that's assuming though that you right get get the account um so let's see in here they call it from inside the function but that shouldn't matter uh let's see async function let's just do this then okay let's see if we can get that that that negative response and we still didn't hit the debugger on that one so i think what we'll wait for is is there a way to catch this see if we can catch this and let's go cancel okay so we can catch this okay so this is where we can say that the user rejected the request okay so that's something that's not in their docs but definitely a case that needs to be handled so we'll just do a console error right here and we'll do e dot message i believe is what that key was right yeah just message um and so that'll show to the console right that we rejected the auth request um if they did not reject the authequest request which means that this catch did not get caught speaking of which we want to exit out of this function early then what we want to do is we want to do const count and we do accounts 0 because this is going to be a array of that's at least one address long and we just want to pluck the first one out of this and actually this string is going to be the window user wallet address is going to be equal to account which actually by this point might as well just do that save space okay so now we should wind up with an address uh below here which actually makes me now think we should probably have a a text some text here that starts out with nothing but then actually we fill with some data afterwards and we'll make this uh you know text to excel and actually let's make this a column because if we don't they're going to stack right next to each other and we'll do text gray 800 and we'll do some spacing some margin around that margin around the y uh for two units okay uh so we've got our user wallet address so i think the next thing now is to really just you know target the user wallet like a paragraph element and just move on there let's see user wallet document get element by id and do user wallet and then let's just set the inner text to window dot user wallet address and we should wind up with some some you know some text so let's see uh let's log in with the wallet and yeah get this show on the road okay so if we cancel right we shouldn't be able to reach uh well actually we'll need to uh if there are no accounts then we want our return here because we're going to return kind of an empty empty here and then what we want to do is because if there's no accounts we're just going to get nothing it should just be empty and we'll just kind of like you know return from that uh oh this is because i did flex here actually let's move that back and then we'll actually just make a div in here flex coal space y2 okay so what i'm doing here is i'm actually just making a flex column and it's going to have just these two items in it and these two items should be justify center and item item center and uh basically these two items are going to display on top of each other as opposed to right next to each other because flex by default will put stuff in a row let's see if that works and actually let's just add some text here see what that looks like yeah perfect uh do you feel like maybe that text is a little too a little too large okay cool and let's actually just try to log in now well first let's decline and good nothing nothing crashes we should get a console error message actually somewhere when we decline but let's see is it not catching that seems to be doing console error what is this what is this user rejected the request i mean yeah i mean that's that's what the whole point is do i not have uh oh i have it on info only that's why let's do default there we go okay uh so now we're getting our uh console request these are from the metamask rpc but this is from us as you can see index line 35. okay uh with that being said let's actually just do a real login now and we'll log in with my wallet and we'll just go boom and it'll say hey yeah we're permitted to view your account which again that's all the information there is so there's really nothing to take from here and you can see we connected and right when we connected we have a wallet address here and that's pretty cool um we could get way more sophisticated with this and we might um which actually after this login button is present we could make a log out button so i guess let's do that let's uh let's see so after we're logged in let's have let's remove the event listener for uh click so login button and we'll do remove event listener for click and then we're going to add a new listener for click that will be sign out of of meta mask okay and then we'll make a new function that probably doesn't need to be async but let's let's see sign out of metamask and i think what we can do there is just do window ethereum dot this one we're gonna have to go back to the docs um which honestly i guess it shouldn't matter honestly because we're not even caching anything so your your wallet will always say that you're connected like for example if i go to wallet and i go to connected sites uh you'll see localhost 3000 is authenticated so once we click it it won't open the uh the modal again but now since i removed it from connecting sites it's going to you know it's going to appear so yeah okay well anyway we don't need to sign out of ethereum but what we do need to do is when someone does click sign out of ethereum we need to set the user wallet address back to null and then we also need to set the inner text to nothing and then we also let's see we've just signed out so we've got rid of the user wallet address and we also uh set the text inside of the p the paragraph element to nothing so nothing should be there anymore um i guess we should be good let's uh change the login button once we log in to to sign out of metamask which it's really not signing out but to our app it would be or to this web page really it would be uh so here let's do this we'll log in okay now you see sign out of metamask so that's pretty good um i think i'm pretty happy with that let's see if we can get that button to center after we do it i'm pretty sure that's going to require a whole another div and i just really don't want to do that right now okay but either way this is our wallet address so there you go uh we're logged in with meta mask you can also sign out of metamask which did not work let's see why did this remove event listen or not uh type click should just be i mean should just be it we just don't want to have the same button have two listeners on it because then it's going to try to execute both yeah like it's trying to like it's trying to do right there um what the heck uh um let's just do this should remove that then we'll need to visit we're gonna we're about to do something really messy which there might be a better way of doing this but we can just do a set timeout and then do then attach it in here after like 200 milliseconds see if that works yep okay so it well i gotta change my button back as part of this logout text uh so let's do sign in with metamask and now the button will be there and then what we actually need to do again is do this put the opposite which is really messy um but we're going to be signing out we're going to detach the listener for signing out and we're going to retouch the listener for signing in and we have you know just made a absolute you know mess of this button but it does work and we're signing in with metamask and actually from here uh there's a whole bunch you can do once you have the address of the user that you want you can go and there's many many many other places uh that you can get information from like c like with openc openc has a whole api um i believe it's resources docs so these people have really good doc documentation this api reference like for example this account that's when you can go and just make a you know effect request to a address that we have actually so we can make a fetch request to this address and then we could go and see what nfts and what tokens and yada yada and pretty much the world's your oyster at this point so uh so yeah that is pretty much it okay so yeah there was a little bit debugging there and it got a little bit messy at some points but the uh way to log in with ethereum is really as you've seen right here really just a couple lines of javascript and actually i am working on a project right now that is going to essentially handle all of this for you and it'll be something that you can just inject into your site whether that be no code or be a static page like this or anything like that and basically we'll handle all the authentication for you and support multiple wallets and all that stuff but if you just want to implement metamask today in your basic html site just to you know get someone's address get someone's like you know ethereum address for whatever reason you want to show them their nfts or anything special like that make your own little web app this is how you do it uh it's that simple and so with that let me know if you have any questions that's our first little web 3 adventure uh the second one will be a lot more cohesive but i just wanted to get something out there to let everybody know and kind of you know put the feelers out on what people want to see when it comes to a web 3. and so that's it thank you

Channel: Tim Carambat

Views: 12,827

Keywords: web3, crypto, metamask, javascript, html, tutorial

Id: iEym7VHoly0

Length: 32min 35sec (1955 seconds)

Published: Fri Sep 17 2021