How can I use Laravel's socialite API from Vuejs?

For more information check this link : https://laravel.com/docs/10.x/socialite

Here's a general idea of how to handle this:

Login Route in Vue.js: When the user clicks on the "Login with..." button, you'll want to make a request from Vue.js to a new endpoint in your Laravel API (let's call it /api/login/{provider}) where {provider} is the name of the Socialite driver (like 'google', 'facebook', etc).

Laravel Redirect to Provider: The /api/login/{provider} route in your Laravel API should handle redirecting to the OAuth provider's login page. This can be done using the Socialite's redirect method. This would look something like:

Route::get('login/{provider}', function ($provider) {
    return Socialite::driver($provider)->stateless()->redirect();
});

Provider Callback to Laravel: After successful login with the OAuth provider, they will redirect back to a callback URL you've specified in the provider's settings. This should be another endpoint in your Laravel API, e.g. /api/login/{provider}/callback.

Laravel Handle Provider User: Here you'll want to handle the incoming request, use Socialite to get the User from the provider, and then either find or create the User in your own database. This would look something like:

Route::get('login/{provider}/callback', function ($provider) {
    $providerUser = Socialite::driver($provider)->stateless()->user();
    $user = User::firstOrCreate(
        ['provider_id' => $providerUser->getId()],
        ['email' => $providerUser->getEmail(), 'name' => $providerUser->getName()]
    );

    // create a token for the user and return it
    $token = $user->createToken('Token Name')->accessToken;
    return response()->json(['token' => $token]);
});

Note that I've used the stateless() method on the Socialite driver because API requests are stateless.

I think it all

now for the view file eg : Login.vue u will get something linke that...

<template>
  <button @click="loginWithGoogle">Login with Google</button>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const loginWithGoogle = async () => {
      try {
        const response = await axios.get('http://localhost:{laravel-port}/api/login/google');
        localStorage.setItem('token', response.data.token);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      loginWithGoogle,
    };
  },
};
</script>

I hope this will help you ;p