Next.js Tutorial - 71 - Securing Pages Client-side

in the last video we had a look at client-side authentication with the use session hook in this video let's learn how to secure pages client-side our example we're going to make use of the dashboard page at the moment even if a user is not logged in they're allowed to view the dashboard page let's fix that let's ensure that only logged in users can view the dashboard page content and if they're not logged in we redirect them to the login page let's head back to vs code and understand how to secure this dashboard page in the previous video we learned about the use session hook which gives us access to the session in the react component that is a good starting point so open dashboard.js and here let's get hold of the session so at the top import use session from next auth slash client and within the component we get back session and loading from the use session hug let's also log the values to the console before we proceed further i want to show what is logged in the console as it is really important so head to the browser clear the console and navigate to the dashboard route you can see here that loading is true and that is pretty much it loading will never become false and the session value remains undefined now to be honest i'm not sure if this is the intended behavior with the use session hook but as it stands we cannot make use of this to secure our page client side well then what is the solution well luckily for us the next auth package provides a get session function which we can use for our scenario so back in vs code instead of use session import get session from next auth slash client the function returns a promise with a session object or null if no session exists unlike the use session hook though we need to maintain our own loading state coupled with the use effect hook to call the get session function on page load so at the top import you state and use effect from react and then within the component maintain a loading state let's call it loading the setter function is set loading and the initial value is true next let's define the effect so use effect accepts a function as its argument and also a dependency array we will leave it empty as we want the effect to run only once on page load now within the arrow function we define our logic to secure this page so const secure page is going to be equal to an async function within the function we call get session this returns a promise so we await it and assign the value to a constant called session the session will be null if the user is not logged in so we check if there is no session and if that is the case we need to prompt the user to sign in so at the top we are also going to import sign in from next auth client and call it within the if block if the user is logged in however so else we simply set loading to false let's also call this secure page function last bit is to render a loading screen while we figure out if the user is logged in or not so if loading return an h2 tag with the text loading of course you might want to display a better loading screen but this text will be sufficient for our understanding let's now save the file and test it out currently we are logged out so if i click on the dashboard button we are automatically redirected to the sign in page i sign in and now we are redirected back to the dashboard page if i sign out we are taken to the login screen again and we no longer have access to the dashboard so this is pretty much how you secure pages client-side using the get session function like i mentioned get session either returns the session object or null if the user is not logged in we can make use of this function with state and effect hooks to check if the user is logged in or not on page load and redirect appropriately now you might ask what if we just hide this dashboard button like how we hide the sign out button if the user is not logged in we can do that and we probably should do that but then a user can manually enter localhost port 3000 slash dashboard and still be able to view the dashboard content that is something we do not want and hence the page itself needs to be secured and not just the link to the page in navbar however as a homework i would suggest you hide this dashboard link if the user is not signed in all alright thank you all for watching and i'll see you in the next video

Channel: Codevolution

Views: 33,950

Keywords: Codevolution, Next, Next.js, Next JS, Codevolution Next.js, Codevolution Next JS, Next.js Tutorial, Next.js Tutorial for Beginners, Next JS Tutorial, Next JS Tutorial for Beginners, Next Tutorial, Next Tutorial for Beginners, Next.js 11, Securing Pages Client-side, Securing Pages Client-side in Next.js, Next.js Tutorial on Securing Pages Client-side

Id: vCpqiRabmDk

Length: 6min 51sec (411 seconds)

Published: Wed Aug 18 2021