#4 - Laravel + NuxtJS social authentication with socialite: logging in at the frontend

hello everyone welcome back today we're going to look at you know actually logging in the social authentication and we're also gonna like add these three buttons you saw earlier on in the first episode so to start that off we're gonna implement FA icons so you can find those on this side and they just head over to download start actually but you know we can't use this in next so I'm just gonna cheat a little bit and copy this over from my setup and then head into my editor here go to the Knox config and then over here we're gonna actually in the link so here gonna paste this in and that is our FA icons so I'm gonna leave this in the description so you can copy it and what we also want to do is go to go at an EMV so I'm gonna do that load of plugins alright so here so a and B because we're going to need this later to define our base URL for the API endpoint so base URL going to be either process Oh TMP dot base URL or just a static string art coded in the JWT autodesk.com slash api so that should do the trick now if i just restart my server alright so that's going to boot up alright so that has started my server again so what i want to do now is create a new component which is going to just basically show our buttons so we're gonna call it social login the view and template of course over at a class all social login and inside of there I'm going to create a button a class or social login button just Google a trap oh yes login Facebook Oh actually I don't need this hey track I think let's just leave that empty because we're going to attach the handler that's much easier my Facebook was wrong anyway so let's just go to my Google so that is going to be our markup let's copy this down let's have one for Facebook or alright that's the Facebook here like the example I think this was the owner Google forget happen Facebook and then this has to be of course github and this has to be Facebook so if we now want its script so I'm going to have a method here that's going to be social login we're going to pass in a service and then all this is going to do is basically the directors do that back end end point so that's going to be a window that location but a draft then the backticks process dot E and V dot J's URL then we're going to add in the end point so all log in and then the service and that's it for the script so now we can attach the handler so it's going to be a click equals social login that's in Google and then we're going to copy this edit here here github and Facebook and now I just want to attach some styling to this so let's see we want we have a social login class style with SPSS so we've got social login display flex justify:center call our white border radius 5 pixels doing something wrong here I think all right so we had this wrong change this over chrome SAS to SMSs my mistake margin left 5 pixels margin right also 5 pixels with a pretty high of 50 own size 23 cursor:pointer and then we're going to have the Google github and Facebook classes so Google github and Facebook so the backgrounds I have these colors on my other screen so I'm just going to poking them over this this one the last one all right so I think that's it for this class so now what we can do is we can actually implement in this you know in this view so what we do is we just import the component down here say import social login from add components social login and then we we register the component so I think I'm going to do this here so to login and then I think we want it right here so above the card so social removing that should do the trick let's see all right so they don't look so good let's see all right there they are we just needed it we just needed to refresh for some reason but I don't really like the margin so I think I'm just gonna remove this all right and then I'm gonna add it here yes let's look at that looks better and if I click here I can just be redirected to the page say for this one that already locks me in but the colors are wrong still so let's go back here swap these around all right yeah that's better and then let's copy this go to register do the same here empty for again at the top oh of course we need to import the components so I'm just going to copy that as well import the components and register it social login right yes that has worked so now we actually click the button and we get registered to this route so we need to of course make this route so what we're going to do is we're going to make another page of course so that is going to live in all folder and social - callback queue so let's create that or you file social - fall back doc you then we're just going to have a simple template I think you will be a will be able to spell this a bit better than me I'm just going to have please wait in here because it's going to load a little bit and lock the user in so that script data a JSON object just object and this without very token or it's going to do this I mean actually if that's available it's going to set it to token if it's not available it's just going to set it to null so now we go so when it's mounted we're just going to call the login function I need a JavaScript object in here open this token and then we're gonna catch this if it fails just push it back to the register page for now error is invalid please try again all right so I think that's it we still need to do one thing though we need to edit the backend to handle this but yeah let's just see what happens so alright render function or a temple of the point that should be fixed now so we now get redirected back to the register page and it says that we are logged in which is correct because we're gonna fix that up right now but first in the backend I'm going to take this redirect so let's put this in oh gosh those slash shows or social callback we forgot that so just gonna go actually so we need to go to the login controller and in there we need to go to let's see login and then above here we're gonna come login okay we're going to say it requests okay then we're going to this all set token and we're going to set it with that token and then we're going to say user because this or authenticate so it's going to try and authenticate with that token if there is a user we're just going to copy the response success response except for actually you can also pass in the token just for good practice requesting for token data is then the request user all right this looks good so now if I try it again please wait and then I'm login so that works great I'm gonna sign out again so yeah I think that's it actually for this episode in the next episode we'll just look at handling backhand errors and redirecting to the register page when we have a register error to the login page when we have a login error and actually displaying the error message so yeah thank you for watching yeah and hope to soon in the last episode of this of these series so yeah bye bye

Channel: Coders Hub

Views: 3,975

Keywords: Laravel, Nuxt, Socialite, Laravel Socialite, Laravel Nuxt, Nuxt Authentication, Laravel Social Login, Codershub, oath2, oath2 nuxtjs, coding tutorial

Id: zLj3ZQmOUX0

Length: 13min 47sec (827 seconds)

Published: Sun Apr 28 2019