Google Sign-in in vuejs spa and laravel api

Question

I have a single page application with vue.js that uses Laravel 5.5 as its api. I want to add google sign-in to it but I am confused as where to start. I have used laravel socialite before to add google sign-in but that was for pure laravel application and not a laravel api.

Can anyone point to to some resources I can read. Is there a package like socialite for this, Is there a way to use socialite to use in this case as well.

Answer 1

In adition to the previous answer, i used vue-hellojs to add the goolgle's authentication window and get a token (with 'email, profile' scope).

Then send it to the laravel backend (with google socialite provider and CORS installed) who check if there is a user with that email and respond with a laravel jwt-token to the vue SPA as login do.

Answer 2

Take a look at hellojs

Hellojs makes it easy. Allows you to open a popup for login with the social provider and returns an access token. then you use the access token in your backend to get the user.

so your js would look something like this

 hello
  .login(network)
  .then(
    () => {
      const authRes = hello(network).getAuthResponse();
      axios
        .get('api/link/to/sociak/callback',{
            params:{
              access_token : authRes.access_token, 
              provider: network
            }
         })
        .then((response) => {console.log(response.data.token)})})
        .catch((error) => {console.log(error.response.data)})
    },
    (e) => {
      console.log(e)
    }
  )

and in your controller you handle it like ..

public function handleProviderCallback(Request $request)
{
    $s_user = Socialite::with($request->provider)->stateless()->userFromToken($request->access_token);
    //your logic here...
}

Hope it makes it clearer for you. I was just struggling with this and hello js made my life simple