I'm using vue-social auth package for google login
Link: https://www.npmjs.com/package/vue-social-auth
As i press the login button i'm getting:
[Vue warn]: Error in v-on handler: "Error: Request handler instance not found"
Here is the way i'm using it:
app.js
import VueSocialauth from 'vue-social-auth'
Vue.use(VueSocialauth, {
providers: {
google: {
clientId: 'XXXXXXXXXX.apps.googleusercontent.com',
redirectUri: 'auth/google/callback' // Your client app URL
}
}
})
View.vue.js
<button @click="AuthProvider('google')">auth Google</button>
method:
AuthProvider(provider) {
var self = this
this.$auth.authenticate(provider).then(response =>{
self.SocialLogin(provider,response)
}).catch(err => {
console.log({err:err})
})
},
SocialLogin(provider,response){
axios.post('/sociallogin/'+provider,response).then(response => {
console.log(response.data)
}).catch(err => {
console.log({err:err})
})
},
Web-routes.js
{
path: '/auth/:provider/callback',
component: {
template: '<div class="auth-component"></div>'
}
},
api.php
Route::post('sociallogin/{provider}', 'Auth\AuthController@SocialSignup');
Route::get('auth/{provider}/callback', 'OutController@index')->where('provider', '.*');
env:
GOOGLE_ID=XXXX
GOOGLE_SECRET=XXXXX
GOOGLE_URL=https://localhost:8000/auth/google/callback
Auth Controller :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Socialite;
class AuthController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Contracts\Support\Renderable
*/
public function SocialSignup($provider)
{
// Socialite will pick response data automatic
$user = Socialite::driver($provider)->stateless()->user();
return response()->json($user);
}
}
via Chebli Mohamed
