Migrate Next.js Pages Auth API Handler to App Router
We start moving our pages api routes to the app router we move our auth handler for Next Auth to the app router.
There isn't anything that we need to change to the actual code of the API handler but the way the API route is set up in the app router is a little different.
We'll rename our file to routes.ts and make sure to export the correct HTTP methods from the route.
Instructor: [0:00] To get started moving our API routes over, we can come into our app. Let's add a new file, we'll call it API. Then we'll start with our Auth Route Handler. We'll say, auth/nextauth and close that and just say .ts. Let's make sure it's the same, so api/auth/nextauth.
[0:22] Then for this one, we can just grab our code. Let's paste it here, and let's come down here and remove our Auth handler from our Pages router. Then let's make sure we save our Auth Handler now in our App Router.
[0:42] We can come back to our application. I've already signed out, so let's refresh. We're going to get this error, and this is where we can first just restart our server. We're going to get a series of errors because everywhere we're using getServerSession, we are passing it authOptions from that Pages Route Handler.
[1:03] First, let's find the places. We're using getServerSession, so we can come into /customers/. Let's come into /layout/, and let's change this to /app/. Save that. Let's check for our deposits. Yep, so we can import it from /app/.
[1:36] Now, in all of our API routes in our Pages directory, we need to also change where we're getting the authOptions from. This will change relatively soon, so let's change this to @/app/api/auth/. Let's copy and then wherever we're using that, we can...
[1:58] As you're changing everything over to use the authOptions from the App Routers API Route Handler, you may run into a few errors. Like this import having a problem finding these two functions from our new sales route, as well as in the upload thing API Route Handler, and the server, it'll error on our types. These are things that you can ignore for now because we're working on moving them over.
[2:30] Now, if we come back to our browser, and let's try to sign in again, the reason we're getting this 404 is because a Route Handler in the app router has to have a route.ts file, much like our Pages and how they have to have a page.ts file. Here we can come in and let's rename this. Let's say /route.ts.
[2:56] You'll see our error is that we're getting no HTTP methods exported. That's because our Route Handlers in the app router have to have the HTTP methods like GET, POST, PUT, DELETE. Currently, we don't have any of those being used. We can change our handler here. Let's just say const handler = NextAuth({authOptions}) and it takes the authOptions.
[3:22] Then we can export {handler as GET}. That's the HTTP method, GET. Then we can also, export {handler as POST}. Now we come back and let's go back to our sign-in page. Let's click sign in with GitHub. Now we are redirected to our home page. We can go back to our routes again.
[3:50] In review, in this lesson, we moved over our API Auth Route Handler to our app router. We had to change it up a little bit because of the way that the new Route Handlers were needing HTTP methods exported. We also changed our getServerSession in all of our Pages API routes that still exist to take the new AuthOptions from our new Auth Handler in the app router.