Difference between useSession, getSession and getServerSession in next-auth?

[in43sh]

I read the documentation and some stackoverflow question but still not very clear to me. Please, clarify what is the difference and when to use what

[rafalkrupinski]

You can see useSession is a hook, and as such it only works in client-side react, and also can only be used within a <SessionProvider>.
Not sure about the other two, they accept request and response to retrieve the session cookie, so I guess they go on the server side.

[prkagrawal]

useSession a React Hook for client-side components. provides real-time updates to the UI based on session state changes. Because it's a client-side hook, it must be wrapped in a component to function correctly.
use:

• inside a React component ("use client"), pages, etc
• reactively track auth state (loading → authenticated → unauthenticated).
• showing content conditionally.

getSession async function - On the client, it fetches the session data via an API call. On the server, it accesses the session directly.
use: in a server-side function like getServerSideProps, API routes, or client code where you can await.

getServerSession exclusive to server-side environments, such as API routes or server components. It directly accesses the session context, avoiding the overhead of an API request. preferred for accessing session data on the server for performance.
use:

• Server components, API routes, Server-side logic
• better performance

you can do this

import { getSession } from 'next-auth/react';

const authLink = setContext( async(_, { headers, ...context }) => {
  const session = await getSession();
  const token = session?.accessToken || null;
  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : "",
    },
    ...context,
  };
})

but the following results in error

const authLink = setContext( (_, { headers, ...context }) => {
  const { data: session } = useSession();
  const token = session?.accessToken || null;
  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : "",
    },
    ...context,
  };
})

errors out

Neither can getServerSession be used here. It's use case:

// In a Next.js API route
import { getServerSession } from 'next-auth/next';
import { authOptions } from './authOptions';

export default async function handler(req, res) {
  const session = await getServerSession(req, res, authOptions);
  // You now have access to session.server-side
}