Next Js 14 Authentication on Edge Runtime

hi everyone so in this video I want to show you how you can set up authorization in your next application without using cler that is compatible with the edge run time we're going to be using the next o beta version for this let me just do a quick demo on what our aim is I have two pages currently this is the homepage and then I have a dashboard page to go to the dashboard page I want to be logged in currently I don't have that functionality and I will try to implement that functionality that is compatible with the edge run time I've created a video showing you how to implement authorization in next but that is not compatible with the edge run time so in this video that is what I'm going to try and Implement to get started let's install a package uh for next o npm install next- o here's the new thing we have to do npm install next o at beta this is going to install a version that's not released yet but it is compatible with the edge run time and it's version five I believe it's going to be released in the future feature at some point so for now this is the command that we have to use press enter and now it's going to install it nice once the package is installed then inside the next in then inside the app directory what we want to do is let me just zoom in we want to create the following route API slash or slash catch all syntax or next both once we have created that folder we need to create a file in there called route. TS once we have created that we'll come back to this later let me zoom out again and inside the root directory of our uh project we need to create let me just create a li Library folder lip and inside that create or. TS file once we have created this or. TS file this is where we're going to actually Implement our setup our authorization so as always uh import next or from next or and then we are going to destructure some stuff from here from next o passing an empty object in this for now but uh one of the things that we're going to take out from this is oath and another thing is handlers these handlers are get and post once that's done we need to import Google provider because I want to implement authorization by Google provider so what you do is you do import Google Provider from next both and then providers SL Google nice and inside this empty object we're going to have a key providers that is going to be an array and inside that array we're going to put our Google provider this Google provider is going to take a client ID client ID that is an environment variable so I have named that inir variable process. mv. Google client uncore ID as string import that and another thing is client secret process. env. Google uncore centore Secret that's also going to be a string if you want to know how to actually get these client ID and client secrets you can watch my previous video of implementing authorization but in this video I'm only going to show you the quick setup another thing that we need to set up is a secret that is going to be process. EnV do oore Secret you can generate these secrets that's also shown in my previous video I can I can show those two for now and this is what those two look like this is what the O secret looks like you can generate this using uh command in your terminal you can watch my previous video if you're not sure how to do that but these are the next two environment variables that I've set up or URL which is Local Host for working locally SL API and then this or secret so once that's done you save this file and then you go to our route. Ts that we had created to export the get and post handlers that we exported from our or. TS file these ones okay so all you have to do is export get and post from and now you just need to find the directory go back go back from here and slash lib SL or also because we want it to be compatible with the edge runtime you also do export con runtime is equal to Edge and that's mostly it now we can import this session from on any of our Pages for example now let me show you how it's done this is pretty much most of the setup done go to our dashboard page. TSX file and here first of all create this as an async function and now we can do o is I mean session is equal to await four sorry this isn't correct you do await both and now what we want to do is if there is no session we want to redirect our user this redirect is coming from next SL navigation you want to redirect the user to/ API or slash sign in this is going to take the user the signin page now we are pretty much done but let's say on the dashboard once we are logged in let's display the users's email session. user. email okay and also just to be safe since this is this application is going to run on the edge run time you do export cons runtime equal to edge for any page that's going to be on the edge runtime so save everything up and now let's try to log in here I am on the homepage now let's test this here I'm on the homepage and if I click on dashboard it should take me to the signin page there we go it takes me to the signin page and now I can log in using Google just to prove that it works box by. at gmail.com let me try to log in put in your password and after successfully logging in it takes me to the homepage now if I go on dashboard it should display my email and that's what it does that's how you set up the O that is compatible with the edge runtime bear in mind that this package is in beta but it's going to be released soon it's the five it's the version 5.0 this or does not require you to use Clerk or any other third party service this is how you can set up o by yourself that is compatible with the edge run time hope that's helpful thank you for watching

Channel: Sphorb

Views: 6,869

Keywords: boxbyte

Id: rEopVx0FKGI

Length: 7min 46sec (466 seconds)

Published: Mon Nov 20 2023