Session Only Has Email - Next Auth Credentials Provider

[rmartin93]

Summary

After signing in, the user object of the session only has email in it and I do not understand why. Any help would be greatly appreciated.

"mysql2": "^3.6.2",
"next": "13.5.6",
"next-auth": "^4.24.3",

app > api > auth > [...nextauth] > route.js

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import pool from "app/_lib/database";

export const authOptions = {
	providers: [
		CredentialsProvider({
			pages: {
				signIn: "/auth/signin",
			},
			async authorize(credentials) {
				try {
					const { email, password } = credentials;
					const sql = `CALL verifyUser('${email}', '${password}')`;
					const connection = await new Promise((resolve, reject) => {
						pool.getConnection((error, conn) => {
							if (error) {
								reject(error);
							} else {
								resolve(conn);
							}
						});
					});
					// Add logic here to look up the user from the credentials supplied
					const user = await new Promise((resolve, reject) => {
						connection.query(sql, (queryError, queryResults) => {
							connection.release();
							if (queryError) {
								reject(queryError);
							} else {
								resolve(queryResults);
							}
						});
					});

					if (user) {
						// console.log("user info here", user[0][0]);
						// Any object returned will be saved in `user` property of the JWT
						return user[0][0];
					} else {
						// If you return null then an error will be displayed advising the user to check their details.
						return null;

						// You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
					}
				} catch (error) {
					console.log("error", error);
					return null;
				}
			},
		}),
	],
	session: {
		strategy: "jwt",
	},
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

// user info here {
//     status: 'success',
//     statusMsg: 'Member Match Found',
//     memberId: 58,
//     isMember: 103,
//     officer: 'Treasurer',
//     lastName: 'Martin',
//     firstName: 'Greg',
//     phone: '214-236-1055',
//     email: '[email protected]',
//     userPassword: 'tombstone',
//     address1: '100 S Commercial Suite 205',
//     address2: null,
//     city: 'Coleman',
//     state: 'TX',
//     postalCode: '76834',
//     createdBy: 'gmartin',
//     createdDate: 2022-12-23T21:42:24.000Z,
//     updatedBy: 'gmartin',
//     updatedDate: 2022-12-23T21:42:24.000Z
//   }

When I was logging "update info here" to the console, that commented code at the bottom is what I was getting.

Form component that my sign in page uses:

"use client";
import LoadingButton from "@/app/_rootComponents/LoadingButton";
import { useSession, signIn } from "next-auth/react";
import { useRef, useState } from "react";
import { toast } from "react-toastify";

export default function Form() {
	const [signInPending, setSignInPending] = useState(false);
	const formRef = useRef(null);
	const { status, data: session } = useSession({
		required: false,
	});
	console.log("session", session);
	if (status === "loading") return <div>Checking auth status...</div>;

	const handleSignIn = async () => {
		setSignInPending(true);
		const result = await signIn("credentials", {
			email: formRef.current.email.value,
			password: formRef.current.password.value,
			redirect: false,
		});
		console.log("result", result);
		if (result.ok) {
			toast.success("Success! Redirecting you to members page.", {
				position: "top-center",
				autoClose: true,
				hideProgressBar: true,
				closeOnClick: true,
				pauseOnHover: false,
				draggable: false,
				progress: undefined,
				theme: "light",
			});
			// redirect to members page
			setTimeout(() => {
				window.location.href = "/members";
			}, 300);
		}
		if (result.error) {
			setSignInPending(false);
			toast.error("Credentials did not match. Please try again.", {
				position: "top-center",
				autoClose: false,
				hideProgressBar: true,
				closeOnClick: true,
				pauseOnHover: false,
				draggable: false,
				progress: undefined,
				theme: "light",
			});
		}
	};

	if (status === "unauthenticated") {
		return (
			<div className="row">
				<div className="col-md-6 offset-md-3 col-12">
					<div className="card shadow">
						<div className="card-body">
							<h3 className="text-center text-secondary">Sign In</h3>
							<form ref={formRef}>
								<div className="form-group">
									<label htmlFor="email">Email</label>
									<input type="email" name="email" className="form-control" />
								</div>
								<div className="form-group mt-3">
									<label htmlFor="password">Password</label>
									<input
										type="password"
										name="password"
										className="form-control"
									/>
								</div>
								<div className="form-group">
									<LoadingButton
										text="Sign In"
										isPending={signInPending}
										classList="btn-primary mt-4"
										click={() => handleSignIn()}
										type="button"
									/>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

If I left out any code you guys need, let me know.

Additional information

It says "Any object returned will be saved in user property of the JWT", which I thought meant that the session would have all my user info, but it clearly doesn't. I tried finding it in a jwt callback at one point and I couldn't find it there either. Only when I console logged user[0][0] in the authorize function was I able to see evidence of my full user info from my MySQL database.

Example

No response

[rmartin93]

I was able to fix the issue with the following callbacks:

	callbacks: {
		async jwt({ token, user }) {
			user && (token.user = user);
			return token;
		},
		async session({ session, token }) {
			// Send properties to the client, like an access_token and user id from a provider.
			session.user = token.user;
			return session;
		},
	},

Maybe I'm not understanding something, but it seems like user shouldn't have been undefined in the first place. If anybody can shed some light on what's happening under the hood / why I had to do these callbacks to make user defined that would be awesome.

If not, no worries.