get access_token from next_auth to use it with googleapis

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 blog so i implemented it. but it logs undefined.

src/pages/api/auth/[...nextauth].ts

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
    }
  },
});

and I created a route with nextjs to get the access token

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

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

any help would be great. thanks

Proteose

Whats your question exactly? – Amesace

@DaImTo sorry, i edited the question, basically I want to know how to get access to access_token so I can use it with googleapis. – Proteose

@emkay i am looking to implement auth for google drive upload. on click of a button what should I call to get the auth consent prompt show up and return the access token? – Ambiguity

Answer 1

the google's token is stored in account.access_token not account.accessToken. so the jwt callback must be

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

and it is better not to expose tokens on clients side which I done in session callback. it is insecure.

Proteose

So do you have an alternative of storing the token client side as you mention it is 'insecure', so how would one implement a more 'secure' way? – Pahang

@Pahang A more secure way would be to store the tokens in a database. – Squeaky

Wouldn't we need the id_token to send to a backend to verify the user? I am confused how I would use access_token to verify with google apis. – Undercover

Answer 2

As stated in the documentation, you must forward any data you want to be available in the token, such is your accessToken value:

The session callback is called whenever a session is checked. By default, only a subset of the token is returned for increased security. If you want to make something available you added to the token through the jwt() callback, you have to explicitly forward it here to make it available to the client.

So, you just have to add this to your session callback:

  session.accessToken = token.accessToken;

Bernardina

I tried it, token doesn't contain access_token. instead token is a jwt object. – Proteose

And are you sure that both account and accessToken have value when in the jwt callback? That's the only other thing that comes to my mind. – Bernardina

no, 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 – Proteose

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