reactjs - Next-auth: Egenskaper til side undefined selv om de er sendt fra getServerSideProps

Jeg prøver å sende økten jeg får fra getSession (ved bruk av next-auth) som props til en side. Jeg vet at jeg kan bruke useSession() innenfor komponenten, men etter min forståelse burde dette også fungere, og jeg forstår ikke hvorfor det ikke gjør det.

Dette ser ut til å være et lignende problem som i dette spørsmålet, men det finnes ingen svar.

Her er min veldig enkle pages/settings.tsx:

import { Card, CardContent, Typography } from "@mui/material";
import { User } from "@prisma/client";
import { GetServerSideProps, NextPage } from "next";
import { getSession } from "next-auth/react";

interface SettingsProps {
  user: User,
}

const Settings : NextPage<SettingsProps> = ({user})=>{
  // in here, user is always undefined...
  return (
    <Card>
      <CardContent>      
        <Typography variant="h3">Settings</Typography>
        <Typography>UserId: {user.id}</Typography>
        <Typography>Created: {(new Date(user.createdAt)).toLocaleDateString()}</Typography>
      </CardContent>
      
    </Card>
  );
};

export const getServerSideProps: GetServerSideProps<SettingsProps> =  async (context) =>{
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  console.log(session.user); // this works and logs the user

  return {
    props: { user: session.user },
  };
};

export default Settings;

Jeg har utvidet next-auth Session-typen slik (types/next-auth.d.ts):

import { User } from "@prisma/client";
import NextAuth from "next-auth";

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: User
  }
}

Ifølge min forståelse av React og NextJs burde koden ovenfor fungere feilfritt, men når jeg besøker siden får jeg

TypeError: Cannot read properties of undefined (reading 'id')
  13 |       <CardContent>      
  14 |         <Typography variant="h3">Settings</Typography>
> 15 |         <Typography>UserId: {user.id}</Typography>
     |                                  ^
  16 |         <Typography>Created: {(new Date(user.createdAt)).toLocaleDateString()}</Typography>
  17 |       </CardContent>
  18 |

Hva gjør jeg galt?

Svar #1

Jeg stod overfor det samme problemet, og løste det gjennom ren flaks.

Det ser ut til at Next.js, gjennom sine pageProps, gjør bruk av session-prop'en i sider. Så når vi prøver å sende session direkte fra getServerSideProps, er den av en eller annen grunn undefined i klientkomponenten.

Kort sagt, bare returner brukeren fra session, eller gi sesjonsvariabelen et annet navn.

Dette er mønsteret jeg bruker i hele appen hvor enn jeg trenger SSR-autentiseringsbeskyttelse:

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  const session = await unstable_getServerSession(req, res, authOptions);
  const user = session?.user;

  if (!user) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: {
      user,
    },
  };
};

Svar #2

Selv om alt ser bra ut for meg hvis du har et brukerobjekt i økten og en ID i brukerobjektet, som du nevnte tidligere. Så, du kan bruke valgfri endring.

<Typography variant="h3">Settings</Typography>
 <Typography>UserId: {user?.id}</Typography>

Relaterte artikler