get access_token from next_auth to use it with googleapis

[ma3ve]

Question 💬

How to get access_token from next_auth to use it with googleapis,

lets say i am creating a crud app that store the data in google drive, I am using nextjs and next-auth for OAuth implementation for google. i found this https://blog.srij.dev/nextauth-google-access-token so i implemented it. but it logs undefined. and account and access_token don't have values, the params object that we receive in the callback only has a token key. which doesnt contain access_token instead it contains sub,iat,exp,jti

How to reproduce ☕️

just create a nextjs template project and add this to src/pages/api/auth/[...nextauth].ts also get a google_id ,google secret from gcp,enable google drive apis add it in .env file.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import jwt from 'next-auth/jwt'
const secret = process.env.SECRET

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      authorization:{
        params:{
          scope:"openid https://www.googleapis.com/auth/drive.file"
        }
      }
    }),
  ],
  secret: process.env.SECRET,
  callbacks: {
    jwt: ({token, user, account, profile, isNewUser})=> {
      console.log({token,user,account,profile})
      if (account?.accessToken) {
        token.accessToken = account.accessToken;
      }
      return token;
    },
    session: async ({session, user,token}) => {
      session.user = user;
      session.token = token;
      return session
    }
  },

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[0ubbe]

You won't have access to the token until the user is logged in. There's no need to store it in the session, as for your use case there's no need to expose it client-side (which anyway it's insecure).

So having just...

  callbacks: {
    jwt: ({token, account })=> {
      if (account?.access_token) {
        token.accessToken = account.acess_token;
      }
      return token;
    },

and then in your API route doing:

import { getToken } from 'next-auth/jwt'

export default async function (req, res) {
  const token = await getToken({ req })
  
  // this is just pseudo-code, refer to the actual Google API docs...
  return fetch('https://api.google.com/me', {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `token ${token?.accessToken}`
    }
  }

should suffice 👍🏽

[ma3ve]

hey, thanks for letting me know that exposing the access_token to client side is insecure. and I have created a sample route for test
``src\pages\api\getRawToken.ts`

import {getToken,decode} from 'next-auth/jwt'
import  {google} from  'googleapis';

const handler = async(req, res)=> {
	const secret = process.env.SECRET
	const token = await getToken({ req, secret});
	console.log(token?.accessToken)
}
export default handler

which is logging undefined

[ma3ve]

nvm, i solved it. thanks. the problem was, token is stored in access_token not accessToken. thanks for the help