v4 undefined session.user.email

[MZ071999]

Question 💬

I am trying to access the user email with useSession() hook v4:

const { data: session } = useSession();
const userEmail = session.user.email;

but I got this error:

TypeError: Cannot read property 'user' of undefined

Before upgrading to v4, I managed to get the email with v3 syntax const {session} = useSession()

What's the correct way to get the user email with useSession() v4?

How to reproduce ☕️

n/a

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

There is a loading state, when session isn't available yet.

Your two options:

// 1.
const { data: session } = useSession();
const userEmail = session?.user.email; // <-- Notice the question mark. This is optional chaining
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

// 2.
const { data: session, status } = useSession()
const userEmail = status === "authenticated" ? session.email : ""

In both cases, you have to handle that loading state in your UI.

https://next-auth.js.org/getting-started/client#usesession