Is their latest documentation link for Next-auth?
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
I'm searching for documentation for
I'm really confusing how to properly configure the next-auth system in my next.js app.
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
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
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?
Which one is the good starter?
@Northeast Congo Lion 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.
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
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
Answer
Northeast Congo LionOP
Thank you for the kind answer.
I've successfully created
Now I'm trying to use
But in the [document](https://next-auth.js.org/configuration/nextjs#getserversession), it recommends using
Could you please simply show a guide for the folder structure?
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
The step that you linked is optional and only makes an easier function.
This:
Becomes this (with your helper function):
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 Lion Oh, you mean I can create a `@/utils/helper.ts` for the code from the document, and use it as you mentioned?
typescript
const session = await getServerSession();
typescript
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)
}
I haven't ever created the helper myself, so idk. I guess it's https://tryitands.ee/
Northeast Congo LionOP
Ok thank you!
happy to help