Connecting NextAuth.js/Auth.js v5 & OAuth Google to Google API requests?
Unanswered
California Quail posted this in #help-forum
California QuailOP
Hi Guys,
So far, I've got next running w/ nextauth.js v5 (I guess it's just called auth.js now), and have been successful in authN w/ users using their google account. I'm now on the phase of gathering API data on the user from the google ads and analytics apis - but this is proving challenging. I'm not sure what the best method is to access the apis would be? So far I know I have to:
1) Have the frontend page that will display the data make the initial request to my backend server/api router
2) Figure out how to get the user access or refresh token from google oauth to use in the api requests from auth.js. I'm not sure where to begin there, but we're using JWTs which I believe should be used to request a refresh token from google to then access their APIs? I've also read some confusing stuff about google refresh tokens - that google only provides them during your initial sign on / access approval - and that storing the token should really be done using a DB like mysql instead of the JWT method? The opposite side of that is I think you can destroy the JWT, but then the user will also have to go thru the project credential screen everyt time the log in? Would prefer to stick w/ JWTs if possible as they would require a lot less configuration.
3) Make sure the request has the right scope (when users oauth in, they grant access to the ads/analytics apis, but I also need to include the scope in my API request?)
4) Create a callback page that will handle the json response from google (at least i hope it's a json response)
5) Present the data to the components on the front end requesting the data
I'm new to nextjs, authjs, and google apis so this entire project has been a challenge. Anyone advice that can point me in the right direction is much appreciated!
So far, I've got next running w/ nextauth.js v5 (I guess it's just called auth.js now), and have been successful in authN w/ users using their google account. I'm now on the phase of gathering API data on the user from the google ads and analytics apis - but this is proving challenging. I'm not sure what the best method is to access the apis would be? So far I know I have to:
1) Have the frontend page that will display the data make the initial request to my backend server/api router
2) Figure out how to get the user access or refresh token from google oauth to use in the api requests from auth.js. I'm not sure where to begin there, but we're using JWTs which I believe should be used to request a refresh token from google to then access their APIs? I've also read some confusing stuff about google refresh tokens - that google only provides them during your initial sign on / access approval - and that storing the token should really be done using a DB like mysql instead of the JWT method? The opposite side of that is I think you can destroy the JWT, but then the user will also have to go thru the project credential screen everyt time the log in? Would prefer to stick w/ JWTs if possible as they would require a lot less configuration.
3) Make sure the request has the right scope (when users oauth in, they grant access to the ads/analytics apis, but I also need to include the scope in my API request?)
4) Create a callback page that will handle the json response from google (at least i hope it's a json response)
5) Present the data to the components on the front end requesting the data
I'm new to nextjs, authjs, and google apis so this entire project has been a challenge. Anyone advice that can point me in the right direction is much appreciated!
6 Replies
@California Quail Hi Guys,
So far, I've got next running w/ nextauth.js v5 (I guess it's just called auth.js now), and have been successful in authN w/ users using their google account. I'm now on the phase of gathering API data on the user from the google ads and analytics apis - but this is proving challenging. I'm not sure what the best method is to access the apis would be? So far I know I have to:
1) Have the frontend page that will display the data make the initial request to my backend server/api router
2) Figure out how to get the user access or refresh token from google oauth to use in the api requests from auth.js. I'm not sure where to begin there, but we're using JWTs which I believe should be used to request a refresh token from google to then access their APIs? I've also read some confusing stuff about google refresh tokens - that google only provides them during your initial sign on / access approval - and that storing the token should really be done using a DB like mysql instead of the JWT method? The opposite side of that is I think you can destroy the JWT, but then the user will also have to go thru the project credential screen everyt time the log in? Would prefer to stick w/ JWTs if possible as they would require a lot less configuration.
3) Make sure the request has the right scope (when users oauth in, they grant access to the ads/analytics apis, but I also need to include the scope in my API request?)
4) Create a callback page that will handle the json response from google (at least i hope it's a json response)
5) Present the data to the components on the front end requesting the data
I'm new to nextjs, authjs, and google apis so this entire project has been a challenge. Anyone advice that can point me in the right direction is much appreciated!
<:fine:753870958363803719>
Sun bear
Quick question. You really need the user to access the apis?
Or are the google ads/analytics accounts accounts where you have access?
I ask becaus in case you have access common way whould be to use a service account for authentication
Or are the google ads/analytics accounts accounts where you have access?
I ask becaus in case you have access common way whould be to use a service account for authentication
California QuailOP
@Sun bear :To be honest I'm not 100% certain. The goal is to generate bad click reports based on data the app will pull on the customers behalf from the adwords and analytics apis to help people get their advertising $ back from google. Whether that means I have to have a manager account that they've granted access to, or the api uses their OAuth creds to make the request - I'm still a bit grey on. The account manager access I think is designed more for advertising agencies to manage the user's ad campaign on their behalf - so I doubt the service account route would work for our scenario.
California QuailOP
What's worse is I think google has some weird conditions for getting a refresh token - which is one of about 5-6 variables they require to call their API. Unless there's a better way, I'm using console.log and the jwt callback function as part of my auth.js file to get the account.refresh_token value - but it keeps coming back undefined. The good news is i am printing out the authN token using account.access_token.
I read something about google only offers a refresh token on the initial sign in after the user approves the credentials requested during the OAuth process - which may be why I'm not seeing it; however, even after going into my google account and removing my apps access to get a refresh token to generate - it's still coming up empty - so I'm not even sure if I'm requesting it right. Here's my callback code:
callbacks: {
async jwt({ token, user, account, profile, isNewUser }) {
// If it's the initial sign-in, the account and user will be available
if (account && user) {
token.id = user.id;
token.accessToken = account.access_token;
token.refreshToken = account.refresh_token;
console.log("Authjs Callback JWT (initial sign-in) - access token:", token.accessToken,"\n");
console.log("Authjs Callback JWT (initial sign-in) - **REFRESH TOKEN**", token.refreshToken,"\n");
}
// For subsequent requests, only the token is available
else {
console.log("Authjs Callback JWT (subsequent sign-in) - access token:", token.accessToken,"\n");
console.log("Authjs Callback JWT (subsequent sign-in) - **REFRESH TOKEN**", token.refreshToken,"\n");
}
return token;
},
I read something about google only offers a refresh token on the initial sign in after the user approves the credentials requested during the OAuth process - which may be why I'm not seeing it; however, even after going into my google account and removing my apps access to get a refresh token to generate - it's still coming up empty - so I'm not even sure if I'm requesting it right. Here's my callback code:
callbacks: {
async jwt({ token, user, account, profile, isNewUser }) {
// If it's the initial sign-in, the account and user will be available
if (account && user) {
token.id = user.id;
token.accessToken = account.access_token;
token.refreshToken = account.refresh_token;
console.log("Authjs Callback JWT (initial sign-in) - access token:", token.accessToken,"\n");
console.log("Authjs Callback JWT (initial sign-in) - **REFRESH TOKEN**", token.refreshToken,"\n");
}
// For subsequent requests, only the token is available
else {
console.log("Authjs Callback JWT (subsequent sign-in) - access token:", token.accessToken,"\n");
console.log("Authjs Callback JWT (subsequent sign-in) - **REFRESH TOKEN**", token.refreshToken,"\n");
}
return token;
},
I'm also trying to store the refresh token to the session by calling session as part of the callbacks in auth.js. Here's that code:
async session({ session, token }) {
session.id = token.id;
session.accessToken = token.accessToken;
session.refreshToken = token.refreshToken;
//console.log("Authjs Callback Session:", session);
return session;
},
So far, nothing has been successful in getting a refresh token - but to be honest, I'm not even sure my workflow for making the request makes sense since I'm so new to google apis / next
Thanks for your help!!!
async session({ session, token }) {
session.id = token.id;
session.accessToken = token.accessToken;
session.refreshToken = token.refreshToken;
//console.log("Authjs Callback Session:", session);
return session;
},
So far, nothing has been successful in getting a refresh token - but to be honest, I'm not even sure my workflow for making the request makes sense since I'm so new to google apis / next
Thanks for your help!!!
California QuailOP
This is what my log is showing that follows the route - even using a completely new gmail account won't produce the refresh token on the initial or subsequent requests 😦
/login
true
○ Compiling /login ...
✓ Compiled /login in 5.9s (2583 modules)
/api/auth/providers
false
○ Compiling /api/auth/[...nextauth] ...
✓ Compiled /api/auth/[...nextauth] in 2.2s (1503 modules)
/api/auth/csrf
false
/api/auth/signin/google
true
/api/auth/callback/google
false
Authjs Callback JWT (initial sign-in) - access token: ya29.a0AXooCguJzDc0wwmd5j3HfNgPBQ3LQfrSmUky69lqoyRiSE8wCR8U6XZ8KyaaWGxiUbLccnfnAlM0BlvYMGQ19nS2sGDeaodjcX7ZMh48-AlKoN8nYMZXTGa4q4mshqetaM2g2ntidnWNhTTju97_zMxBRPsaXJf2AHitaCgYKAf4SARESFQHGX2Misu2gwKk4heWlbo9p8_8SkQ0171
Authjs Callback JWT (initial sign-in) - **REFRESH TOKEN** undefined
Authjs Callback JWT (subsequent sign-in) - access token: ya29.a0AXooCguJzDc0wwmd5j3HfNgPBQ3LQfrSmUky69lqoyRiSE8wCR8U6XZ8KyaaWGxiUbLccnfnAlM0BlvYMGQ19nS2sGDeaodjcX7ZMh48-AlKoN8nYMZXTGa4q4mshqetaM2g2ntidnWNhTTju97_zMxBRPsaXJf2AHitaCgYKAf4SARESFQHGX2Misu2gwKk4heWlbo9p8_8SkQ0171
Authjs Callback JWT (subsequent sign-in) - **REFRESH TOKEN** undefined
/login
true
○ Compiling /login ...
✓ Compiled /login in 5.9s (2583 modules)
/api/auth/providers
false
○ Compiling /api/auth/[...nextauth] ...
✓ Compiled /api/auth/[...nextauth] in 2.2s (1503 modules)
/api/auth/csrf
false
/api/auth/signin/google
true
/api/auth/callback/google
false
Authjs Callback JWT (initial sign-in) - access token: ya29.a0AXooCguJzDc0wwmd5j3HfNgPBQ3LQfrSmUky69lqoyRiSE8wCR8U6XZ8KyaaWGxiUbLccnfnAlM0BlvYMGQ19nS2sGDeaodjcX7ZMh48-AlKoN8nYMZXTGa4q4mshqetaM2g2ntidnWNhTTju97_zMxBRPsaXJf2AHitaCgYKAf4SARESFQHGX2Misu2gwKk4heWlbo9p8_8SkQ0171
Authjs Callback JWT (initial sign-in) - **REFRESH TOKEN** undefined
Authjs Callback JWT (subsequent sign-in) - access token: ya29.a0AXooCguJzDc0wwmd5j3HfNgPBQ3LQfrSmUky69lqoyRiSE8wCR8U6XZ8KyaaWGxiUbLccnfnAlM0BlvYMGQ19nS2sGDeaodjcX7ZMh48-AlKoN8nYMZXTGa4q4mshqetaM2g2ntidnWNhTTju97_zMxBRPsaXJf2AHitaCgYKAf4SARESFQHGX2Misu2gwKk4heWlbo9p8_8SkQ0171
Authjs Callback JWT (subsequent sign-in) - **REFRESH TOKEN** undefined
Sun bear
Ah okay got it. I am working a lot with google apis but only with using a service account for authentication.
In your case you really need the authentication from the current user.
But I would not handle it in the initial signin. I knwo it from other tools like salesforce that they have "connectors" in their interface where you can click eg "Google Ads" or "Google Analytics" and then you have to click it and select an account that will be used to connect to these tools.
E.g. user A uses your website but user A doesnt have access to alle the google tools. Then the user can choose a different account to authenticate the connectors.
I think its quite complex but I never handled it without service account so sorry I cant really say more about the flow with the refesh token. Maybe someone else here can help
In your case you really need the authentication from the current user.
But I would not handle it in the initial signin. I knwo it from other tools like salesforce that they have "connectors" in their interface where you can click eg "Google Ads" or "Google Analytics" and then you have to click it and select an account that will be used to connect to these tools.
E.g. user A uses your website but user A doesnt have access to alle the google tools. Then the user can choose a different account to authenticate the connectors.
I think its quite complex but I never handled it without service account so sorry I cant really say more about the flow with the refesh token. Maybe someone else here can help