'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 |
|---|
