Next.js & Identity (auth) Tutorial #10 - Client Side Content Guard

Key Takeaways

all right then so now we have the function guides to return the data if we're logged in if we're not logged in we get back this status code and this message right here so what i'd like to do inside the guides page is to output the content the guides if we have them and also output an error if we have that instead if they're not logged in so i want two pieces of state one for the guides and one for the error so let's create those first so const and then guides and set guides and we're going to set that equal to use state press this to auto import it from react and to begin with this is going to be null when we first load the page we also want one for the error so const error on set error and we set that equal to use state again this time this is going to be null as well to begin with all right so we have this now what we need to do is update these values dependent on the result of this so right here what i'm going to do is delete this and open up a function instead so right here when we get the response what i'd like to do is just log this to the console so console.log response like so and if i save this and refresh we can see right here the response object yeah now inside this we have an okay property now notice in this case it's false and that's because we're getting this error status code back right here so we know from this property okay being false that we don't have the guides and there was some kind of error an authentication error in our case so we could use that property to determine that on the front end and if this is false then we can throw an error so that's what we're going to do we're going to check response.ok so i'm going to say if and then not response dot okay and that means that if this is false then it's going to fire this block so if it's not okay the response we want to throw an error and that error is going to have a message and i'm going to say you must be logged in to view this content now you could use the error message we get back from the response but i don't want to have to pass the json to do that so i've just made up this error message right here now since we have an error being thrown here we can catch that in the catch block so at the end i'm going to tack on a catch method and this fires a function if an error is thrown and we take in that error as an argument to that function now with this area we can do something and what i want to do is update this error right here so i can use set error to do that and i'm going to set it equal to the error object we get right here dot message and the message property is this thing right here so all we're doing is updating the error state with this message if there's an error if the response is not okay so that we can show it down here in the template later on now if we do get an error at some point i want to set this to null it's not already to begin with but they might log in and we might update that later on and if they then log out i want to reset this back to null so what i'm going to do is set that to null right here so set guides and then no like so okay so that's the error kind of sorted we've not output it yet but in terms of the fetch that's all we need to do now if this response is okay then it's not going to fire this if block and it's going to carry on instead and at that point i want to return response.json so we can get the data because if it's okay we obviously have data on the response so at that point this then method is going to fire now we don't just want to log out the data to the console in this case we want to update the guides right here so i can say set guides and then pass in the data to do that and i also want to reset the error so i'm going to say set error and set that to be null again because if we first land on the page and we try to make this request without being authenticated we're gonna get an error right here right because we set it over here now if we log in and stay on the same page it's gonna try to make this fetch request again and get the data back i then don't want to keep the error and keep showing it on the page so i want to reset it and that's why we do this all right so now we're setting the error and the guide depending on the state of this fetch request now what we can do is check for those properties inside the templates and output them if we have them so let me get rid of this h2 and instead we're going to do a few different lines of code here the first thing i'm going to do is check for auth ready because if all thread it is not true then we're not going to show anything yet and at that point maybe we show something like a loading screen or a loading message so i'm going to do curly braces and say not auth ready so if authentication is not ready yet then i'm going to output a div that just says inside loading so until we've established that identity connection we don't know really whether we're going to get the data successfully or not and during that time even if it's only for a second or a split second we're going to show loading all right so the second thing we want to output if we have an error is the error so error and and then we're going to output a bit of template so parentheses inside here i'm going to do a div with a class name and i'm going to set that equal to styles dot error like so now i can access styles because i import them right here from the guides module which is inside the styles folder over here now we'll add in the error class later on but for now let's just give it that class and close off this div as well now inside this div i want to output the error inside a paragraph tag so error like so so only if we have an error then we'll output the error all right so finally if we have the data i want to output the data so we need to check for the guides and then double ampersand and then we want to map through the guides because it will be an array of data and we'll take each guide as we map through it and we'll return some template for each guide so the template i want to return is going to be a div first of all so let's open and close this now this needs a key property because when we map through data and output a template for each item in that data each item that we output has to have a key property so that react can keep track of them so the key is going to be unique for each one i'm just going to use the title because the title of each guide in my case is unique but probably normally you would use something like an id property all right then so i'm also going to give this a class name and set that equal to styles dot card again this class doesn't exist yet but we'll make it later all right then so inside this we'll do an h3 and that will be for the guide title so guide dot title and then under the h3 i'm going to do an h4 and that is going to say written by dot author because we have an author property on each guide and then finally i'm just going to do some lorem ipsum right here but to be honest that would probably be some actual real data for the guide if we had it so instead of just having a title and an author maybe it would have a content property as well and we'd output that right here all right so that's pretty much it i'm going to cross my fingers now and hope this works so you see when we first load this we're not logged in and we get this error message back right here you must be logged in to view this content so if i refresh let's see if that still works yep we still see this message if i log in so mario at the code at netninja.com and then test1234 i'm gonna log in hopefully we're gonna see the data now yep we see all of that data and if i refresh we should see all of that data as well if i log out then we should hide that data and it says you must be logged in to view this content awesome so this is all working the only thing we need to do now really is style this content because it looks absolutely pants so let's open up the guides module and i'm literally just going to copy these from my github repo over here woohoo so let me copy all of this stuff and don't forget you can get this by going to the course files the link is down below choosing lesson 10 and then finding the guides module css file so i've copied those i just want to paste them over here like so save it and come back over here okay so that's the error message that looks a bit better and if i log in with mario the net ninja code uk test1234 i'm gonna log in and now we can see they look a bit better as well awesome so everything now my friends is working now finally i just want to deploy this to netlify to make sure everything works up on the web as well so let me open up my terminal over here i'm going to open up the second terminal and i'll say git add then git commit m and we'll say identity function added for the message press enter we need to push this up now git push origin main once we push that up to github it's going to trigger deployments on netlife forest and if i refresh over here hopefully we'll see that process starting yet we do awesome so let's just wait for this to build once that's done we can open this up in a browser and we can try this out i'm going to go to guides and you can see i'm not logged in so we get the error message if i log in now i'm going to say mario at the net ninja code uk and then test one two three four i'm gonna log in and then hopefully we should see the content and if i refresh we get that content as well awesome all working