Cookie authorization from social networks

[CodeXiD]

Hi guys, there is such a question, I have @ nuxt / auth-next installed, now there is such a need to make oauth2 for google, the authorization will then be intercepted by the backend and set the authorization cookie (XSRF token), but since google authorization uses the oauth scheme and not cookie, it turns out that I am not authorized for nuxt / auth-next, do you have any ideas / suggestions? Can anyone come across this?

P.S. : I know that these are different schemes, but I can't solve the problem with authorization
Config:

google: {
      clientId: '**********-*******************.apps.googleusercontent.com',
      url: API_PATH,
      endpoints: {
        authorization: 'https://accounts.google.com/o/oauth2/auth',
        user: {url: '/api/v1/user', method: 'get'},
      },
      redirectUri: 'http://api-path.example.com/auth/google/callback',
      responseType: 'code',
      accessType: 'offline',
      grantType: 'authorization_code',
      codeChallengeMethod: '',
    },
    ```

[alex-lechner]

Hey! Working on the same thing: Login in with google on the backend, create a session cookie, and redirect to the nuxt app. It's confusing as hell and I don't have a working example yet...
I can create a session cookie but I don't know how to fetch it with the auth module so the auth module recognizes that I'm authenticated

[Red-Asuka]

Working on the same thing, may be you need to implement your own google signin, instead of using the google signin that comes with the auth module.
Like this:

nuxt.config.ts

strategies: {
  cookie: {
    cookie: {},
    user: {
      property: 'user',
      autoFetch: true,
    },
    endpoints: {
      login: { url: '/signin', method: 'post' },
      logout: { url: '/signout', method: 'get' },
      user: { url: '/user_info', method: 'get' },
    },
  },
  customGoogle: {
    scheme: 'cookie',
    cookie: {},
    user: {
      property: 'user',
      autoFetch: true,
    },
    endpoints: {
      login: { url: '/google_login', method: 'post' },
      logout: { url: '/signout', method: 'get' },
      user: { url: '/user_info', method: 'get' },
    },
  },
},
},

signin.vue

<button v-google-signin-button="googleClientId" class="button is-white px-6 py-2" style="width: 100%">
  <svg class="icon mr-2" aria-hidden="true" style="font-size: 20px">
    <use xlink:href="#icon-google"></use>
  </svg>
  {{ $t('auth.signinWithGoogle') }}
</button>

const OnGoogleAuthSuccess = (idToken: string) => {
  if (idToken) {
    $auth
      .loginWith('customGoogle', { data: { idToken, continue: getQueryString('continue') } })
  }
}

[jonalxh]

I have the same problem, I'm trying to set a Google sign in button back the backend works with cookie based authentication and I'm not able no achieve that the requests are sent to the server with the custom params I need.

[CodeXiD]

We solved this problem using the native google strategy.
When loginWith is called, the "authorization" endpoint (https://accounts.google.com/o/oauth2/auth) is triggered, after authorization, Google should redirect us to the frontend with GET parameters, at which point the token endpoint (/api /login/google for example), which goes to the back and authorizes according to the parameters that came from GET (goes to Google with the received token and checks the authorization), and returns cookies upon successful authorization.

In fact, everything works out of the box, but it took us a lot of time to debug this kind of authorization.