Failed to exchange the Google token

Hello everyone, has anyone here ever encountered the error that the code from Google OAuth is not valid when I try to exchange it for a token from the backend? I followed this article to implement a login flow with Google using nuxt-utils, but when the code is sent to the backend, it becomes invalid, resulting in the error: failed to exchange Google token https://medium.com/@tony.infisical/guide-to-using-oauth-2-0-to-access-google-apis-dead94d6866d This is my code to handle login google oauth.
// @ts-nocheck
export default defineOAuthGoogleEventHandler({
config: {
authorizationURL: 'https://accounts.google.com/o/oauth2/auth',
tokenURL: 'https://oauth2.googleapis.com/token',
userURL: 'https://www.googleapis.com/oauth2/v3/userinfo',
authorizationParams: {
scope: 'email profile openid'
},
},
// @ts-ignore
async onSuccess(event) {
const query = await getQuery(event);
const code = query.code; // This code isn't valid when I sent to backend

console.log(query)
// Check if the data user is matched from the database
// If it's matched then then make user login else redirect user to register page
// Construct a script to close the popup and notify the parent
const closeScript = `
<script>
if (window.opener) {
window.opener.postMessage({ success: true, code: '${code}' }, '*');
window.close();
}
</script>
`;

// Return a response that runs the script
// return sendRedirect(event, '/auth/register')
return send(event, closeScript, 'text/html');
},
onError(event, error) {
console.error('Google OAuth error:', error);
// You can choose to send an error response instead of redirecting
return sendRedirect(event, '/')
},
})
// @ts-nocheck
export default defineOAuthGoogleEventHandler({
config: {
authorizationURL: 'https://accounts.google.com/o/oauth2/auth',
tokenURL: 'https://oauth2.googleapis.com/token',
userURL: 'https://www.googleapis.com/oauth2/v3/userinfo',
authorizationParams: {
scope: 'email profile openid'
},
},
// @ts-ignore
async onSuccess(event) {
const query = await getQuery(event);
const code = query.code; // This code isn't valid when I sent to backend

console.log(query)
// Check if the data user is matched from the database
// If it's matched then then make user login else redirect user to register page
// Construct a script to close the popup and notify the parent
const closeScript = `
<script>
if (window.opener) {
window.opener.postMessage({ success: true, code: '${code}' }, '*');
window.close();
}
</script>
`;

// Return a response that runs the script
// return sendRedirect(event, '/auth/register')
return send(event, closeScript, 'text/html');
},
onError(event, error) {
console.error('Google OAuth error:', error);
// You can choose to send an error response instead of redirecting
return sendRedirect(event, '/')
},
})
Medium
Guide to using OAuth 2.0 to access Google APIs
Authenticating with Google APIs can enable your web application to access services on behalf of your users. In this article, I demonstrate…
3 Replies
kapa.ai
kapa.ai19h ago
Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have enough specific information to directly address the "Failed to exchange the Google token" error you're encountering with the Nuxt OAuth implementation. However, I can provide some general guidance based on Nuxt authentication practices. The error you're experiencing suggests there might be an issue with the OAuth flow or token exchange process. Here are a few things you could check: 1. Ensure that your Google OAuth credentials (client ID and client secret) are correctly configured and match between your frontend and backend. 2. Verify that the scopes you're requesting ('email profile openid') are correctly set up in your Google Cloud Console project. 3. Check if there's any mismatch in the redirect URI between what's configured in the Google Cloud Console and what's actually used in your application. 4. Make sure your backend is correctly set up to handle the OAuth code exchange. The error suggests the issue might be on the server-side when trying to exchange the code for a token. 5. Double-check that you're using the latest version of nuxt-auth-utils (if that's what you're using based on the defineOAuthGoogleEventHandler in your code). If you continue to face issues, you might want to consider using a more established authentication solution for Nuxt. For example, the Nuxt Authentication Module provides robust support for various authentication strategies, including OAuth. Alternatively, you could look into implementing a simpler session-based authentication as described in the Nuxt documentation on Sessions and Authentication. This approach might be easier to debug and implement, especially if you're not specifically required to use Google OAuth. If you need further assistance, it would be helpful to see the backend code handling the token exchange, as well as any specific error messages or logs from both the frontend and backend. Additionally, ensuring all your Nuxt and related packages are up to date might help resolve any potential compatibility issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai19h ago
<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Adnan Erlansyah
Adnan ErlansyahOP18h ago
Upp Up please

Did you find this page helpful?