How to prevent next-auth to exchange code for token (google provider)

[ValGeorgiev]

Hi all, I am wondering if it's possible to prevent next-auth to exchange code for token with google.

Currently the next auth is executing the whole flow. But I am wondering if I can prevent the "Exchange code for token" step, so I can use the "code" and send it to our external API where they can verify the code with google and continue with the flow.

[DongjiY]

Did you end up using another library? Facing the same issue here.

[ValGeorgiev]

@DongjiY yes, I used both next-auth and another library. For google is @react-oauth/google

Basically I did the following:

1. On the client side create the google button that should do the login:

import { useGoogleLogin } from '@react-oauth/google'

const googleLogin = useGoogleLogin({
    onSuccess: async (codeResponse) => {
      await linkGoogle(
        {
          code: codeResponse.access_token,
        },
        {
          onError: async (error: any) => {
            
          },
          onSuccess: () => {
            reload()
          },
        }
      )
    },
    flow: 'implicit',
  });

2. Create an http request, in my case the function linkGoogle:

const { data } = await API_INSTANCE.post(`auth/oauth/google/link`, {
  oAuthToken: code,
})

3. This http request will call [...nextauth].ts NextAuth -> authorize method. Where you can send the token to external API or whatever you want.

 async authorize({ token, provider }, _req) {
       if (provider === 'google' && token) {
         try {
           const response = await axios.post(
             API_ENDPOINT, //your external API endpoint
             {
               oAuthToken: token
             },
           )
           if (response?.data) {
             return {
               token: response.data,
             }
           }
 
           return null
         } catch (e: any) {
           throw new Error(e?.response?.data)
         }
       }
  }

You can use the same approach if you are doing twitter/discord or any other social network logins.

[DongjiY]

Ah ok. I actually came from the react-oauth/google library because I could not find a way to get support for access type offline with the auth-code flow.

I wrote this custom provider for next-auth to store the code in the session profile. It's not very elegant (especially to work with the typings) but I was able to get it to work. Leaving this here for anyone looking in to this in the future.

import { OAuthConfig } from "next-auth/providers/oauth";

export default function GoogleCodeProvider(): OAuthConfig<any> {
  return {
    id: "google-code",
    name: "Google Code",
    type: "oauth",
    clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
    clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
    authorization: {
      url: "https://accounts.google.com/o/oauth2/v2/auth",
      params: {
        prompt: "consent",
        access_type: "offline",
        response_type: "code",
        scope:
          "openid email profile https://www.googleapis.com/auth/gmail.readonly",
      },
    },
    token: {
      async request({ params }): Promise<{ tokens: TokenSet }> {
        // you can pass this to your backend here
        return {
          tokens: {
            code: params.code,
            state: params.state,
          },
        };
      },
    },
    userinfo: {
      async request({ tokens }) {
        return new Promise((resolve) => {
          resolve({
            name: tokens.code as string,
          });
        });
      },
    },
    profile(profile) {
      return {
        id: "SUCCESS",
        name: profile.name,
      };
    },
  };
}

To use it in your client components you can use the useSession hook and the code will be in data.user.name

You'll need to set the redirect url to /api/auth/callback/google-code in google cloud console