laravel-8google-one-tap

Unable to login to socialite using google one tap signin button


I tried almost everything possible but Google One Tap signin button is returning 504 error in my Laravel 8 application. I am using laravel socialite to handle login process and if i place a link button instead Google Signin Button it works absolutely fine.

Here is my One Tap Button Code :

<div id="g_id_onload" data-client_id="{{ config('services.google.client_id') }}" data-context="signin" data-login_uri="{{ route('frontend.auth.social.login', 'google') }}" data-auto_prompt="true"></div>

<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="filled_blue" data-text="signin_with" data-size="large" data-logo_alignment="left"></div>

this is the error I am getting:

Oops! An Error Occurred The server returned a "405 Method Not Allowed". Something is broken. Please let us know what you were doing when this error occurred. We will fix it as soon as possible. Sorry for any inconvenience caused.


Solution

  • I worked over solution provided by @Mohamed ِRadwan and updated my socialite route file as follows:

    Route::group(['as' => 'auth.'], function () {
    Route::group(['middleware' => 'guest'], function () {
        // Socialite Routes
        Route::any('login/{provider}', [SocialController::class, 'redirect'])->name('social.login');
        Route::get('login/{provider}/callback', [SocialController::class, 'callback']);
    });
    

    });

    This makes the One Tap prompt work as desired with socialite, but the signin in button still doesn't work and throws 419 (means page expired - due to csrf token mismatch) surprising I was sending csrf token as per this post:

    How to handle google one tap with laravel csrf

    Here is my login button code:

        <div id="g_id_onload"
           data-client_id="{{ config('services.google.client_id') }}"
           data-context="signin"
           data-ux_mode="redirect"
           data-login_uri="{{ route('frontend.auth.social.login', 'google') }}"
           data-_token="{{ csrf_token() }}"
           data-auto_prompt="true">
       </div>
       <div class="g_id_signin"
           data-type="standard"
           data-shape="rectangular"
           data-theme="filled_blue"
           data-text="signin_with"
           data-size="large"
           data-logo_alignment="left">
      </div>
    

    It seems that csrf tken is expiring due to the button navigates to google uri to select account and here is where the csrf token gets expired.

    So I turned off csrf verification for google socialite route in my VerifyCsrfToken.php middleware as follows:

     protected $except = [
        'login/google',
    ];
    

    and voila it worked.