Couldn't figure out how to pass data between callbacks

[D2Mat]

Hi, I want to implement authentication with linkedin with a custom api token. I did the nextauth + custom backend tutorial. This is it macro steps:

1. I have implement a classic linkedin connexion that works.
2. Then I follow this tutorial o build a custom nextauth with backend: arunoda.me tutorial

The first version doesn't work for me so I modified it with all the advise I could find on the repos. Finally it still doesn't work properly, so I ask you what I am doing wrong.

Cinematic :

1. The API aim to return a token in the signin callback the token contain id information
2. This token should be store in the token object
3. Then the token is used to get user information from the API

Behaviour
During steps 2 and 3 data isn't accessible. And when I console.log session in the client, only primitive data from Linkedin exists.

Code from : /pages/api/auth/[...nextauth].js

const providers = [
  Providers.LinkedIn({
    clientId: process.env.LINKEDIN_CLIENT_ID,
    clientSecret: process.env.LINKEDIN_CLIENT_SECRET
  })
];

const callbacks = {};

callbacks.signIn = async function signIn(user, account, profile) {
  if (account.provider === "linkedin") {
    let emailLinkedin = "";
    try {
      const emailRes = await axios.get(
        'https://api.linkedin.com/v2/emailAddress?q=mambers&projection=(elements*(handle~))',
        {
          headers: {
            Authorization: `Bearer ${account.accessToken}`
          }
        }
      );
      console.log(emailRes.data);
      emailLinkedin = emailRes ? await emailRes["handle~"].emailAddress : "";
    } catch (error) {
      console.log(error.response.data);
    }
    let imageLinkedin = "";
    try {
      const imgRes = await axios.get(
        "https://api.linkedin.com/v2/me?projection=(id,firstName,lastName,profilePicture(displayImage~:playableStreams))",
        {
          headers: {
            Authorization: `Bearer ${account.accessToken}`
          }
        }
      );
      imageLinkedin = await imgRes.data.profilePicture["displayImage~"]
        .elements[0].identifiers[0].identifier;
    } catch (error) {
      console.log(error.response.data);
    }
    const linkedinUser = {
      email: emailLinkedin,
      image: imageLinkedin,
      id: user.id,
      localizedLastName: profile.localizedLastName,
      localizedFirstName: profile.localizedFirstName,
      name: user.name
    };
    //retrieve the token from the API
    axios
      .post(
        `${process.env.NEXT_PUBLIC_API2}/mongodb/signin`,
        { user: linkedinUser },
        {
          headers: {
            "Content-Type": "application/json"
          }
        }
      )
      .then(res => {
        user.accessToken = res.data.authToken;
        console.log(user.accessToken);
        return Promise.resolve(true);
      })
      .catch(error => {
        console.log(error);
        return Promise.resolve(true);
      });
  }
};

callbacks.jwt = async function jwt(token, user) {
  if (user && user.accessToken) {
    token = { accessToken: user.accessToken };
  }
  return Promise.resolve(token);
};

callbacks.session = async function session(session, token) {
    if (user && user.accessToken) {
        session.accessToken = user.accessToken;
        axios
          .get('${process.env.NEXT_PUBLIC_API2}/mongodb/user', {
            headers: {
              authorization: `Bearer ${session.accessToken}`,
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            session.user = res.data;
          })
          .catch(error => {
            console.log(error);
          });
      }
      return Promise.resolve(await session);
};

const options = {
  debug: true,
  providers,
  callbacks,
  pages: {
    signIn: "/fr/signin"
  }
};

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

I check all API routes. They are woorking great.

[balazsorban44]

So I feel you have way overengineered what you were trying to achieve, here is my suggestion (Please note I haven't tested/run the code anywhere, there might be some small issues, but the main ideas remain the same). I'll try to explain everything below.

export default NextAuth({
  debug: true,
  providers: [
    Providers.LinkedIn({
      clientId: process.env.LINKEDIN_CLIENT_ID,
      clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
      async profile(profile, tokens) {
        return {
          email: await getEmail(tokens.accessToken),
          image: await getImage(tokens.accessToken),
          id: profile.id,
          localizedLastName: profile.localizedLastName,
          localizedFirstName: profile.localizedFirstName,
          name: profile.name
        }
      }
    })
  ],
  callbacks: {
    async signIn(profile, account) {
      try {
        // Create user in the database
        const res = await fetch(`${process.env.NEXT_PUBLIC_API2}/mongodb/signin`, {
          headers: { "Content-Type": "application/json", Authorization: `Bearer ${account.accessToken}` },
          method: "POST",
          body: JSON.stringify({ user: profile })
        })
        const data = await res.json()
        if (res.ok) return true
        throw data
      } catch (error) {
        console.error("Could not create user in database", error)
        return false
      }
    },    
    async jwt(token, profile, account) {
      if (profile && account) {
        token.accessToken = account.accessToken
        token.user = profile
      }
      return token
    },
    async session(session, token) {
      session.accessToken = token.accessToken;
      session.user = token.user
      return session
    }
  },
  pages: {
    signIn: "/fr/signin"
  }
})

async function getEmail(accessToken) {
  try {
    const res = await fetch(
      'https://api.linkedin.com/v2/emailAddress?q=mambers&projection=(elements*(handle~))',
      { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } }
    )
    const data = await res.json()
    return data["handle~"].emailAddress ?? ""
  } catch (error) {
    console.error("Failed to fetch email", error)
      // We return an empty string in case of a failure, so the login flow can continue. If it is a show-stopper for the sake of the app, just throw the error further up
    return ""
  }
}

async function getImage(accessToken) {
  try {
    const res = await fetch(
      "https://api.linkedin.com/v2/me?projection=(profilePicture(displayImage~:playableStreams))",
      { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } }
    )
    const data = await res.json()
    return data.profilePicture["displayImage~"].elements[0].identifiers[0].identifier;
  } catch (error) {
    console.error("Failed to fetch image", error)
   // We return an empty string in case of a failure, so the login flow can continue. If it is a show-stopper for the sake of the app, just throw the error further up
    return ""
  }
}

In no particular order:

• Don't mix async/await with Promise. It can be very confusing, hard to read, and easy to do mistakes. I recommend taking a basic course on how to use async/await (Example: https://www.youtube.com/watch?v=vn3tm0quoqE)
• We recently simplified the API, so you can export NextAuth with a single object, without caring about req or res. You simply give your options object to NextAuth
• profile callback in Providers config. This one probably needs a better place in the docs, because it is very overlooked! This method can be used to modify how your profile object will look like that gets sent to the signIn and jwt callbacks. This is the intended place to modify/map/extend the profile object you get from your Provider (in your case, LinkedIn). We recently added a second parameter to profile that we call tokens. It will contain the access_token from LinkedIn, so you can fetch additional data, like image and email. I extracted those into their separate functions for readability
• signIn callback This callback is called before the login flow has been finished. It is the best place to persist anything in your database because if that operation fails, you can simply return false, and deem the login invalid. (This will stop the login flow, and by default redirect the user to the sign-in page. See the docs on how to redirect to a custom page).
• jwt callback This callback is used to manipulate what get's to be saved in the JWT saved in the session cookie. Since we already mapped the user in the profile callback and we get the accessToken from the provider through account, we don't need to do any additional requests in your case. Some parameters are only available the first time this callback is invoked (hence the if check), see the docs.
• session callback This is called every time the session is being accessed from the backend, right after the jwt callback. The thing is, you might want to save information in your jwt, that doesn't necessarily concern the frontend. You could filter it out in this callback. In this case, we just forward the access token and the user object that we got from jwt, that we got from the profile callback.
• This one might be a very personal opinion, but axios is totally overkill in this situation. Just use fetch, use the platform! fetch is a browser API, but since you are building a Next.js app, it is polyfilled for you!

I tried to link to the relevant documentation where I could, please study it carefully! If something is not clear in the docs, please open an issue, so we can explain it better!
Hope this helps!

[D2Mat]

Hi @balazsorban44,

I very much appreciate your clear and complete answer.

As you've seen it, I am not really a pro ;). Thanks for your advice concerning axios. I am currently prototyping things to test markets, I need to move fast, so I use what I am already familiar with. As I see it's much simpler to use fecth than axios. I might use it more now.

Concerning your rewriting, it works but, in the signin function you throw data. I couldn't find those data it in jwt. Is it possible to pass this data in jwt rather than throw them ? Again, I might misunderstand the flow ?

[balazsorban44]

Totally fine if you use axios, especially if you are used to it, it just may be unnecessary, in my personal opinion.

So the line before is crucial:

if (res.ok) return true
throw data

This means that if you got an OK response (meaning the user has been successfully saved in your db), we want to return true, because returning true in this callback means we can proceed with the signing. throw data will simply send data to the catch block, where we can, for example, log it for debugging, but ultimately if we could not save the user in the db for some reason, we return false, so the signing flow stops. (you could also return a path, to redirect the user to something like "/auth/could-not-login" or something. Check the docs)

I happy to help along the way 🙂

[D2Mat]

Thanks for the explanation. To be sure I understood, I rewrite it "large JavaScript" :

if(res.ok){

   return  true

} else {

  throw data

}

Now, I have another question :

if(res.ok){

   profile.myapiToken = data     // Is that possible ?
   return true

} else {

  throw data 

}

[balazsorban44]

No, you do not want to extend the profile object inside the signIn callback. The name is a bit misleading, it should be called something like isAllowedSignIn or something. The jwt callback is a much better place to extend the session cookie with any data.

res.ok is supposedly what your backend should return if the post request succeeded. Check out https://developer.mozilla.org/en-US/docs/Web/API/Response/ok