EASIEST auth in Next JS 14.

all right guys in this video I'm going to show you the easiest or provider to set up and get up and running in next js14 now this is just my opinion okay and in my opinion the easiest or provider to get up and running in nextjs is orzero now if you disagree with this that you don't think orzero is the easiest provider to set up in nextjs then that's absolutely fine if you prefer other providers or rolling out your own authentication that's Absol fine this is just my opinion and with that said I'm actually going to show you how easy it is to set up Al zero in a nextjs project and as a side now I actually have a tutorial if you want to learn next o I have a tutorial on next o with the credentials provider so you can check that out by clicking the link in the card above now I've already got a project created a Bare Bones nextjs project and I've already created a dashboard page which we need to protect so we can see here this page needs to be protected I've already got the app running in my browser if we try and navigate to/ dashboard we can see we can easily do that because we have no or integrated into our project yet so the first thing we need to do is head on over to or zero and sign into your account or register for a new account then we need to head on over another dashboard here to Applications we need to create a new application I'm just going to call it forth 02 and it's going to be a regular web application so let's hit create on this then we can use a quick start guide and we can select nextjs for our quick start guide however before we take a look at this quick start guide we need to head on over to the settings tab and scroll all the way down to the application Uris and specifically we need to add an allowed callback URL and an allowed logout URL now we need to add in here for the allowed callback URL Local Host 3000 SL API or/ callback and for the allowed logout URLs we need to add HTTP Local Host 3000 so then we need to scroll all the way down and hit save changes so then we can start integrating and linking our orth zero to our next JS project so let's scroll over let's click on to the quick start guide and if we scroll down all the way down to the install or Zer nextjs SDK we need to do this but the steps just before this outline exactly what we've just done we've added a callback URL and a logout URL so so that say we need to install then in our next shares project the or Zer SDK so let's copy this command here and head on back to our code let's paste that in our terminal here to install the or zero nextjs package then let's head on back to the quick start guide and we need to add some environment variables now before we do this we need to run this particular command here to generate a random 32 by value so let's copy that command paste it in our terminal so we can see this is our generated string here then we need to head on back to the quick start guide let's copy all of these environment variables and head on back to our project and we need to create in the root directory of our project we need to create a new file called n. loal paste in all those environment variables in there but now we need to copy the random string that was just generated in our terminal and use it for our or zeroc secret so let's paste in for our all Zero Secret like so so if we save our n. loal let's head on back to our quick start guide and if we scroll down we need to add the dynamic API root Handler so we need to add a new file at app API z/ rot.js here but we're going to use typescript so we're going to have root. TS let's head on back to our code then and implement this within the app directory let's create a new file here and a quick way to create a bunch of directories with a file inside a nested directory is to add a new file and then just type out the directories we want to create along the way so we we want to create app SL API or/ and we want or0 in square brackets here and we want SL root. TS so if we hit enter on this we can see the API the orth and the orth zero directories were all created and root. TS is inside the orzero directory now let's just copy from the quick start guide again we need to copy import handle or from the or zero package let's copy this and paste it in for our roots. TS file so once we've done that again let's head on back to the quick start guide and it says now we should be able to use the login and logout URLs however before we do that we need to scroll down and add the user provider to our main layout component so we can import the user provider within our layout. TSX so back in our code then within our app and layout. TSX we just need to import user provider at the top here and render the user provider wrapping the body tag now we can wrap the body tag or the HTML tag it doesn't really matter but we need it to wrap the children that's the point here it needs to wrap any children that have been rendered within our Roots layout from here then we're in a good position to actually test our authentication So within our homepage then let's go to app and page. TSX instead up homepage here I'm going to add an anchor tag with an href set equal to API or/ login and the text for this anchor tag will be login now it's really important to note here that we need to use an anchor tag rather than a next J s link tag or a nextjs link component and the reason for that is because our good friend the router cache will mess up our entire or flow if we use the nextjs link component so if we use the nextjs link component the rout of cach is going to kick in and potentially it will show that we're logged in when we're not logged in and it will show that we're logged out when we're not logged out so that's why we need to use plain anchor tags here with that said let's hit save on page. TSX for our homepage and let's test this out in the browser so let's run npm run Dev in the terminal and head on over to Local Host 3000 let's see what happens when we hit login and we're being presented here with this error the call back URL mismatch now this is a really really common error and to fix this all we need to do is head on back to our orzero dashboard and scroll all the way to the top as part of our application and select settings again let's scroll down now to the Callback URL and we can see here I'm specifying https however this should be HTTP because we're not running HT htps on local well I'm not running https on local so that's why this isn't working so I need to specify here HTTP so again if we scroll down and hit save changes then all we need to do if we navigate back in the browser for Local Host 3000 let's hit login again now this should all work and there we go we can see we're presented now with the or zero login so let's hit accept here then I need to enter my login details now I already actually have an account set up when I was creating the demo for this little video so I'm just going to log in into that account but you're going to need to sign up for a new account so I'm just going to log into my test account here and there we go it seems like nothing has actually happened but we are now logged in to our project however ideally it would be nice to actually see some feedback and see the currently logged in user so to do that if we head on back to our code ideally what we'll do is if we're already logged in then we'll redirect from the homepage to the dashboard so we can do that at the top here in our home component in our app page. TSX let's go cont session here and set this equal to await get session which we need to import at the top here from at0 nextjs -0 and because we're using a weight here we need to turn this into an asynchronous function so we can check here if session and session might be null or undefined so we need to use the optional chain here and we want to check to see if user exists on a session if it does then we just want to use the redirect which we need to import from next SL navigation and we just want to redirect to SL dashboard like so so if we take a look in the browser now and give our site a refresh and specifically on Local Host 2000 we can see we're always being redirected to/ dashboard so if we head on back to the dashboard page then at the top of this page ideally will have a logout Button as well and ideally will show the currently logged in users email address so I've already got a default Asing function here called dashboard page and we're going to do exactly the same we're going to grab the active session if there is one we need to await get session then and we need to import get session at the top here from at 0/ nextjs dzer then we want to check to see if there's a session and specifically a user on an active session so within our div let's add to the top of this div if session and optional chain this we want to access user then we want to just render a div and in this div we'll render the email address for the logged in user so to do that we can access it from session. user. email then let's just go Dash and let's add a logout link as well and again this has to be an anchor tag otherwise the next JS rout cach is going to ruin our lives so let's add a log out link here and let's go API slor SL logout like so now there's one last thing before we take a look in the browser there's one last thing we need to do and we actually need to protect this dashboard page so we need to create a middleware file in the root directory of our project so let's go and create a new file here called middleware TTS and we need to import with middleware or required from at or0 nextjs or0 Sledge and we just need to export default with middleware author required and this is a function so we need to call this function additionally there's one last thing we need to do to protect our roots and that is we need to export a const config object with a matcher property now this can either be a string or an array because any roots that are passed to this matcher property are going to be protected and not accessible if a user is logged out so any routs we pass here are only accessible when the user is logged in so of course we need to pass slash dashboard here so this is going to protect our slash dashboard route now one important thing to note here is you may have noticed already in our terminal logs here we're getting this warning it's saying nextjs oror zero is attempting to set cookies from a server component now this is absolutely fine we can actually ignore this message but you have to make make sure that we're using this with middleware author required now the reason this error is happening is because server components can't set cookies but orzero needs to set cookies to handle the refresh tokens and to grab a new token via a refresh token a new or token and this actually happens from the get session of function and specifically if we take a look in our dashboard it's this get session function here which is attempting to set a cookie now this doesn't actually matter we're not going to to get a stale login state or anything like that because every route that we access in our app is first going to go through this with middleware author required from or zero and it's going to set cookies via this function so it doesn't matter that we're getting this warning here and it's actually safe for us to ignore this warning this warning will only ever display in our Dev environment and of course you can actually read more about it by clicking through onto the link and there's an open issue on GitHub as well well I think on the orzero GitHub repository but their recommended course of action is make sure you're using the with middleware author required and then if you are using with middleware author required we can safely ignore this warning message with that said let's save our middleware dots let's take a look in the browser now let's give our dashboard page a refresh we can see we have our currently logged in user let's hit log out and see what happens we get redirected to the homepage let's try and access now/ dashboard and we get prompted to log in so we've protected our dashboard route so again let's log to our account going to log to my test account here and let's test this out for our Local Host 3000 for our homepage we can see what getting navigated back to the dashboard page now there's one last thing I want to do and this is a really cool feature with nextjs and that is streaming so ideally what we can do is if we head on back to our code within our dashboard page instead of waiting for the user session to come back and then rendering the dashboard page we can render the dashboard page first and then stream the response back for the user details now to do this we can use the suspense component from react and ideally though we need to create a new component to handle the rendering of our user email address and the logout button so in the root directory of our project I'm going to create a new folder here called components and I'm going to create a new file in here called user-profile TSX let's export an async function user profile then we just want to copy exactly what we've got for our dashboard we need to await get session in our user profile we need to import get session at the top here from or zero and nextjs orzero then we need to just move this functionality into the get or sorry the user profile function so let's copy this and return here let's just return a div with this user session check and the rendering of the email address and the button now to emphasize the streaming process here I'm going to add a timeout so it just takes that much longer and we can actually see the loading State and the streaming process in action so I'm just going to add here an await set timeout which we need to import from timers SL promises and I'm going to add a 5sec delay so this user profile component is going to take at least 5 Seconds to load and Stream in after it's loaded to the dashboard page so in our dashboard page then instead of rendering this particular mark up here we just want to render a suspense component which we need to import from react at the top here and within the suspense component we want to render the user where is it user profile component like so which of course we need to import at the top here from at/ components user-profile and of course now we don't need to await to get session because this is being handled in our user profile component so let's remove the import to the top here as well and last thing we need to do is add a fallback to the suspense component so we can add a fallback prop and I'm just going to add a string here and just say something like loading user info dot dot dot like so so if we save this now then and take a look in the browser we can see we have our loading user info and actually I'm just going to refresh the page we can see we have our loading user info and this should take 5 Seconds the page has already been loaded so this particular section here the this page needs to be protected section that's already been loaded as part of the dashboard page but then we're streaming back the response from the user profile component after it's actually been loaded so again if we hit refresh we can see we're rendering this loading message but our page is actually already loaded and then we're waiting for the response back from the suspense component and streaming then that response back via the user profile component so that pretty much concludes the setup for orzero within a nextjs project

Channel: WebDevEducation

Views: 1,093

Keywords: next auth, next js auth0

Id: ClQbyyeQSMk

Length: 15min 27sec (927 seconds)

Published: Sun Dec 10 2023