Let's Learn Passwordless Auth!

of learn with jason today on the show we have my chris thank you so much for joining us how you doing hi good thank you for having me yeah i'm uh i'm super excited to have you on the show i think this is going to be a lot of fun we have uh we've worked together on a couple things in the past um i was on your show uh and so here we are the shoes on the other foot um and and i will try to do as good a job for you as you did for me when i was on your show um so for folks who aren't familiar with your work do you want to give us a little bit of a background on who you are what you do all those good things yeah for sure um yeah so by day i am uh well first of all my uh name is miracus bonzo and by day i'm advocating for developers at magic so i'm pretty much adding a lot of magic authentication to a variety of jam stack no code and blockchain apps and by night i'm building a dao so that stands for decentralized autonomous organization uh for women in web3 and so i'm spending a lot of time learning more about dows and figuring out how to build it with the numbers of the women in one three commute community so yeah i'm very passionate about uh building community and um and coding so i'm excited to be here yeah yeah i'm excited to have you uh what's up adrian thank you for the sub uh two month streak thank you all right so today we're gonna be talking about um magic and specifically passwordless auth which when i hear that said out loud it it kind of sounds like an oxymoron because how can it be secure if there's no password right so what's what's changed like what's different in this uh in this setup yeah that's a good question so the difference is so with um regular you know the mainstream way of authenticating into apps is you need a username or an email address and a password and what usually happens is that password is stored in you know the developer's server and so you can only imagine if that developer was you know for example facebook they pretty much have like a honey pot of passwords and like user information that is prone to um hacker attack so that's like the um security issue with passwords and so that's why uh moving forward are actually now passwords are becoming more obsolete and companies or you hackers you dirty hackers that was so loud why why is it so loud today okay sorry about that yeah yeah dirty hackers um but yeah so uh the industry is moving towards a passwordless um feature which means you know it can mean a variety of things but with magic we pretty much have um well we actually offer a variety of uh login methods but the most popular one is um logging in with your email address only and then you know you get a link sent to your email address asking you to authenticate and so you click on the link and then you are authenticated into the app so that's pretty much what um password one of the ways to do password list authentication that is more secure so so the the difference here is that in a more traditional username and password setup you would be expecting the company to do all the security things because they're holding on to the passwords and they're holding all of the user information in one place and yeah in a in a passwordless situation what you're doing is you're you're letting the user control their own security because if you keep your own device secure then somebody can't like hack the company and get your information they could only get your email address they wouldn't be able to gain access to your account unless they were able to also gain control of your email yeah that's there's that's uh pretty much correct there's a lot to unpack there when it comes to phishing attacks but that's generally the right idea yes gotcha okay cool so so this is uh you know and i've i thinking about this now i've used these like i i was thinking i was like i don't think i've ever used a passwordless auth but that's that's actually not the case at all i've gotten um i've seen a handful of different things where you you request a login and then it emails you you click the link and then you're logged in i've also seen it where you um you log in by like proving that you own your phone so you you have to enter a thing or like if you log in with the cli and it takes you to the app and it says hey uh did you mean to give the cli permission and you say yes and then the cli is logged in with no passwords so there's there are a lot of different ways that you can do passwordless auth that um i just wasn't really thinking about but uh i guess this is this is more common than i thought yeah um well cool so so this is um and it's also just convenient right like i think one of the so it gets easier with password managers like i you know i use one password and it usually means that when i go to a site i don't have to remember a password i just click the one password button and it it's like great i got you and it logs in for me but when i'm not on my computer it's such a pain because i use a different password for every app and it's like a password that's not human readable they're like you know generated long strings and so then i've got my phone open and i'm looking at this horrifying string and i'm like typing it one character at a time and i always screw it up right like so so that part of passwords like i i appreciate the security of it but i i it's really a pain when you get off your own machine um yeah whereas with with passwordless um if i've got my phone or if i've got my my email account that i can get into then i i can log in on any machine without having to like hand pack one one character out of a 35 character random hash right um exactly yeah well that's that's cool so uh so that is i think that's interesting so how i guess how does magic approach this because what you're like i guess what i'm what i'm thinking is you know we're we're talking about there's still a password right like the password is i have access to my email instead of being a string um so what what happens or what changes in the way that you think about building apps when you're you're using this passwordless flow where does the where does the control go like instead of trusting the the centralized app you're trusting the user to manage their own security where does magic come in and how does how does trust factor in there yeah that's a really good question so um to answer your question the control does go to the user and the way magic is really more magical than other authentication solutions is that when a user uh logs in what um magic gives them instead of having like um a password magic gives them generates a public and private key pair and that is what is used to authenticate them for to the app in future sessions so um so the passwords are actually um the another differentiator with magic is that we're not just like you know um authentication solution uh we are also providing like um a wallet for users to store their public and private keys and which means we have a uh we have a key management solution where we store those keys so we have a non-custodial like um delegated key management solution to do that okay okay i mostly follow the um we're starting to get into territory that i know nothing about so i'm going to be leaning on you heavily to explain what things are um so when when we talk about this actually you know it might be easier if we just look at it because i think i'm going to start asking questions that are pretty abstract here so if you don't mind i'm going to switch us over into pair programming view and let's start by giving a shout out to our closed captioning we've got jordan here with us doing live captioning uh from white coat captioning white coats here every show helping make this show more accessible and then that is made possible through the support of our sponsors netlify fauna and auth0 all kicking in to make this show more accessible which i really appreciate we are on with uh with merry chris who is scenecat on twitter so you can go and find a link to follow her make sure you go and do that and we're looking at it's magic dot link right yeah okay so this is the the service that we're using today is magic dot link so you can go and check it out there and if i want to get started where do i start do i build an app first do i do i start with magic how what's the flow here um usually well as a developer myself i would go into the docs and understand you know how the how the technology works but um once you get a feel for that then you can go to log in or get started actually get started here i go yes to the upper right and then you can sign up for your free trial okay here i go oh this is this is like our technology so you're using magic to be authenticated okay so i just got an email that i will show everyone here that says click the click the button to log in right and so i'm gonna click that and [Music] okay and all right so now both of them are are here on this this tab so i'll close one of them and i'm now in yes so um so now the question i want to ask is i actually i think it would be fun for us to do like integrate magic with an 11d template so are you cool with that yeah we can use an 11d template so just any template um i think i would suggest using stephanie eckles because that's the one that i've used as well um if you go to the her tutorial create an 11d site from scratch on egghead um you should be able to find yeah and i think if you start watching it'll give you like a source um code on github we want to get the um the last like lesson source code the last lesson source code okay so here's this one down here yeah and then we we want to um get cloned this one okay got it all right let me let's see can i how does one get just here's what i'm gonna do i'm gonna close i'm gonna clone um let's make a directory called uh we're gonna call this magic 11d passwordless auth and i'm going to move into it and then inside here i'm going to clone oh so we would need to add code we do need to add some code let's get this in here and then what i'm gonna do is copy the uh lessons where am i let's copy oops copy 11d lessons and it was lesson five and we're gonna co not cd copy it and let's just do one of these so that i don't miss anything so now there's our 11d external data so i'm going to remove the 11d egghead collection and now i'm going to i should have copied everything inside of it not yeah cool okay let's try that one more time so we're going to copy everything right here there it is okay so i'm going to remove this 05 and i'm going to npm install and i think that i miss i missed this 11d dot js so let me just grab this whole file and the terminal game is strong [Laughter] i have the the github cli makes a lot of this stuff um just so much more approachable yeah because you only have to know the names of things which is really nice so let me let me drop this in and then i can come back here let's copy this again and now what i want to do once this is done uh and let me drop a link to this 11d site from scratch because that's also a really that's a that's a good one we should yeah make sure that shows up in the notes okay are you done or are you doing things looks like it's still doing things oh it says completed interesting i think it might just be it's doing something in between downloading uh rxjs here this doesn't change in a second i might i might stop it and try again hello okay i'm gonna stop it okay so let me open this up and inside we have node modules we've got all this let me create this dot 11d dot js and we'll put no not that we'll put the content of this file in there okay and now just try to npm install one more time and see how this goes is this just a really big file or is something going on here i don't know enough about rxjs to know yeah if wait why are we even getting rxjs must be because of sas i guess i'm not sure okay but if that doesn't work um do you want to just i'm not sure how these uh learn these sessions work but it's okay if you just installed the um github repo of the code that i've written and then maybe we can just start from scratch for each of the page sure yeah yeah we can we can totally do that okay let me send it to you um per email okay this is actually like maybe the second actually the first coding session i've done live stream the live stuff is i mean the you know the the blessing and the curse of live stream is it's fun to see how the getting started experience works and also you get to see how the getting started experience works [Laughter] things are going to go wrong things are going to go weird and that's uh that's what makes this fun if it was if there was no chaos why are we even here that's true that's true however just send it to your email [Music] oh what's up we got we got uh i see ben in the chat i see brandon in the chat what's up everybody welcome welcome thanks for hanging out still don't know what's going on with this so i think we're just gonna we're gonna give up on that one and i'm going to get um where i don't you emailed it to me yeah i emailed it to you um okay i'm looking let me send it again [Music] thank you for the host nettings a clue thank you very much let's see um all right i might have to go and find you on github so that we can we can do this what's your what's your github it's a seamcat s-e-e-m-c-a-t okay and the uh is the repo going to be toward the top here um i think i think it might be um it's called magic 11d if you want to search for it uh spelled 11d or number 11d number 11d there you go okay magic 11d let's get this one and i'm going to move out here we're going to remove this one that wasn't doing what we want and instead we're going to github clone this one oh github repo clone this one okay so let's get that i'm going to npm install i'm now wondering there was a there was a little bit of an outage today on us east one so if this also hangs on us no that one just worked i don't know what was going on so all right something was something was goofy in that repo or my computer hung up on it which is probably the more likely case um but this one is doing exactly what we want and we yay have ourselves a repo let me close this one out so i don't accidentally end up back in it okay so in here we've got a handful of things going on and let's take a look at we've got a login we've got our profile um all right what what should i be what should i be looking at here like where should we start yeah so let's i um let's start by deleting some some pages so that are folder so that we can like restart them so let's go into the public folder and and maybe just go into um the login page okay and yes go in there and maybe just um go down real quick [Music] yeah let's just delete all that that's in there [Music] like everything in the body yeah everything in the body would be yeah all the script tags actually we can delete it all the script tags are gone um yeah should i keep the form so that we don't have to i guess we can get rid of this but that way we don't have to write the form itself we can just kind of keep this here yeah that's a good idea and then let's yeah and we can do the same for log out too um just get all the way did i just do something oh i think you went into a different okay okay i was just looking to see make sure i just got myself confused okay okay and then let's go into the um log out html file i think i'm okay so here's what i'm confused about i think 11d is going to generate these files so yeah i think we need to be deleting in here so i'm going to delete here and then i have a suspicion that this layout is going to be what has all of the yeah here's all the magic stuff so i can clean all of this out all right and then in here that all looks right let's ignore that for now and then so we've got the the login has a form that pulls from our header.nunjuks which is now empty and do i need to clear anything else out um the profile page the profile page okay so yeah and let's clear out the script tags gone yeah get them out of here all right okay so look at copilot trying to write this for us i know honestly let's just use that later but i'm just kidding um so yeah first thing you do now that you got your template set up is uh we gotta set up um magic right um so well actually before that you set up the pages which we already have the simple pages we're gonna have are the login profile and home page and if i run this we should be able to see these and they'll just be empty pages so let's good idea that here we go log in to see my blog we've got login okay and then we've got profile there it is okay so so there's a simple simple site it's got all the things we need um and now i'm now i'm ready i'm let's do it yeah let's do it so we will start by um setting up uh magic um so let's go into the header file header nunchucks file okay um just give me a second and is this like because i know that some of it came from cdn and stuff right so is there like a getting started page that's gonna give me all this stuff when i when i set up or like where would where would somebody else be if they were kind of following down this path right is it in the docs maybe um it would be in the guides we have a tutorial that i'm helping uh i'm using as a reference um got it so if you go into the guides on the left hand side um all the way up if you just go all the way up there's a guy got it and then if you look for 11d um you'll be able to find the tutorial that we're following right now got it okay so i just wanna i'm just thinking i'm gonna have to copy paste some sdk stuff so i want to make sure i've got that um yeah for sure okay so in the login where was the header bit yeah so um we're gonna set up the header um so if we we're in this section um setup header so you can just copy this um magic sdk script okay um and then um initialize magic with that so what we're going to do now is so it's asking for our publishable api key so we're going to get that from our dashboard and i think i saw this right here so here's my publishable one now this one doesn't need to be kept secret so i can because it's going to go into source code which means anybody can find it it'll be available in what's published on the on the web um i'm also feeling like i should install a nunjucks so that we get some syntax highlighting here because this is kind of hard to read yeah that's a good idea okay so that's working which means now okay there we go much better okay so so that's um honestly all you need to do to set up all you need to set up to um incorporate a logging in method so if you uh log login i i guess no the pages have been set up already but that's all we need to um set up with magic and if you log in now you should it should be able to work we have to make it oh click right i'm jumping the gun well uh yes we have to make it click so um yeah now we're done with initializing the magic sdk um let's go let's let's stay in the um login page stay in the login page yeah and start um adding some stuff in there okay so um in the login page uh this is where we're gonna be using the magic sdk so we all we need to do we're already you know um magic the magic sdk is already accessible on all the files so let's first grab the elements of this ui so let's make sure that we have the form the input and the result oh co-pilot complaining i love it it's so nice i know okay so now we wanna um when the user passes in their email we want to um call a function so let's uh make sure we're listening to that um on submit uh what have you done co-pilot is it perfect is it already done oh no no not really okay all right yeah we can change it here's what we can do is uh we'll do a handle login function and that's going to take an event yeah all right and then uh for now we can just say like to do and then down here we can say form dot add event listener handle yeah okay exactly that's what we want and then yeah also going to prevent default here so that it doesn't actually submit all right right and now we need to grab the user's email that they added so let's um store that in a variable we also cool and yeah now this is the email that we're gonna need to pass into the magic sdk method called login with magic link so if you access magic um um i think we defined it in um the header that ngk as like lowercase remember so the vocabulary is magic got it yeah so um let's call that magic dot auth so we won't it's a ace it's going to return a promise and we need to you know wait for the promise but when we call this um we call this with the email address passed into it and it needs to be within a object that's what it's expecting okay and so um yeah so what it's going to return to us is you know magic is going to authenticate the user and it returns a did token um which represents you know your access into this app did you say d-a-d like dad yeah dad token you're just kidding no you get a dad token okay what did you actually was it d id yeah d-i-d-d-i-d it stands for descent it stands for decentralized um identifier token it has to do with how the technology works in the back end we pretty much like um the way the public and private key addresses are created are thanks to the standard um did uh specification so that's what we incorporated into that and does this return just the token or is it like an object that i have to pull the token out of no it just returns a string of the token yeah and it this token has by default a 15 minute life span but with magic you can extend that life span to like days if you wanted because some apps would want that okay don't you love how it also gives you the comments i know well commentary at some point i need to get somebody from from the github co-pilot project on here just to talk about all the the amazing things you can do with this because i've seen people you can write a blog post with it like you can put a headline in and it'll just write pros and it's it's surprisingly good yeah for sure i agree yeah so now that we have the um the token um we can just display it um into the page um if we wanted okay um but you know that's not really necessary but if you wanted go ahead um display it and and now uh ideally when the user has been logged in um we want to take them to the profile page so let's do that um but we only do that if the token um exists because sometimes you know the user will log in and um it will return an invalid toke um it will return nothing so we need to make sure that exits first um i do see like um a minor error because i didn't explain so magic dot auth and then dot login with magic link is the right method log in with magic link yes there you go okay all right and that should that's that's the thing that's the thing and now we can test it i think okay all right let's try it this is i'm actually kind of so i thought i was gonna have to wait and like do some checking and polling and stuff so i'm pretty excited about this let's let's give it a shot here so i am here's my site am i in the wrong so here's my login page so i'm gonna log in wow it just did the thing yeah okay all right so i'm gonna go check my email and i'm clicking the button okay okay all right so that's that's pretty amazing that that just like worked on the first try uh very handy yeah it is and so what happened there is you know magic um what you just um enabled is the magic iframe right so when the user logs in um the magic kids did that just work there there um you know jd token it's being validated by the magic iframe so there's it prevents like um attacks like phishing attacks um because it's like more secure than if you had done it in the uh browser by itself yeah okay uh adrian is asking is this work can it be localized like can you do it in different languages if you want the iframe to show uh you know spanish portuguese french whatever yeah um we do provide um localization um we support like 30 plus languages if you and is that just based on the browser language um that's a good question you're going to need to specify the locale when uh initiating magic actually so so if i'm in here yeah then i would just like add some options yeah um not in there oh actually yes sorry sorry yes in there um you would uh add a comma and then start a new yeah and then add locale and we could do like what uh yes yes it's good and yes will work okay let's do that now what is that yes should be spanish which is the only language that i can kind of kind of read like my spanish is is bad but it's at least not non-existent oh wait oh no oh because we're already we've already tokened let me use my let me use a different email hey look at that that's beautiful okay so now let me turn that off so that i actually remember i won't be able to follow any instructions in spanish um cool okay very cool all right all right so now that we can log in i can get to my profile and in here what we haven't done yet is we haven't like checked to see if somebody's allowed to be here yeah we're actually going to do that oh yeah actually we can do that right now if you want okay sure i think that's a good idea so yeah right now like regardless of whether or not you log in you can just add the you know end point and and get there um so with that we want to go into our header um file into the header we go all right i'm here yes and what we want to do is um we're gonna be manipulating the navigation links in here um so actually we don't even have a navigation uh bar yet sorry i forgot but we're gonna add them in here so let's add them as just like regular links if you want so we can do like a nav and then in our nav we can put in some links so we'll have the home page the profile page and the login logout [Music] okay there's log out and we need a profile yep okay whoops if i can spell it okay so now we've got here's our list of links we can go to each of these we've got a login a log out i think i actually um didn't change anything in the log out page so i think i just saw magic do something so i think it did in fact log us out yeah it did but we can um get to that later but check it out i can still get to the profile so now we want to fix that we will um so you said we want to change what we see based on what our status is yeah exactly so um we're going to be uh you know this yeah so if we go what page did you want to protect the profile page right right so let's go um into the profile page okay and um what we want to do in here is yes create a script tag and we want to check to make sure that the user is logged in so magic actually provides a method that helps us do that right on the client side but you can also you know um implement some of your own logic um to check that as well so the um the it's called uh is logged in so we're going to check if is logged in is true and that's pretty much all you need to do um so if that's true um then you know um display the page uh or actually maybe we can we can just check if it's not true then yeah redirect them to um the login page look at copilot just knowing all the things i know so what should happen here if i'm not logged in is okay i think my logout my logout button didn't actually do what i want so maybe we need to build the log out and then check this yeah i think that's a good idea but we did for um i forgot to mention that um is logged in it also returns a promise so i think it would be good okay so async function um let's go yeah check login and then in here we can move this up and we'll say const is logged in yeah it's gonna be await and then we'll move this i forgot to mention it's hardly obvious but is logged in just returns true or false yes okay great so then we can say if is logged in login kenny loggins is uh is very happy with that variable name but using that variable name would put us in the danger zone yes i'm unreasonably proud of myself for that okay uh so this this then should do what we want but i need to console log this to make sure that it's actually giving us and we also need to call it checkpoint i don't know if you're calling it yet what a what a great idea oh please okay all right so now we we have actually called the thing and in the console magic auth is logged in is not oh sorry i forget um sorry it's not magic. just magic that user my bad oh magic.user okay so here we go and out to login we go awesome love it all right so now if i if i log in again off to the email here i'm logging in and now we're logged in and when i refresh it doesn't bounce me out so and it should show is logged in as true it does all right okay so this is this is pretty straightforward i'm feeling pretty good about this uh the i guess one one thing to point out here is that we are building an app now that is completely dependent on on javascript um because without the javascript we won't be able to run these checks is there a way with magic to do that on like can i check it in a serverless function or things like that where i can check whether or not somebody is logged in without the presence of javascript that's a good question check whether or not the user's logged in without javascript we i i don't think we have server list functions capabilities yet but that's a great question and i i would love to ask um how would that work you know so so the way that it works in in like mo in like say apis for example is i would have a token and i would send that token with a request to a serverless function as a header or as a cookie or something like that and then um i either get redirected if i'm not authorized with a 401 or i would get sent to the page that i'm allowed to see with the the presence of that that token and so um like on netlify we do that with cookie based redirects where you can check for the presence of a cookie and then the the if you don't have the cookie you just automatically get redirected away if you do have the cookie then you can go through a serverless function to validate that your cookie is still a valid one and then return the page or um you can also just do it with like you know a serverless function to an api call so in magic's case if i have my token that we generated stored in local storage or something i could hit magic's api with that token and say hey is this user is this a valid user token and they could send back yes and then we could redirect to the the profile page um there's some some some ways to do that but yeah my guess is that there's probably an api in magic because if there's a js sdk it's probably calling that api for us that we could hit from a serverless function to um show or not show that profile page yeah i'm not i'm not sure but the the the problem that we're trying to solve here is that when we go offline and we do click like log out we still want to be able to log out right yeah so okay so if i if i log out here and i go to profile it should redirect me after a moment oh i don't think i don't think that log out is working is it is it just magic dot user.log out yeah okay so this yeah all right so there there is our uh our user is now logged out if i try to go to profile it lo it bounces me out but if i disable javascript um and then i go to profile i'm in the profile i see okay the way that uh the way that client-side apps handle this chat is to load the user data using javascript as well so basically you can get to this page but there's nothing here um and in order to access the page you have to enable javascript which means that the auth checks work so that's the way that you solve this problem in client-only apps and that's a really standard practice like a lot of the dashboards that you'll visit on the internet are using client only um that's why if you try to navigate like a dashboard with javascript disabled it's usually just going to show you a message that's like hey this app requires javascript it's because of stuff like this i see okay cool well i will i can follow up with you on what that you know is available regarding that yeah so in this particular case we will just keep javascript on and now we have the ability to uh to log in and we'll protect our profile like so awesome okay so now that we've got this can we show some some user specific data like i'm i'm going to make the assumption that the only thing we know is their email address yeah yes so um we have a method called you call magic.user.getmetadata and the only metadata that magic creates for the user is you know their public address um and that's that's pretty much mostly it um yeah and we also create an issuer so let me tell you all what that is so the issuer is pretty much the decentralized id of the user um so if developers are in court like implementing magic um on their server side uh this would be the id that you you would use in your database as the user id the issuer because that never changes it's unique every yeah person and then we have public address um i mentioned this before it's the authenticated user's public address um or public key and yeah this is cool because this value is associated with the ethereum blockchain the ethereum blockchain okay yeah so it's pretty much just yeah associated with that so i i know exactly zero things about that um let's see i typo this is it metadata with no capital d um with cap yeah with no capital d okay here's our metadata so now we have an email we've got an issuer we've got uh i haven't enabled multi-factor auth i have not set a phone number and i have a public address so okay great so each of these things is something that kind of identifies my user inside of magic and there's there's the personally identifying information that i've supplied but nothing else am i able like if i'm an app developer i want to add say somebody's name can i add it here or do i have to track that separately you would have to track it separately got it so basically you're providing like you're providing what i need to say that this person is who they say they are i'm responsible for tracking any other details that i want that's correct that makes sense got it okay great so how um so if i want to use this then what i can do is i can just break this down and say i want their email and i think the other thing that's in here is the public address okay so then i can uh we'll go document query selector uh email and then we can do the same thing for the public address and we should see both of those things show up yeah so i i understand you um you don't know much about like uh the ethereum blockchain yet um i actually i'm wondering when are you gonna fall down that uh web three rabbit hole uh i'm i'm still doing the the the watch and watch and listen thing right now um because i honestly just don't have time to actually dig into any of that yeah for sure so chat if you've been paying attention what i just did is i i wanted to show so here i have access to my own identifying information uh if i disable javascript and i reload this page i can get the page but i can't get the information so this this is kind of what um what we're talking about by making a client only so that's uh that's kind of the approach that you take there if you want to make if you don't want to build out the server side of building a secure app yeah for sure awesome so we have our login page our profile page and i guess now let's look at how the logout works yeah let's dig in here so we can get into oh i don't even have a log out page where did this where did that come from how did wait what was that the thing that we accidentally removed earlier maybe did we did we fully remove it i don't think where does the stage come it's my fault let me hold myself together there's no page sorry there's only a link and it's going to be in the header okay okay great so there's there's no page there's only a link good yes so um in here uh we're going to use um another method of magics called um log out it's pretty much called lookout um so what we want to do is add i guess we already have um the log out navigation link and now we want to make sure yes so when they click on it we want to call let's see magic.user.log and the same way that we think all right yes async again like all the other methods okay so we're gonna await magic.user.logout right yes okay and then we can send somebody to window.href and let's send them let's send them to the homepage right like after you've logged out because if i if i click the logout button i don't necessarily want to go straight back to a login form that's true and so now what we should see here is that if i click this log out button it should remove my access it didn't do the thing oh it didn't do the thing because i didn't reload hold on nope it didn't do the thing because i did something wrong let's see cannot read properties of null document.queryselector logout what am i doing wrong chat window location href that's one thing that i did wrong what else because it's not even handling my cannot read properties of null reading event listener you exist don't you lie to me document.queryselector okay let's okay so let's make this problem smaller we're going to get the log out link is going to be that and then we want this log out link dot add event listener and in between will console log our logout link so that we can verify that it's actually it's not picking it up why aren't you picking it up oh look out id equals logout query selector logout what have i done here does your script need to come after the markup it sure does oh smart yes absolutely it does because we are trying to target something that won't have been rendered into the dom yet oh good catch that would have taken me way too long because it's not async and i am so used to operating in like fully async mode that that wouldn't have yeah okay good good thank you finger guns all right um so this is no this is great and now if i try to go to profile absolutely not you can't go there but i can go to login and i can log in and it pops that up go back over to my email here we go i'm logged in now i can see my profile i go to home i go to profile [Music] right and then here's my profile if i log out try to go to profile absolutely not we did it awesome this is this is really exciting and we're i mean honestly this went even with me not being able to get the in the dependencies installed and having to take a complete left turn into using a different code base and even even with uh with some side some side tracking in there we were able to get this whole thing built way faster than i would have expected we're we're not even in an hour yet and we've uh we've managed to get this whole thing kind of up and running so from here everything else that happens is building your app not necessarily working worrying about um that's pretty slick that feels pretty good so what what else like is there anything else that you wanted to show in terms of functionality here uh within this app or is there is there something else you want to dig into um no there's there's pretty much something else i think i was afraid that this is going to take way too quickly because template with magic is super easy um i guess the next challenge would be for you know developers to um ensure that the navigation link uh you know displays the right links depending on yeah okay let's actually let's do that so here's here's what we can do is um we don't need that anymore because we know that works and what we can do is uh let's go with a function called update nav and that's that's gonna be an async function um and i'm going to let's add is there like a hidden let's see so we'll just add a hidden class of uh display none here and we're gonna use that to hide some of the the things that we know should only be shown when you are authorized yeah so let's just figure out so by default the only thing you do is look at the homepage we will then use javascript to uh to show those things and did that work let's see how do i get don't know how to get the sas to recompile so i'm going to stop and restart and maybe that'll do it um i think is i just need to do it in the css maybe where did these colors even come from let's take it out of here drop it into here does this one work no okay where are these colors coming from i'll tell you what i can do is i can just drop it right in line yeah uh so let's do it like this okay now there we go all right when in doubt put it all in the same file then in here in our update nav function which i'm going to call before i forget we um can how so i need to check whether or not they're logged in and we can use the same logic from magic which is await magic dot user that is logged in is logged in okay and then we can say if is logged in we want to show why don't we make a list of our links here we've got our profile is going to be document query selector how do i want to do that let's go with let's use a let's use one of these that feels like it's probably fragile but it's going to do it's going to work for now um this is something the css attribute selectors actually we did a whole session on this with michael chan that you should absolutely watch because it was so much fun go uh go check that out um let's see there's a question here too can we make it redirect to a page when clicking on the magic link like a callback url uh or should we always come back to the original tab that's a good question um is there a way to customize the behavior of the login like can i can i put in a callback function or anything yeah you can definitely put on a callback function um and like have the user be redirected um somewhere else other than you know um that page so if you um go you you would need to add it in yeah so let's like look it up real quick uh i just found yeah there's like a redirect uri very that's what i was looking for yeah you add the um key into the login with magic method got it got it got it um oh and then at the and then at the url that you redirect to you need to call login with credential to make sure that it actually finishes the login yes got it cool very cool all right and then i see some other things that are kind of exciting here like log in with sms that that looks like a fun thing that uh we probably won't have time to look at today but is uh is it as easy as the email was yeah it is just that like nod it's gonna be great don't worry um okay so if we've got our profile then we can get login and we can get log out and then so if is logged in we want profile uh class list add or no remove hidden and then we want to do the same for uh log out but for login we want to add the class and then down here we're going to do the same thing in reverse whoops copy paste and theoretically speaking what will happen is uh if i've done this correctly which it looks like i didn't can't read properties of null classlist which means it is href login hr oh logout is not that one's gonna need to be an id and now we see login aha all right so i can log in i'm gonna log in yep that was really clean can't wait to see and then click the button look at it all right so this is great this is doing exactly what we want um and this is so this is the sort of thing that like what i like at no point during this process did i have to try to wrap my head around authentication flows or things like that well so i love oauth2 i use it all the time but the challenge with oauth is that when you do it you're thinking about okay so i've got i've got my app and then i've got this app over here and then that app is going to call callback function with a token and then that needs to do this thing and then that's going to give me an actual token and i need to save that and and you're kind of doing these these architecture diagrams in your head which is fine it works and and usually there's a code sample that you can just copy paste and be on your way but what i like here is that you've you've taken a similar flow which is you you're saying give me your email and then your your password is your email so i go to my email i click the thing to say yes this is me and then you've abstracted away that like callback cycle where you kind of get a temporary token and then you exchange that for a real token and now you're logged into the app um so i just get to say logged in not logged in continue with my day like that that's a really really nice flow and just sort of looking at it here like this is pretty this is pretty sensible code like is this logged in i am logged in i am logged in show me these links and hide these links otherwise show these links and hide the other links and the same thing here like do i want to log out great hit logout do i want to log in hit login right like we're we're in pretty solid this is this is great this is it's it's intuitive i understand what's going on it's low impact because i as the user immediately figured out what was going on i went and i logged in i never had to reset a password i didn't have to figure out where i was going to store that so yeah i kind of i dig this i'm a fan um what's up alex and friends you just missed us building a a passwordless off app so so why don't we just demo for everybody here everything that we've done so i'm going to log out okay so we're at home you can see we've got a home link and a login link click login and it only asks for my email address i just realized we should add um like a label um i do wanna i love the whole um um like review you share it on magic i love it thank you one like little knit like uh correction is instead of like a password you have um public and private key pairs so you can see that you can think of that as the abstracted version of the passwords i got you yeah so got my email address i'm gonna put that in okay it tells me to check my email so i am going out here i just got this email let me pull this over so you all can see it and it says click click the thingy so let me pull this over and i'm going to click the thingy and it says you're logged in okay here's our app now we're logged in and uh we built our app to be smart enough to know that we are logged in and now we can see our profile so we can still go to home go to our profile we can see our own data and if i log out gone only only login is back and if i try to outsmart this and go to profile it'll redirect me and then if i if i can figure out wait where's the no that's the wrong button here's the right here's the right button what button am i looking for here there it is uh then i can disable javascript and now i'm gonna hack it i'm a hacker now i'm gonna profile oh no no data no data um so this is this is a single page app with i can enable javascript again reload the page and it's like get out of here yep punk okay so we've got ourselves a uh what i would what i would consider to be a pretty solid app um it's we've got a lot of good things going on in here it is it's secure we can't get to our our private data it was very very fast to set up we did it in under an hour um it's super intuitive i know i know my email address i don't have to look that up anywhere [Laughter] and it's secure because i'm the only person who can access my email address so it's it's um you know not something that can be brute forced or anything like that and if i'm trusting anybody to to be good at keeping people out of my account it's gonna be like i use gmail so trusting that google's probably pretty good at not letting people hack their their databases and that's that's that's okay with me i'm i'm okay with that uh so this is all the things that i like about oauth like using a third-party service for for login without some of the developer setup that i would get if i was if i was going to try to implement oauth on this app i just got to drop in the the magic sdk and i'm off to the races yeah exactly that's really nice it looks like someone asks is the confirmation email customizable and yes it is nice and if i want to do that uh we didn't really look at the dashboard at all so maybe you can give us a quick tour of what we're going to find in here i'm going to clear this so we can see more what's going on so you can see i'm logging in here um we've got well i got some credits we've got users um and the users is that's like me not the are these users on my app or these users on my account users on your app got it okay and if you want users to if you want other teammates to join you and with this you know app you go to the upper left hand corner my team and then you can manage okay got it all right and so i see passwordless auth here yes so that is um we have a passwordless login form that you can use and this is where you can enable other past authentication methods nice okay we've got a social login oh so we can even do the the oauth like if i want to use google or whatever we can just make that happen okay great um then you've got a login form that already does the thing yes that's nice yeah so that's login form and then we also customize all of these things yeah turn on yeah multi-factor good good branding here's the email so we can customize this here oh this is great yeah this is this is wonderful now uh there are a couple things here with the email like if i want to it looks like i can change the color so let's make it like a dark purple um good i save and then i can probably put in a logo let's see if i've got one here um nice there we go save it okay so this so there's light customization but it's not like full i can't get into the html and mess with it um yeah i think for that you would need to contact us to um handle that got it okay so that's more of like an and like an enterprise feature if i'm gonna build my business on using magic then i would contact you and we'll work out the price for me to go in and make it all look the way i want it to look yeah i think for now cool that makes sense um and then it looks like we can we can edit some things so if i and save this and then if i come back out here and log in again we should see all those changes i just made yep so here's my login we can see that the colors change that's that's already cool and then if i come out to my email let me get it open there we go okay so i i didn't read the instructions and so i needed to upload a square logo but this is uh this is great here's my customization we've got some good stuff going on here um i also need to figure out what i did that just got weird because it didn't look like this in the other ones um but still it'll work and away we go tada awesome yeah this is great okay well i think we um we have seen quite a bit here we can see how to how to customize it we got it up and running really fast oh can i share one thing in the settings absolutely you can yes um so as i mentioned before you can you know extend the session of the user being logged in and you can also you also have access control so you can um control who has access to your app just in case you have an allowance of atlas so yeah i think that's really cool and i was actually just going to ask this you can you can restrict it to only a domain so if you're building something for your company you can say only people with a like if for if i was going to build it in nullify an netlify.com domain can build this thing yeah exactly so that's that's very very cool all right uh actually why don't we let everybody try this so so let's let's just deploy this thing yeah um so i'm gonna get at everything let's do that and then i'm going to github repo fork created a fork yes i would good good good okay so now uh now that i have this i can get commit everything and we'll say uh working passwordless auth and then we will get push origin okay then i'm gonna netlify in it and we're gonna see how this goes because i screwed up my terminal i like broke homebrew and a bunch of other stuff so we'll see if uh if this wants to fight me okay but we'll see how it goes i i have faith let's call this passwordless off magic okay it's gonna auto detect everything so we should be in good shape here i'll skip the nullified tommel did it okay so now i can now if i open and we're on the page here it is building and we should be live in just a couple of seconds here we're authentication solution from scratch for your app an authentication solution from scratch i i have built actually you know you i did yeah i built uh like a username password setup and it was awful uh i'm no what did i do oh is something configured that i need to change let's see um it is building to output is public got it all right so let's fix that and we're gonna say build and deploy edit settings it is public not site so we'll save that go back to our deploys let's build it again all right i think it's going to pull from cache so it should be even faster this time or actually it might not a cache because it didn't build it did get the node modules at least so that'll be faster it goes faster if you had bob i found okay um but yeah i i remember back in like the early two or the late 2000s i guess around 2008 2009 i got asked to uh to write an article on security for a really big site and i wrote up like how you could hash passwords and do all these things and then uh it turns out i had no idea what i was talking about and some like cryptographers took a look at it and they were like this is trash and the article was so bad that they had to take it down and i was completely humiliated so i've been really kind of skittish about off ever since then uh but with that we now have a working app look at it everybody oh my gosh so y'all can go and log in i'm not gonna look at the dashboard so that i don't show anybody's email address but uh feel feel free to go check that out it's um this is really exciting i love that we were able to build and deploy an app in just over an hour i think you know minus the time we were talking that took us 65 minutes ish um so this is this is really really wonderful and and yeah like uh like like matt is saying in the chat there's so many gotchas with auth so letting somebody else deal with that so that you know i assume that magic has hired experts on security and cryptography and all the things that need to be done right to handle to handle security and authentication properly i am not any of those people like magic would not hire me because i'm not good at it so why the heck would i build that myself when i could trust you know experts at other companies to do those things for me um so yeah i'm really really excited about this so where should somebody go if they want to learn more like what resources do you recommend or or where should somebody take a look if they want to go further with magic and passwordless off yeah for sure our docs um has like most of the answers um that they have about how you know the ins and outs of the logging in method works um and definitely like in the docs you can see the guides to the upper left hand corner this is uh we have like a variety of guides um integrating with like jam stack tools um like gatsby and other things and then we also have like a blog you know and that's linked um if you go all the way scroll all the way down um all the way down in the footer like all the way down here yeah and then you go to social we have a blog that um tells you a little more a bit more about magic and if you have any questions at all in integrating with magic uh feel free to join our community sorry there's a lot of switching back and forth yeah our discord is right there as well yeah if you want to join um we'd be happy all right y'all well uh merry christmas this was so much fun i learned a ton i think we we are at such a good stopping point we were able to make some some really incredible stuff um do you have any parting words for everybody uh any any words of wisdom any any uh any kind of like final this is why i'm stoked about passwordless stuff that uh that you wanna leave everybody with um yeah the one thing the final thing i want to leave everyone with well yeah first of all like i'm i'm so excited about what you built uh it was really awesome programming with you and um magic authentication you know it does all the logging in and logging out um and user management like so easily right for developers um and then there's also a future proof side of things um and you know like if you ever wanted to go into that realm you can talk about it more later you can join the discord server um and yeah there's a lot more to magic than that that's why it's called magic um so that i think that's all i will leave y'all with i love it i think there's there's a lot to explore in this space it is uh it it opens up a lot of possibilities and the thing that i like about it is that it makes it easier for everybody to just go and learn something i find that so exciting i i love love love that it just lowers the barrier to entry to building an app that has an authenticated section and what better way to try it everyone than to go and do some dusty domains we are running an event right now where we want to uh just encourage everybody to build something with that domain that you've been sitting on for a while uh it's for a good cause it's going to go to charity we've got a ton of companies joining in and matching donations so um we've got 80 000 going to charity the charities that we're gonna donate to uh are these ones here um each site that you donate right now is worth 400 to charity so make sure you max out this donation we need to get about 200 sites launched in order to make this work so why not go give magic a try and uh and ship something and you know make some make some money for charity doing it it's a great opportunity to learn something and maybe dust off one of those domains we've got some really incredible stuff coming out uh i'm not gonna pull any of these up we'll we'll keep an eye on twitter we'll do some fun stuff with with some of the creators and talking about these sites but lots and lots and lots of cool things coming in on the showcase with that i think we're gonna call this one done so this episode like every episode has been live captioned we've had jordan here from white coat captioning and that is made possible through the support of our sponsors netlify fauna and auth0 all of whom are kicking in to make this show more accessible to more people while you're checking out things on the site make sure you go and look at the schedule we've got so so so much good stuff coming up uh we are going to get into uh ui problems later this week so make sure you come and check those out uh sierra crosstalk is going to be here and uh and then we've got like automation with n8n we've got slinkety and partial hydration which is going to be really exciting we've got uh you know next and fauna so some database driven next.js apps uh content like if you're a content writer stephanie mario is a freaking genius now that one's coming up in january in february but uh you know like make sure you mark your calendar you can get on the google calendar here or you can follow me on twitch and all of that will make sure that you're aware of when things are going live with that we're gonna call this one uh done and cooked we're gonna go find somebody to raid so chat please stay tuned and we will uh we'll get that right off the ground right now mario chris thank you so much for spending time with us today we will see you all next time thank you you

Channel: Learn With Jason

Views: 1,111

Keywords: Passwordless auth, Maricris Bonzo, Magic Labs, users access, Learn with Jason

Id: lPEPH41NbCI

Length: 81min 3sec (4863 seconds)

Published: Fri Dec 10 2021