Laravel socialite

[Pok09]

Hi!

I use laravel (socialite) as backend I tried all the combinations suggested, but I always have the same error.

Client error: GET https://www.googleapis.com/oauth2/v3/userinfo?prettyPrint=false resulted in a 401 Unauthorized response:\n{\n \"error\": \"invalid_request\",\n \"error_description\": \"Invalid Credentials\"\n}\n

I used the same google client id for the backend and the front

Front (Nuxt)

const handleLoginSuccess = async (response: CredentialResponse) => {
  const { credential } = response
  await useFetch('/auth/social/google', {
    method: 'post',
    body: { token:  credential,  provider: 'google' }
  }).then((response) => {
    console.log(response.data.value)
  }).catch((error) => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}

Laravel socialite Socialite::driver($request->input('provider'))->stateless()->userFromToken($request->input('token'));

Merci!!!

[kasvith]

@Pok09 can you provide full code in client side

[Pok09]

@kasvith OK 👍

Nuxt 3 code

<script lang="ts" setup>
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

const handleLoginSuccess = async (response: CredentialResponse) => {
  const { credential } = response
  await useApiFetch('/auth/social/google', {
    method: 'post',
    body: { token: credential, provider: 'google' }
  }).then((response) => {
    console.log(response.data.value)
  }).catch((error) => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}

const handleLoginError = () => {
  console.error('Login failed')
}
</script>

<template>
<div>
<GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  />
</div>
</template>

Laravel : When I use the token received by vue3 Google Sign-in to retrieve user information

class SocialiteController extends Controller
{
 public function handleProviderCallback(Request $request)
    {
        $user = Socialite::driver($request->input('provider'))->stateless()->userFromToken($request->input('token'));
        dd($user);
    }
 }

Response:

Client error: GET https://www.googleapis.com/oauth2/v3/userinfo?prettyPrint=false resulted in a 401 Unauthorized response:\n{\n \"error\": \"invalid_request\",\n \"error_description\": \"Invalid Credentials\"\n}\n

Note : I used the same (Google API) credentials in Laravel and Nuxt

[kasvith]

@Pok09 I checked the source of Laravel Socialite, and it seems they are using Google OAuth2.0 API

To use that you may need a custom button that uses OAuth2.0

But if you still want to get the user from the token received from the GoogleSignInButton you can use the following method

[kasvith]

Let me know if it solves the issue

I thought to develop a more comprehensive guide for these kind of tasks

[Pok09]

@kasvith Work perfectly, With Creating Custom Buttons. With useTokenClient

<script setup lang="ts">
import {
  useTokenClient,
  type AuthCodeFlowSuccessResponse,
  type AuthCodeFlowErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
  console.log("Access Token: ", response.access_token);
};

const handleOnError = (errorResponse: AuthCodeFlowErrorResponse) => {
  const result = await $fetch('/auth/social', {
    method: 'POST',
    body: JSON.stringify({
      token: response.access_token,
      provider: 'google'
    })
  })
};
....
</script>

$user = Socialite::driver($request->input('provider'))->stateless()->userFromToken($request->input('token'));

Thank you for assistance 💯

[kasvith]

@Pok09 glad you made it