How to get current provider of session in Next-auth

Question

In Next-auth, We can get session related info like user: {name, email .. etc}

something as follows:

import { useSession } from "next-auth/client"

export default function Component() {
  const [session, loading] = useSession()

  if (session) {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

I want to get also the current provider name in my component to be used. For you your information, next-auth supports login by many providers as Facebook, Twitter .. etc

For example, if the user logged in via Twitter Api, I want to get this piece of info and print it in his profile page.

Sources: https://next-auth.js.org/v3/getting-started/client#usesession

Answer 1

Callbacks can be used for passing additional data to session object.

Provider details are provided the first time user signs in.

You can use jwt callback to store data in jwt cookie.

In [...nextauth].js :

const callbacks = {}

callbacks.jwt = async function jwt(token, user , account) {
    
    if (user) {
        token = { id: user.id  , provider:account.provider , ...moreData}
    }

    return token
}

const options = {
    providers,
    callbacks
}

Note: You also need to use session callback for passing the token data to useSession hook.

callbacks.session = async function session(session, token) {
    session.user = {
        provider : token.provider,
        id: dbUser.id,
        profile: dbUser.profile,
        
    }

    return session
}

export default (req, res) => NextAuth(req, res, options)

This way provider will be stored in the token for subsequent requests.

Learn more about callbacks here : Callbacks