'How to obtain all data from jwt callback in NextAuth.js Provider

Problem

I have been struggling to extract all the fields from a NextAuth.js OAuth provider. Specifically, in the case of a Google provider, this is what I was able to extract:

{
  "expires": "",
  "token": {
    "name": "",
    "email": "",
    "picture": "",
    "sub": "",
    "iat": 0,
    "exp": 0,
    "jti": ""
  }
}

However, when logging inside the jwt function, I can see that there are many more fields (e.g., the profile field):

{
  profile: {
    iss: "",
    azp: "",
    aud: "",
    sub: '',
    hd: '',
    email: '',
    email_verified: true,
    at_hash: '',
    name: '',
    picture: '',
    given_name: '',
    family_name: '',
    locale: '',
    iat: 0,
    exp: 0
  }
},

What I would like to get access in my sign-in page are all the data fields from the jwt callback parameters:

jwt: (params: {
  token: JWT;
  user?: User | undefined;
  account?: Account | undefined;
  profile?: Profile | undefined;
  isNewUser?: boolean | undefined;
}) => Awaitable<JWT>

Code

I have already read and tried basically every tutorial and documentation on the NextAuth.js website. Just to be sure, I report hereafter the pieces of code relevant:

_app.tsx:

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

[...nextauth].ts

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: '',
      clientSecret: '',
    }),
  ],
  secret: 'secret token',
  pages: {
    signIn: '/sign-in',
  },
  session: {
    strategy: 'jwt',
  },
  //Callback here
  callbacks: {
    jwt: (params: {
      token: JWT;
      user?: User | undefined;
      account?: Account | undefined;
      profile?: Profile | undefined;
      isNewUser?: boolean | undefined;
    }): Awaitable<JWT> => {
      const { token, user, account, profile, isNewUser } = params;
      if (account?.accessToken) {
        token.accessToken = account.accessToken;
      }

      console.log({ ...token, user, account, profile, isNewUser });

      return { ...token, user, account, profile, isNewUser };
    },
    async session({ session, token, user }) {
      return { ...session, user, token };
    },
  },
});

./pages/sign-in.tsx

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

  useEffect(() => {
    console.log(session);
  }, [session]);
...

Is there anything I am missing to solve my problem?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source