With my typescript setup, my file named [...next-auth].tsx is structured as follows:
import NextAuth, { Awaitable, Session, User } from "next-auth";
// import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
type ExtendedUserType = User & { username?: string; uid?: string };
export default NextAuth({
// Configuring authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
// ...add more providers here
],
pages: {
signIn: "/auth/signin", // custom sign in page
},
callbacks: {
async session({ session, token, user }): Awaitable<Session> {
(session.user as ExtendedUserType).username = session.user?.name
?.split(" ")
.join("")
.toLocaleLowerCase();
(session.user as ExtendedUserType).uid = token.sub;
return session;
},
},
});
When utilizing the useSession hook to fetch the session, I am not receiving Typescript autocompletion for the newly added keys - 'username' and 'uid'
https://i.stack.imgur.com/63uEr.png
I am also encountering a typescript error related to the Awaitable<Session> type
https://i.stack.imgur.com/vNfYd.png