OAuth login with Laravel 10 and VueJS 3

To implement OAuth login with Discord in Laravel 8 and VueJS 3, you can follow these steps:

1. Install the Socialite package using composer:

composer require laravel/socialite

1. Create a Discord app and get the client ID and secret from the Discord developer portal.

2. Add the following environment variables to your .env file:

DISCORD_CLIENT_ID=your_client_id
DISCORD_CLIENT_SECRET=your_client_secret
DISCORD_REDIRECT_URI=http://localhost:8000/auth/discord/callback

1. Create a route for the Discord login and callback:

Route::get('/auth/discord', function () {
    return Socialite::driver('discord')->redirect();
});

Route::get('/auth/discord/callback', function () {
    $user = Socialite::driver('discord')->user();
    // Handle the user data
});

1. In your Vue component, create a button that redirects the user to the Discord login page:

<template>
  <button @click="loginWithDiscord">Login with Discord</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    loginWithDiscord() {
      axios.get('/auth/discord').then(response => {
        window.location.href = response.data.redirect;
      });
    }
  }
}
</script>

1. In the Laravel callback route, handle the user data and redirect the user to the appropriate page:

Route::get('/auth/discord/callback', function () {
    $user = Socialite::driver('discord')->user();
    // Handle the user data
    return redirect('/dashboard');
});

That's it! You should now be able to implement OAuth login with Discord in your Laravel 8 and VueJS 3 application.