'Laravel Socialite + Nuxt - returns 500 Internal Server Error after redirecting back to app

I'm using Nuxt v. 2.15.7 with @nuxtjs/auth-next v. 5.0.0-1643791578.532b3d6 and Laravel v. 8.81.0 as my API server for frontend app.

From Nuxt app I call $auth.loginWith('google) which redirects me to Google to choose from my accounts for login and then redirects me back to https://example.com/login. This URL is set up in my Laravel API server config/services.php file:

'google' => [
        'client_id' => 'xxx',
        'client_secret' => 'xxx',
        'redirect' => 'https://example.com/login'
    ],

It is also defined in Authorized redirect URIs of Google Developer Console for OAuth.

In nuxt.config.js I have defined google strategy and also endpoints for my API server:

google: {
        clientId: 'xxx',
        clientSecret: 'xxx',
        responseType: 'code',
        codeChallengeMethod: '',
        endpoints: {
          token: 'https://api2.example.com/api/auth/socialite/google',
          userInfo: 'https://api2.example.com/api/auth/user'
        },
        token: {
          property: 'access_token',
        }
      }

But when process of authorization continues to https://api2.example.com/api/auth/socialite/google, it returns:

Status: 500Internal Server Error.

In console it says:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api2.example.com/api/auth/socialite/google. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.

So I tried to check CORS settings on my API server but everything looks fine. I'm using fruitcake/laravel-cors v. 2.0.5 and this is my setting in config/cors.php file:

'paths' => ['api/*'], // I tried also empty value and '/*'
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

I also tried to look into log file in Laravel, but there is none. Storage/logs folder permission is set on 777 as someone on forum was suggesting to do this when there is no error logged.

However, when I try to log in using Google on my localhost, it redirects me back with no error (Nuxt and Laravel are both on localhost). So I was thinking it is really some issue with CORS, but I don't know where it could be.

So I'm stuck in getting more specific information on the error, and if it is really CORS issue, I also don't understand what is missing in my settings.

Thanks for advice.

Update

I found out (and this answer also confirmed it: https://stackoverflow.com/a/68917936/6600537) that the problem is probably with sending url-encoded code parameter to my Server https://api2.example.com/api/auth/socialite/google. My code parameter contains slash "/" in it, and it is changed to "%2F". In Postman I got even this error: Malformed auth code.

But I don't know what would be the solution? Should I decode it back? But where? On the frontend, or in the Laravel server?

Update #2

I published my Laravel backend to my custom server and it worked. So it looks like there is something with my provider's settings for Apache server to which I don't have root permissions. But I still would like to know what was the problem.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source