'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 |
|---|
