Passwordless authentication with Next.js and Magic

hey welcome to this video my name is malik today we are going to build a simple next chase application with faster less authentication magic is a platform that provide you some authentication method so basically you can log in with entering your email or you can also use some social authentication methods like google login and github and lot of other social authentication [Music] okay so we have simple login form so what i'm going to do do a little bit of styling so it always shows me something so our handle submit function works so what we have to do is we need to get the email address great we have the email now [Applause] yes so when you log into magic you will see here you have your api key and secret key and then you have free 85 dollar credit so that means 10 000 logins if you go to users you don't have any uses but you will see when you get users in order to start using magic we need two packages so one is magic sdk and other one is magic sdk slash admin you do and yarn add magic sdk and then the other one that we need is magic sdk yeah admin add add magic sdk dash admin we will need three environment variables so basically what we need is magic secret key token secret and publishable key so as you see here next public dash underscore magic publishable key that means when you add next underscore public in your environment variable this variable is accessible in the in the client side also got in v file publishable key here and then i will get also the secret and the token secret it's for our tokens to save in the cookie so you can add whatever token you need here could be something wrong we need to pass this email address to magic and in return we get a token from magic [Music] [Music] all right so basically i created the here what i did was create the magic secret i got the secret that from publishable key and i'm making this call from client side so i'm only going going to use the next public key and then i initialized magic with using the secret and then then we have this uh token variable that we we are making a api call to magic that magic we are passing email to magic link and this will send user an email with the login login email and we will get back a token so if i console we will see a token back so if everything went well we can see some something here i'm going to start that again okay so there's a mistake so please handle something yes so we get this pop-up from magic so if i go back to my email address in my email i get this magic email so if i click here so it says successfully logged in and if i go back here it gives me this token back some hotel functions so we need to create it inside the hotel folder then if you go to cookie you also have the user token here so we are done with most of the authentication part but now if we go to the profile page even though if we are not authenticated you can still visit to this page so what i want to do next is create a function that get the cookie that we saved and then depending on this cookie we [Music] redirect user to the profile page so let's check our page if this works now we get an error here click login session okay api get logging okay we need to import this so where is it transitions i think we still have cataloging session is not a function of course all right so see if i go to the profile now it redirects me to the if you go to the index page redirect me to the profile page but if i log into the if i go to the page in private window it doesn't redirect me here so if i go to profile stays here so yeah basically we can do the same in the profile page yep now if i go to the profile page without logging in it's redirecting me back to the login page do do so let's create um the in the profile and let's create a link to lookout we'll update documentation to look and out i'm going to delete all of the rest all right so it's time to test so it did not it did not create delete the cookie user talker okay i think i didn't change my uh screen before so i don't know if you saw my or the code that i wrote all right so let's see why if you look i'm going to restart the server all right it did not delete it [Music] okay i missed something on removed open cookie function i created i got the cookie i but i did not set the header so if i update this to set okay now should work it doesn't work now nice so basically this is everything about the about creating authentication passwordless authentication with the magic link and xjs so as i say there yeah is another part that we can show some information on the on the profile profile page so let's let's do it so i'm going to log in first this is our complete application and yeah thank you for watching the video you

Channel: FrontendOps

Views: 762

Keywords: next.js, magic.link, reacthooks, nextjs authentication, passwordless auth

Id: BFrLgR-ItBA

Length: 26min 55sec (1615 seconds)

Published: Mon Nov 01 2021