custom external JWT API and refresh token, and the structure of the json user roles follows the external api format, even though logging in using google , facebook , etc providers

[ramadhansyah]

Question 💬

i'm trying to implement a custom external JWT API and refresh token, and the structure of the json user roles follows the external api format, even though logging in using google , facebook , etc providers,

I did it in the callback function.

and the results are as expected

is the way i am doing it right?

or is there another way?

😊 😊

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
async function refreshAccessToken(token) {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_URL_SERVICE}/auth/refresh-token`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'cookie': token.refreshToken
      },
    });
    const json = await response.json()
    return {
      ...token,
      AccessToken: json.AccessToken,
      accessTokenExpires: json.exp,
    }
  } catch (error) {
    return {
      ...token,
      error: 'RefreshAccessTokenError',
    }
  }
}

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'jualaku',
      credentials: {
        email: {
          label: 'email',
          type: 'email',
          placeholder: '[email protected]',
        },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials, req) {
        try {
          const payload = {
            username: credentials.email,
            password: credentials.password
          };
          const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          };
          const res = await fetch(`${process.env.NEXT_PUBLIC_URL_SERVICE}/auth/sign-in`, requestOptions);
          const user = await res.json();
          if (!res.ok) {
            throw new Error(user.exception);
          }

          if (res.ok && user) {
            return { ...user, cookieRefreshToken: res.headers.get('set-cookie') };
          }
          // return null jika data tidak dapat diambil
          return null;
        } catch (error) {
          const errorMessage = e.response.data.message
          // Redirecting to the login page with error messsage in the URL
          throw new Error(errorMessage + '&email=' + credentials.email)
        }

      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          prompt: "consent",
          access_type: "offline",
          response_type: "code"
        }
      },

    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    })
    // ...add more providers here
  ],

  callbacks: {
    async jwt({ token, user, account }) {
      try {
        if (account && user) {
          if (account.type == 'oauth') {

            const payload = {
              access_token: account.access_token,
              provider: account.provider,
              user: user
            };
            const res = await fetch(`${process.env.NEXT_PUBLIC_URL_SERVICE}/auth/login-provider`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(payload)
            });
            const resJson = await res.json();
            user = resJson;
            user = { ...user, cookieRefreshToken: res.headers.get('set-cookie') }
            console.log(user);
          }

          return {
            ...token,
            AccessToken: user.AccessToken,
            refreshToken: user.cookieRefreshToken,
            accessTokenExpires: user.exp,
            row: user.user
          };
        }

        if (Math.floor(Date.now() / 1000) > Number(token.exp)) {
          return await refreshAccessToken(token)
        }
        return token;
      } catch (error) {
        console.log(error);
        throw new Error(error)
      }
    },

    async session({ session, token }) {
      session.user.AccessToken = token?.AccessToken;
      session.user.AccessToken = token?.AccessToken;
      session.user.refreshToken = token?.refreshToken;
      session.user.accessTokenExpires = token?.exp;
      session.user.row = token?.row;
      session.user.email = token?.row?.email;
      session.user.name = token?.row?.nama;
      session.user.avatar = token?.row?.avatar;
      console.log(session)
      return session;
    },
  },
  session: {
    strategy: 'jwt',
    maxAge: 60 * 1, // 1 minute 
  },
});

Server External chek token in provider

if (req.body.provider == 'google') {
    response = await axios.get(`https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=${req.body.access_token}`);
}
if (req.body.provider == 'facebook') {
    response = await axios.get(`https://graph.facebook.com/me?access_token=${req.body.access_token}`);
}

😊 😊

How to reproduce ☕️

😊 😊

Contributing 🙌🏽

No, I am afraid I cannot help regarding this