Laravel Vue Socialite

Laravel Vue Socialite is a package that integrates Laravel, Vue.js, and Socialite to provide social authentication capabilities in your Laravel and Vue.js applications.

Installation

To install Laravel Vue Socialite, follow these steps:

Require the package via Composer:

composer require overtrue/laravel-socialite

Add the Socialite service provider in the providers array of your config/app.php file:

'providers' => [
    // Other service providers...
    Overtrue\LaravelSocialite\ServiceProvider::class,
],

Run the migration to create the socialite tables:

php artisan migrate

Usage

Here’s an example of how you can use Laravel Vue Socialite:

Backend (Laravel)

In your Laravel application, you first need to configure the socialite providers. This can be done in the config/services.php file:

'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => env('GITHUB_REDIRECT_URL')
],

Next, you can create a route for the authentication process:

Route::get('/auth/{provider}', 'Auth\SocialAuthenticationController@redirectToProvider');

And a callback route to handle the response:

Route::get('/auth/{provider}/callback', 'Auth\SocialAuthenticationController@handleProviderCallback');

Finally, you need to create the controller methods to handle the authentication process:

public function redirectToProvider($provider)
{
    return Socialite::driver($provider)->redirect();
}

public function handleProviderCallback($provider)
{
    $user = Socialite::driver($provider)->user();
    // Process the authenticated user
    // Redirect or do whatever you need
}

Frontend (Vue.js)

In your Vue.js application, you can use Laravel Vue Socialite to authenticate users via social providers. Here’s an example of how to use the axios library to make a request to the Laravel backend:

let socialLogin = provider => {
  axios.get(`/auth/${provider}`)
    .then(response => {
      console.log(response.data);
      // Redirect or do whatever you need
    })
    .catch(error => {
      console.log(error);
      // Handle error
    });
}

Conclusion

Laravel Vue Socialite provides a convenient way to implement social authentication in your Laravel and Vue.js applications. By following the installation and usage steps outlined above, you can easily integrate social login functionality into your project.

Laravel Vue Socialite