CODEWITHSUNDEEP
javascriptnext.jsfetchserver-side-renderingnext-auth
Eric Pezzulo
Eric Pezzulo

Reputation: 399

using NextAuth hooks useSession() inside getServerSideProps()

I'm trying to get some data from my server depending on whose currently logged in. I'm using Next-Auth and normally I can just call:

const { data: session } = useSession();

At the top of the functional component, but you cannot do this in getServerSideProps().

I need to make a get request like this:

export async function getServerSideProps() {
  const res = await fetch(
    `http://localhost:5000/api/users/${session.id}/following`
  );
  const isFollowing = res.json();
  return {
    props: { props: isFollowing },
  };
}

that has the current users session ID dynamically put in.

How do I access my session ID inside getServerSideProps?

Upvotes: 3

Views: 4160

Answers (3)

AdamE
AdamE

Reputation: 666

This method has been renamed to getServerSession in v4 of NextAuth - see https://next-auth.js.org/configuration/nextjs#getserversession . Here is some example code of how to import it and use it:

//you must import your NextAuth options. Here is an example path
import { authOptions } from '../app/api/auth/[...nextauth]/route'
import { getServerSession } from "next-auth"

// This gets called on every request
export async function getServerSideProps(context) {
    const session = await getServerSession(context.req, context.res, authOptions)
    //now you can use session to pass to an api - this is not real
    const mydata = await fetch(`http://localhost/example/${session.id}`);
   
    // Pass data to the page via props
    return { props: { mydata } }
}

Upvotes: 0

Vitalii
Vitalii

Reputation: 81

Since useSession is react-hook - it can be used only inside Component. For server-side usage there another method from Next-Auth package - getSession. https://next-auth.js.org/v3/getting-started/client#getsession

Server-Side Example

    import { getSession } from "next-auth/client"

    export default async (req, res) => {
      const session = await getSession({ req })
      /* ... */  
      res.end()
    }

Note: When calling getSession() server side, you need to pass {req} or context object.

Upvotes: 3

Chemi Adel
Chemi Adel

Reputation: 2165

you should to re-assign the headers from the getServerSideProps request to inner fetch, because that fetch has no headers, cookies or tokens

export async function getServerSideProps(ctx) {
  const headers=ctx.req.headers //where cookies, jwt or anything
  const res = await fetch(
    `http://localhost:5000/api/users/${session.id}/following`,
    {headers}
  );
  const isFollowing = res.json();
  return {
    props: { props: isFollowing },
  };
}

Upvotes: 0

Related Questions