title: Laravel socialite and SPA Loging
body: <p>I'm using <code>vue.js</code> and <code>laravel</code> and <code>vue-authenticate</code> whose documentation can be find <a href="https://github.com/dgrubelic/vue-authenticate" rel="nofollow noreferrer">here</a>.</p>
  
  <p>My frontend is running on <code>localhost:8080</code> the backend on <code>127.0.0.1:8000</code></p>
  
  <h3>vue-authenticate config</h3>
  
  <pre><code>Vue.use(VueAuthenticate, {
    baseUrl: 'http://127.0.0.1:8000', // Your API domain
  
    providers: {
      facebook: {
        clientId: '123456789',
        redirectUri: 'http://127.0.0.1:8000/facebook/callback', // Your client app URL
        scope: ['email', 'rsvp_event', 'public_profile', 'user_events']
      }
    }
  });
  </code></pre>
  
  <h3>Issue</h3>
  
  <p>When I click to log myself with <code>Facebook</code> I have this error </p>
  
  <blockquote>
    <p>Client error: <code>POST
    https://graph.facebook.com/v2.9/oauth/access_token</code> resulted in a <code>400
    Bad Request</code> response: {"error":{"message":"Error validating
    verification code. Please make sure your redirect_uri is identical to
    the one you (truncated...)</p>
  </blockquote>
  
  <p>The URL looks like this :</p>
  
  <pre><code>http://127.0.0.1:8000/facebook/callback?code=AQCio_tQpGgfBUKrdBRqIFDMS9NJvaFXX4hhnyFhKylIoTmU27ciMHBZiojdJT5XA2pApaPsoRO3ocokWrDx-TEBTSOmWQErkcmbOEi6fUYUPtlfJfiYw-49NyKYEDq63akgEqDI2r2FeBrw2Wo8IjlchNZ7F_IcAIyJjstVYShCZAK3Beu_rNEPG-1M6wvLHqXbe2dhRQcW9TeE2dxtewK-MPEb3ffmmoX5bK9uyZrF-TTH4tpsOKI2S6HPpDy2wSasUcXCtdMJfV3TLFuFlq1H3pgza6nyvhy8Ln1OQYbRTT30uBaZWnUt7R3JQsfAxzM#_=_
  </code></pre>
  
  <h3>Questions</h3>
  
  <p>What should I do to fix this issue ?</p>
  
  <p>Also I have to say I am a bit confused with the callback functions and so on. Am I calling the right function at the right moment ?</p>
  
  <h3>Laravel routes</h3>
  
  <pre><code>Route::get('auth/facebook', 'SocialAuthController@redirectToProviderApi');
  Route::get('facebook/callback', 'SocialAuthController@handleProviderCallbackAPI');
  </code></pre>
  
  <h3>Functions</h3>
  
  <pre><code> public function redirectToProviderApi()
      {
          return Socialite::driver('facebook')
              -&gt;scopes(['rsvp_event', 'public_profile', 'user_events'])
              -&gt;stateless()-&gt;redirect();
      }
  
      public function handleProviderCallbackAPI (Request $request) {
  
          $name = 'facebook';
          if ($request-&gt;has('redirectUri')) {
              config()-&gt;set("services.{$name}.redirect", $request-&gt;get('redirectUri'));
          }
  
  
          $provider = Socialite::driver($name);
  
          $provider-&gt;stateless();
  
          // Step 1 + 2
          $profile = $provider-&gt;user();
          $user = $service-&gt;createOrGetUser($profile);
          return response()-&gt;json(['token' =&gt; $this-&gt;createToken($user)]);
      }
  </code></pre>