Recieveing "session.user" is undefined after changing version to NextAuth 4

[MatD1]

Question 💬

I have just finished upgrading my project the NextAuth 4 beta 2 but now navbar keeps returning the error that "session.user" is undefined. I have a feeling it's the old wrappers I used. If it is how do I use the knew wrappers only around a certain section of my navbar and not my whole component?

import { Box, Button, Flex, HStack, useColorModeValue as mode, VisuallyHidden, useColorMode, Avatar, Badge, Text } from '@chakra-ui/react'
import * as React from 'react'
import { Logo } from './Logo'
import { MobileNav } from './MobileNav'
import { NavLink } from './NavLink'
import DarkModeToggle from '../../components/UI/header/darkModeToggle'
import Link from 'next/link'
import { useSession } from "next-auth/react"

function NavBar () {
  const { data: session, status } = useSession()
  const { colorMode, toggleColorMode } = useColorMode();
    return (
      <Box minH="100px">
        <Box as="header" bg={mode('white', 'gray.800')} borderBottomWidth="1px">
          <Box maxW="7xl" mx="auto" py="4" px={{ base: '6', md: '8', }}>
            <Flex as="nav" justify="space-between">
              <HStack spacing="8">
                <Box as="a" href="#" rel="home">
                  <VisuallyHidden>API TESTING</VisuallyHidden>
                  <Logo h="6" iconColor="blue.500" />
                </Box>
                <HStack
                  display={{
                    base: 'none',
                    lg: 'flex',
                  }}
                  spacing="8"
                >
                  <NavLink.Desktop><Link href="/profile">Profile</Link></NavLink.Desktop>
                  <NavLink.Desktop>About</NavLink.Desktop>

                </HStack>
              </HStack>
              <Flex align="center">
                <HStack
                  spacing="8"
                  display={{
                    base: 'none',
                    md: 'flex',
                  }}
                >
                  {!session && <> 
                  <NavLink.Desktop>
                    <Button colorScheme="green" rounded="full">
                        <Link href={`/api/auth/signin`} onClick={(e) => { 
                          e.preventDefault()
                          signIn()
                        }}>Login</Link>
                    </Button>
                  </NavLink.Desktop>
                  <Avatar />
                  </>}
                  {session && <> 
                    {session.user.image && <Avatar src={session.user.image} />}
                    <Text fontSize="1.5em"> Signed in as {session.user.name || session.user.email || null}, 
                      <Badge mb="1" ml="1" fontSize="0.8em" colorScheme="green">
                        Welcome!
                      </Badge>
                    </Text>
                    
                    <NavLink.Desktop>
                    <Button colorScheme="green" rounded="full">
                        <Link href={`/api/auth/signout`} onClick={(e) => { 
                          e.preventDefault()
                          signOut()
                        }}>Log out</Link>
                    </Button>
                  </NavLink.Desktop>
                  </>}

                  <DarkModeToggle onClick={toggleColorMode} colorMode={colorMode}  />
                </HStack>
                <Box ml="5">
                  <MobileNav />
                </Box>
              </Flex>
            </Flex>
          </Box>
        </Box>
      </Box>
    )
  }

  
  export default NavBar;

I only want to wrap this part because it is where the user is displayed if they are logged in or not

{!session && <> 
                  <NavLink.Desktop>
                    <Button colorScheme="green" rounded="full">
                        <Link href={`/api/auth/signin`} onClick={(e) => { 
                          e.preventDefault()
                          signIn()
                        }}>Login</Link>
                    </Button>
                  </NavLink.Desktop>
                  <Avatar />
                  </>}
                  {session && <> 
                    {session.user.image && <Avatar src={session.user.image} />}
                    <Text fontSize="1.5em"> Signed in as {session.user.name || session.user.email || null}, 
                      <Badge mb="1" ml="1" fontSize="0.8em" colorScheme="green">
                        Welcome!
                      </Badge>
                    </Text>
                    
                    <NavLink.Desktop>
                    <Button colorScheme="green" rounded="full">
                        <Link href={`/api/auth/signout`} onClick={(e) => { 
                          e.preventDefault()
                          signOut()
                        }}>Log out</Link>
                    </Button>
                  </NavLink.Desktop>
                  </>}

How to reproduce ☕️

I am not sure what I can provide here

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[kf106]

I'm having the same problem. In v3 session just turned up in my index page after authenticating. Now it doesn't. I'm trying to do everything client side. There has to be some standard way of loading session if it exists on page load, but I've been struggling with it all day. If I find the solution I'll put my answer here.

[kf106]

Okay, I managed to get it to work. Here are the things I had to do:

1: in _app.js put the and around everything, not just the <Component {...pageProps} />
2: don't use const { session, status } = useSession() in your page or component where you want the session state. Use const { data, status } = useSession() <--- note data instead of session, or it doesn't work

[balazsorban44]

https://next-auth.js.org/getting-started/upgrade-v4