feat: update auth documentation for app router

www/src/pages/en/usage/next-auth.mdx

@@ -12,6 +12,13 @@ When you want an authentication system in your Next.js application, NextAuth.js
 
 ## Context Provider
 
+<Callout type="warning">
+ This section is only applicable if you decide to use the `pages` router with
+ Next. To understand how to use sessions with the (reccomended) new `app`
+ router, please read the section below about retreiving a session on the
+ server-side.
+</Callout>
+
 In your app's entrypoint, you'll see that your application is wrapped in a [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider):
 
 ```tsx:pages/_app.tsx
@@ -39,27 +46,33 @@ const User = () => {
 
 ## Retrieving session server-side
 
-Sometimes you might want to request the session on the server. To do so, prefetch the session using the `getServerAuthSession` helper function that `create-t3-app` provides, and pass it down to the client using `getServerSideProps`:
+If you have configured your application to use Next's `/app` router, the recomended behavior is to request the session on the server rather than the client. This is how `create-t3-app` is configured by default.
 
-```tsx:pages/users/[id].tsx
-import { getServerAuthSession } from "../server/auth";
-import { type GetServerSideProps } from "next";
+In your app's entrypoint you will notice that the auth session has been prefetched using the `getServerAuthSession` helper function that `create-t3-app` provides.
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const session = await getServerAuthSession(ctx);
- return {
- props: { session },
- };
-};
+```tsx:app/page.tsx
+import {getServerAuthSession} from "~/server/auth"
 
-const User = () => {
- const { data: session } = useSession();
- // NOTE: `session` wont have a loading state since it's already prefetched on the server
+export default async function Home(){
+ const session = await getServerAuthSession();
+}
+```
+
+While `session` is initially equal to null, if you were to login using Discord and log `session` to the console you would notice that it takes the following form:
 
- ...
+```json
+{
+ user: {
+ name: string,
+ email: string,
+ image: string,
+ id: string,
+ }
 }
 ```
 
+To add additional providers, callbacks or configure authentication in any manner you can edit the `server/auth.ts` file as necessary. Additional information about authentication configuration options are available [here](https://next-auth.js.org/configuration/options).
+
 ## Inclusion of `user.id` on the Session
 
 Create T3 App is configured to utilise the [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) in the NextAuth.js config to include the user's ID within the `session` object.
@@ -93,39 +106,36 @@ The same pattern can be used to add any other data to the `session` object, such
 
 ## Usage with tRPC
 
-When using NextAuth.js with tRPC, you can create reusable, protected procedures using [middleware](https://trpc.io/docs/v10/middlewares). This allows you to create procedures that can only be accessed by authenticated users. `create-t3-app` sets all of this up for you, allowing you to easily access the session object within authenticated procedures.
+When using NextAuth.js with tRPC, you can create reusable, protected procedures using [middleware](https://trpc.io/docs/server/middlewares). This allows you to create procedures that can only be accessed by authenticated users. `create-t3-app` sets all of this up for you, allowing you to easily access the session object within authenticated procedures.
 
 This is done in a two step process:
 
-1. Grab the session from the request headers using the [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession) function. The advantage of using `getServerSession` instead of the regular `getSession` is that it's a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away so that you don't need to import both your NextAuth.js options as well as the `getServerSession` function every time you need to access the session.
+1. Grab the session from the request headers using the [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession) function. The advantage of using `getServerSession` instead of the regular `getSession` is that it's a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away so that you don't need to import your NextAuth.js options to every single route where you would like to access the session.
 
 ```ts:server/auth.ts
-export const getServerAuthSession = (ctx: {
- req: GetServerSidePropsContext["req"];
- res: GetServerSidePropsContext["res"];
-}) => {
- return getServerSession(ctx.req, ctx.res, authOptions);
-};
+export const getServerAuthSession = () => getServerSession(authOptions);
 ```
 
 Using this helper function, we can grab the session and pass it through to the tRPC context:
 
 ```ts:server/api/trpc.ts
 import { getServerAuthSession } from "../auth";
 
-export const createContext = async (opts: CreateNextContextOptions) => {
- const { req, res } = opts;
- const session = await getServerAuthSession({ req, res });
- return await createContextInner({
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+ const session = await getServerAuthSession();
+
+ return {
+ db,
  session,
- });
+ ...opts,
+ };
 };
 ```
 
 2. Create a tRPC middleware that checks if the user is authenticated. We then use the middleware in a `protectedProcedure`. Any caller to these procedures must be authenticated, or else an error will be thrown which can be appropriately handled by the client.
 
 ```ts:server/api/trpc.ts
-export const protectedProcedure = t.procedure.use(({ ctx, next }) =>  {
+export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
  throw new TRPCError({ code: "UNAUTHORIZED" });
  }
@@ -135,21 +145,25 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  session: { ...ctx.session, user: ctx.session.user },
  },
  });
-})
+});
 ```
 
 The session object is a light, minimal representation of the user and only contains a few fields. When using the `protectedProcedures`, you have access to the user's id which can be used to fetch more data from the database.
 
-```ts:server/api/routers/user.ts
-const userRouter = router({
- me: protectedProcedure.query(async ({ ctx }) => {
- const user = await prisma.user.findUnique({
- where: {
- id: ctx.session.user.id,
- },
+```ts:server/api/routers/post.ts
+export const postRouter = createTRPCRouter({
+
+ // code above...
+
+ getLatest: protectedProcedure.query(({ ctx }) => {
+ return ctx.db.post.findFirst({
+ orderBy: { createdAt: "desc" },
+ where: { createdBy: { id: ctx.session.user.id } },
  });
- return user;
  }),
+
+ // code below...
+
 });
 ```