After signin is implemented and you get session -

useSession hook by ’next-auth/react’ gives you session object in react-function-component

get the user data from:

import { useSession } from "next-auth/react";

export default function Home(props) {
  const { data: session } = useSession();

  if (session) {
    console.log(`User: -- ${session.user.email}`);

Notice the if check on session - Tried to use session without checking if session is not undefined. Got errors - figured it our eventually.

Also you can use getSession on server side functions:


import { useSession, getSession } from "next-auth/react";

export async function getServerSideProps(ctx) {
  const session = await getSession(ctx);
  let notes = [];
  if (session) {
    console.log("ANN1234 " + session);
    const notesObj = await DBManager.getNotesByEmail(session.user.email);
    notes = JSON.parse(JSON.stringify(notesObj));
    console.log(`This is original props, notes = ${JSON.stringify(notes)}`);
  } else {
    console.log("ANN1234: In gSSP - session not found");
  }

  return {
    props: {
      notes: notes,
    },
  };
}

Notice getSession in above code.

Must read getSession documentation: https://next-auth.js.org/getting-started/client#getsession

Complete code:

pages\index.js

import NoteList from "../components/home/NoteList";
import DBManager from "../db/DBManager";
import { useSession, getSession } from "next-auth/react";

export default function Home(props) {
  const { data: session } = useSession();

  if (session) {
    const user = {
      name: session.user.name,
      email: session.user.email,
    };
    return <NoteList notes={props.notes} user={user} />;
  } else {
    return <h1>SignIn to continue</h1>;
  }
}

export async function getServerSideProps(ctx) {
  const session = await getSession(ctx);
  let notes = [];
  if (session) {
    console.log("ANN1234 " + session);
    const notesObj = await DBManager.getNotesByEmail(session.user.email);
    notes = JSON.parse(JSON.stringify(notesObj));
    console.log(`This is original props, notes = ${JSON.stringify(notes)}`);
  } else {
    console.log("ANN1234: In gSSP - session not found");
  }

  return {
    props: {
      notes: notes,
    },
  };
}

Notice the way to use getSession:

const session = await getSession(ctx);

Must read getSession documentation: https://next-auth.js.org/getting-started/client#getsession

Notice the DB changes I had to do: getNotesByEmail

So the DB changes were:

patch:

async function getNotesByEmail(email) {
  const client = await getClient();
  const db = client.db("users");
  const user = await db.collection("users").findOne({ email: email });
  const username = user.username;
  console.log(
    `got username from email, in DBM getNotesByEmail: username = ${username})}`
  );
  client.close();
  return await getNotesByUsername(username); //TODO 2 times db connection and close for getNotesByEmail - make it 1.
}

async function getNotesByUsername(username) {
  const client = await getClient();
  const db = client.db("notes");
  const notes = await db
    .collection("notes")
    .find({ username: username })
    .toArray();
  console.log(`got notes in DBM getNotesByUsername : ${JSON.stringify(notes)}`);
  client.close();
  return notes.map((note) => ({ id: note._id, message: note.message }));
}