Next.js Discord

Discord Forum

Is their latest documentation link for Next-auth?

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I'm searching for documentation for app router, but the documentation in the Next-auth page always refers to the page router.
I'm really confusing how to properly configure the next-auth system in my next.js app.
Answered by B33fb0n3
you can see one example for app router here: https://next-auth.js.org/configuration/initialization#route-handlers-app

This is the same for app and pages router: https://next-auth.js.org/configuration/options
And this as well: https://next-auth.js.org/getting-started/example

So the only thing that is handled a bit differently is the folder structure on how to build an api endpoint for next-auth
View full answer

8 Replies

Northeast Congo LionOP
I've found a recent youtube video in this [link](https://www.youtube.com/watch?v=z2A9P1Zg1WM) which suggests the following folder structure.
Which one is the good starter?
Answer
Northeast Congo LionOP
Thank you for the kind answer.
I've successfully created route.ts file as in the image.
Now I'm trying to use useSession hook in my client-side code, which requires SessionProvider.
But in the [document](https://next-auth.js.org/configuration/nextjs#getserversession), it recommends using getServerSession instead of SessionProvider. However, I'm not understanding how to properly create those files in which folder.
Could you please simply show a guide for the folder structure?
@Northeast Congo Lion Thank you for the kind answer. I've successfully created `route.ts` file as in the image. Now I'm trying to use `useSession` hook in my client-side code, which requires `SessionProvider`. But in the [document](https://next-auth.js.org/configuration/nextjs#getserversession), it recommends using `getServerSession` instead of `SessionProvider`. However, I'm not understanding how to properly create those files in which folder. Could you please simply show a guide for the folder structure?
getServerSession and SessionProvider are two different things. The getServerSession method is for all serverside stuff. The SessionProvider is for all clientside stuff.

You linked a file, that shows how you don't need to pass authOptions around. Because when you want to get the session serverside with getServerSession you need to add the auth options as argument to it: await getServerSession(authOptions).

The step that you linked is optional and only makes an easier function.
This:
const session = await getServerSession(authOptions);

Becomes this (with your helper function):
const session = await getServerSession();
Northeast Congo LionOP
Oh, you mean I can create a @/utils/helper.ts for the code from the document, and use it as you mentioned?

const session = await getServerSession();

import type {
  GetServerSidePropsContext,
  NextApiRequest,
  NextApiResponse,
} from "next"
import type { NextAuthOptions } from "next-auth"
import { getServerSession } from "next-auth"

// You'll need to import and pass this
// to `NextAuth` in `app/api/auth/[...nextauth]/route.ts`
export const config = {
  providers: [], // rest of your config
} satisfies NextAuthOptions

// Use it in server contexts
export function auth(
  ...args:
    | [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
    | [NextApiRequest, NextApiResponse]
    | []
) {
  return getServerSession(...args, config)
}
Northeast Congo LionOP
Ok thank you!
happy to help