Next Auth Google Provider does not call the backend endpoint
I am currently working on integrating Google provider login functionality into my service, leveraging Nuxt 3 with Sidebase. The existing authentication system is operational but was developed using Nuxt 2 with the auth module. My goal is to replicate the same behavior in the new service, utilizing the latest technologies.
Old Setup:
// https://auth.nuxtjs.org/providers/google.html
// https://auth.nuxtjs.org/schemes/oauth2.html
google: {
authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth', // It's the same default URL used by nuxt-auth but just to make sure.
scope: ['openid', 'email', 'profile'], // The necessary scopes.
client_id: process.env.GOOGLE_CLIENT_ID,
response_type: 'code', // Because we use our own flow (Google code authorization flow)
access_type: 'offline', // Because we use our own flow (Google code authorization flow)
access_token_endpoint:
${process.env.API_BASE_URL}/i/auth/google/
, // Our own flow request endpoint.
userinfo_endpoint: ${process.env.API_BASE_URL}/api/v1/users/current/
,
},
New Setup:
https://next-auth.js.org/providers/google
GoogleProvider.default({
name: 'Google',
clientId: '000000000000000',
authorization: {
authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth',
access_token_endpoint: ${useRuntimeConfig().public.API_BASE_URL}/i/auth/google/
,
userinfo_endpoint: ${useRuntimeConfig().public.API_BASE_URL}/api/v1/users/current/
,
params: {
scope: 'openid email profile',
response_type: 'code',
access_type: 'offline',
redirect_uri: 'https://staging.get.it/callback',
},
},
}),nuxt auth docs
OAuth2
oauth2 supports various oauth2 login flows. There are many pre-configured providers like auth0 that you may use instead of directly using this scheme.
Google | NextAuth.js
Documentation
7 Replies
Any nuxt auth experts out here? We could use the help...
Anyone have a chance to take a look here, we could really use the help!
I havent used Google auth before so I probably won't be of much help, however I don't see you explaining the issue or errors you are facing so if someone was able to help they'd have no idea where you're stuck
@warflash oh no! You are right, so sorry about that, we will update that right now...thank you for taking the time to comment and try and assist.
No problem thank you for the feedback I recorded this video I believe it will make it easier to understand
I can't give any particular feedback unfortunately, but based on what I saw I might have run into something similar, not 100% sure. https://github.com/nextauthjs/next-auth/issues/591#issuecomment-699906051 this helped me understand what was going on iirc + instead of googling for sidebase google for next auth/authjs since sidebase is just a wrapper.
there's also https://github.com/sidebase/nuxt-auth/issues/664 which seems to be precisely your issue, so in case you're not the person that opened it I recommend tracking that
Thank you for reply @warflash but I believe my issue is different, I am able to get the redirect_uri working my problem is after I get redirected to the callback URL the old setup calls the
/i/auth/google/
endpoint which is not happening in the new setup
In simpler terms, I'm currently developing a website with Nuxt3, Vue3, and TypeScript, and I'm in the process of integrating Google authentication. To achieve this, I'm utilizing Sidebase Nuxt Auth. The authentication flow requires redirecting users to https://account.staging.get.it/callback and calling an endpoint on the backend to log them into their account successfully.@elizeorocha here is the issue exactly, with nuxt 3, with nuxt 2, with some other service on the system?