Laravel Sanctum/Airlock Mobile Auth w/ React Native

what's up guys Andre here and today I like to take a look at using laravel airlock for mobile authentication if you haven't seen my last video definitely watch that first as we setup airlock for authentication for your single page application in this video I'd like to take a look at how mobile authentication works will be using react native and Expo for this example as that is the mobile framework I am most familiar with note that this will work with other clients as well say a desktop app made with electron so let me show you the working example will make pretty much the same as what we did in the last video except now it is a mobile app so here is the login page it's unstyled as I didn't spend any time styling it and we can login actually let me show you a login that doesn't work and if you login there should be validation and this error is coming from the server now if I give it the correct credentials so Andre and Andre calm password and login then we are redirected to another screen where I am getting this information from the server and we can logout as well and that takes us back to the login screen now if you're used to how any token-based authentication works air lock is no different if you've used laravel passport for password grant types before it's pretty much the same thing you have to hit an end point with your username and password and if those credentials are correct you get a token back which you have to store locally on your device if you want to visit any protected routes you have to pass that token along as a bearer token so let's go ahead and set this up in laravel first and then more work on the react native app so if we go into the docs here I already installed air lock in the last video but there is one thing you have to set up to use API tokens and that is to add this has API token straight on the user model so let's go ahead and grab this and it's going to our laravel app so this is the front end let's go a little back in here and let's go to our user model and I am going to add that trait okay and let's just put it here I have API tokens okay and now if we go into the docs we have to make a new end point because now we're not making use of cookie based authentication so we have to make a new end point that returns the token and if you go down here so while off right here then you'll see there is an example here which will make use of so let's put this in our routes API and then we'll work from there so let's go to routes API oops routes API and let me just grab everything here let's start with the use statements put that here and they already have requests cool and let me grab this whole route and you can put this any controller if you want but I'm just gonna leave it here so this will be our login endpoint if you want you can change this to login but I'm just going to leave it so there's some validation here it checks if we have a user if it doesn't then throw an error and if it does create a token and return it so let's get this working in insomnia first in my rest client and then we'll make it work in react native so let's make a new endpoint here let's call it airlock token and a post request and the endpoint is airlock example dot test slash what was it airlock slash dog in there and it's give us some headers here accepts oops accept JSON okay and let's hit that endpoint without sending anything see if it works sorry that should be slash API okay okay so we are getting the correct response and let's go ahead and pass that data in so we need email and password so let's just add a body here let's do email let's try with a wrong email first on blah blah comm and password is password let's try that okay Oh actually we have to pass in a device name as well so let's go ahead and add that so I'm just gonna hard code this to mobile okay so I provided credentials are incorrect but now if I give it a correct user and this should return a token oops okay I can't type today and there is the token so I like this token to be in JSON format when it returns so let's change that first actually let me show you my database first so the database has this personal access tokens table which we didn't use in the first video because we were just making use of cookie based authentication but now since we're using token based off now this table gets populated whenever we log in cool okay let's change that response so let's returned response something here and then 200 or 201 because we are creating a token it's up to you so we can just return the token here if we want but I also want to return the created user as well so I'm gonna make a new variable here I just move this up for you guys response is this is an array and I want the user so user it's gonna be user and I also wanted a token so token will be talking and this can be token and now we can just put it in here cool so now we should get an array back so let's try this again there we go cool so now if you want to make additional requests we just have to grab this token and we go into my rods API you'll see this endpoint which returns the user but that is behind the auth airlock middleware and in order to get access to that we have to pass along the token so let's try that let's make a new endpoint here say airlock token protected it's a get request and airlock example calm slash API slash user and if I just hit that normally actually we have to add the header first except JSON a oops test okay so that's right but if we pass in the token so if it's go off bear token or you can just set it as a header paste that in and there we go cool okay let's get is working in our mobile app so I'm not going to be starting from scratch I have some boilerplate code available which I will walk through so this is based off another video from Ben a wad where he goes over how to use react navigation and sets up the various screens for authentication so definitely check this video out this is where I learned how to use the latest version of react navigation so I showed you the working out but let me show you the starting app here so there's no communication with the back end yet but it does have these screens available so I have two sets of screens here one set for the office screens and one set for the logged in app screens and they are called stack navigators so I have a stack for the off screens and a stack for the logged in app screens so for the off screen that I have two screens so login what you see here and register is just a dummy screen and for the login screens if I hit login I have this dashboard screen which I want to show the user and I want this information to come from the backend and I have a dummy setting screen and I have logout which will lock me out and set me back to the auth screens so this login actually does sort of work right now but it's just sort of a dummy login and doesn't get any information from a back-end so let me just walk you through the entire code base of our starting point here so back to our front-end so the entry point is app j/s and I am just exporting a provider's file here which is making use of Reax contacts API so if you look at providers which is in the source folder you'll see I am just wrapping the entire applique in an auth provider and that's just so I can share state across the various screens so if you look at the off provider you can see the state I am sharing across the entire application in here so I'm sharing a user object I'm sharing a login function and I'm sharing a logout function so by default the user is null as you see here and when we log in we are just faking this user and secure store is where I am storing the user and the token there's one built in to react native called async storage but secure store is part of Expo and as the name implies it is more secure it pretty much has the same a P I so I decided to go it's a secure store instead so when I log in I am setting the user here and I am also setting the user in a secure store and I'm logging out I am just removing that key now if you go into routes j/s here is where I am checking if the key insecure store exists in this user fact hook which is pretty much the mounted hook and if there is a key then we just log in and if you go down here I have a loading spinner here and here is the logic to check if or to check which stack to render so if the key exists like I showed you up there then render the logged in up the logged in app stack and if not then render the author stack so yeah that's pretty much our starting point again be sure to check out Ben's video if you want a better understanding of how react navigation works okay now let's get started the first thing I want to do is install ax cubes because we're gonna be making HTTP requests so any is work yarn here so yarn ad Axios okay and let's go ahead and make a request in our off provider so instead of using this fake user here we want to get an actual user so let's make a request actually it's import Axios first so import Axios from Axios let's go ahead and set the default URL defaults stop base URL equals HTTP today I'm sorry it's airlock example test ok and let's go ahead and make a call here so axial start get sorry it's a post request to slash API slash airlock slash token like I showed you earlier and we want to pass in some data here we need to pass in the email and I'm gonna hard code it for now so Andre Andre calm and then it'll wire up to the form in a second password is password and then we can pass in the device name from here which is what I'm gonna do but we can we can also just hard code it from the back end if that's the only device name but the way I have it here I'm sorry I'm passing it in from the front end okay and it's called then or you can use async/await if you want let's grab the response and like I showed you earlier the response is gonna be an object with the user and a big token so let's grab that let's save it to a variable called user response and let's grab it so email I just want to store the email like I have in this fake user so that will be response data dot user email or you can D structure if you want let's not leave it like this and the token is gonna be response data but token and we can catch the error as well and we'll do validation later on but for now we'll just console.log error that response okay that's also console.log the user response here just to see if we're doing everything correctly so I'm gonna comment this out to for now so I just want to see if this works so back to our mobile app so that auto reloaded and I just hard-coded in my credentials so that's best login and let's check the console and let me see if there's anything here so it does seem to be working cool so let's continue so let's uncomment this and let's move this into here okay and let's get rid of this console log instead of the fake user we are setting the user to the user response and in our local storage or secure store let's pass in the user response here and we no longer need this fake user information okay so now let's see if this works so again it's still hard coded so if i refresh and press login there we go and it see if a logout still works and it does cool okay now let's make sure that it's actually getting the username and password from the input here so let's go to our office stack right here and in our login screen it's add some new stay here so we need the email and the password or the user name in the password most like the email passwords so Const email sent email equals use state answer to an empty string or know by default empty string is fine let's do the same for password password password okay and let's make sure that import you stayed up here and now as you can see I have some comments here for unchanged text we just wanna set the email here to the text so set email for this one and I'm also going to add text content type to be email address this is like input type equals email in the browser and by default it capitalizes the first letter so I'm gonna set that to false or F yourself to none that should work okay and do the same for our password here so I want change text this is going to be set password and now when we log in we want to pass in the email and password of a certain email password and it's make sure to accept that in our author provider so in the login let's accept the email password you and now we can just use that so instead of this suppose to email and password actually we don't even have to because that's implied so let me just do email and password okay let's see if this still works so let's try a wrong login first okay and we'll take a look at validation in a second right now if I do this see if this works okay cool so if you look at this user this is actually grabbing from local state because we said it when we logged in so this is now actually getting it from the server I mean it does when we log in but I want to add another field here that actually grabs something from the server and displays it here so let's go ahead and do that so let's go to our app stack and let's just add a little text in here and so say let's put their name in here user from server and then we'll put their name in here okay see if that shows okay cool so let's add some state to store that and to set it so Const name set name equals you state and certain all by default and it's make sure to use state up here and what I want to do is just make another Axios request in a mounted hook or a user effect hook so let's to go ahead and do that spit underneath here in the dashboard screen so use effect and specify in the callback and the second parameter is an empty array okay and it's gonna grab the imports from Axios from here and grab this as well so I am duplicating this base URL you should find a way to store Axios and base URL globally but for now I am duplicating code and here we want to make a request to the slash API slash user endpoint so if you remember this is protected by airlock and we want to get the logged in users information so let's go ahead and do that so Axios get slash API slash user and then response we're gonna set the name to response data dot name and then we can catch as well here I am gonna console log error dot response okay so if I try this this is not going to work because we are not passing in the bearer token so if I try this I have to import a user fact up here first hold on so I use effect okay let's try it again okay cool let me just refresh this and let me log in again and if you look at the response coming back it is a 401 which is unauthenticated because we're not passing in the bearer token so let's go ahead and do that actually let's set this name while we're here so down here I just set this to name okay and to set the bearer token we just have to tell Axios to pass it in so actually all start defaults the headers not calling an authorization actually that should be an array okay and that's gonna be a bear talking some bearer space and then let's grab the users token so user dot token okay so if I did this correctly then this should grab the information from the server and if you look there it did work so just to be sure it's getting it from the server let's go to our database and change my first name so for other users and you probably saw that but every time I log in it creates a new token here and we'll take a look at logging out all right after I do this let me just go back to users here and change my name to more ease save that and now if I reload my app that should change as well so let me just log in again and there you see the updated name cool so now let's work on logging out like I just showed you we have these tokens every time someone logs in and when we log out we want to delete those tokens so if you look at the docs you'll see some code that shows you have to do that so revoking tokens so you can either revoke or delete a specific token or you can just delete all of them so let's go ahead and make this end point in our laravel app so let me describe that let's go back to our code so we're back end and it's at a log out round here so that it right here and it's a post request to slash login so B slash API slash log L I mean actually you know what let me just duplicate this row over here because we need in the middle aware as well it's going to placate this and change it to logout change it to a post request and let's delete the tokens so we request user quest user like this and we can just return response say delete it or logged out and 200 okay so now in our front-end let's go ahead and add that so back here to our off provider we want to make a request to that endpoint and then do this if it's successful so I'm gonna grab this Axios call so let me just grab all of this space that in here and there is no params it's going to be slash API slash logout and we don't need all this so what we do need is to put this in here once the promise results and once logging out is successful and we can just leave the catch there and we also need to pass in the bear token as well so let's grab this again I'm repeating code there should be a better way to do this but I didn't spend too much time researching how to do that okay so now if I log out and see if this works so if I log out let's see if it leads the tokens so log out goes back to the login screen and let's check our database and they should be gone when i refresh and they are cool so now the last thing i want to do is just add some validation errors in the login page so let's go ahead and do that so back to our code so we have to set the state in our off provider and then we can grab that state from the author stack so let's add a new piece of stay here called error or error message error sign error error and in our catch when we're logging in we can set the error here so if you console.log the error response you'll see that there are a bunch of keys corresponding to the errors and I showed this in the first air lock video you kind of have to drill down to get the first error so I'm not gonna go over that here I'm just gonna do it quickly so you just want the key so object at keys error that response data errors and we want the first one so that's gonna be the email and then now we just want to set the error message to error top response data errors key in the first one okay so let's save that and now if we go into our office stack we can grab the error from there so if we go up here we can grab the error here from our context and right here above the first input is where I want to put that error so let me just render something here to see if it looks okay and then we'll add the conditional on it so let's make it red and it's put a margin bottom on it too margin bottom 24 let me close that text error here see if that looks okay okay and now we can put the error in there okay and we want to only display it when there is an error error so let me just add a conditional here so I don't have prettier setup at all and I definitely should so I got into all this formatting error and okay and now let's see if this works so I'm gonna give it a incorrect login and we should see that error and it doesn't work okay so I had the square brackets in the wrong place so let me just add that close that one save that and now let's try again oh yeah and we also have to expose it up here so after the user I will expose the error as well and now I go back to my app if I log in there we go cool and if I try logging in they should work awesome so there you have it guys a look at using air lock for token-based authentication and an example using react native and expo please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one Kate thanks bye [Music]

Channel: Andre Madarang

Views: 16,192

Keywords: laravel airlock, airlock laravel, laravel airlock mobile, laravel airlock mobile authentication, laravel airlock token, laravel airlock token authentication, laravel airlock auth, laravel airlock vs passport, laravel react native, laravel airlock react native, react native airlock, laravel react native expo, react native expo laravel, andre madarang, drehimself

Id: o1iSwdjBt-Q

Length: 30min 29sec (1829 seconds)

Published: Fri Mar 06 2020