Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

laravel socialite not working with JWT auth

Im working with socialite and jwt auth here’s my code 

class SocialAuthFacebookController extends Controller
{

  /**
   * Create a redirect method to facebook api.
   *
   * @return void
   */
    public function redirect()
    {  
        $provider = 'facebook';
        try {
            $socialite = Socialite::driver($provider)->redirect();
        } catch (InvalidStateException $e) {
            $socialite = Socialite::driver($provider)->stateless()->redirect();
        }

        return $socialite;
    }

    /**
     * Return a callback method from facebook api.
     *
     * @return callback URL from facebook
     */
    public function callback(SocialFacebookAccountService $service, Request $request)
    {
        if($request->has('code')) {
            $user = $service->createOrGetUser(Socialite::driver('facebook')->user());

            $token = JWTAuth::fromUser($user);

            return redirect("/#/dashboard")->with('token', $token);

        } else {
           return Socialite::driver($provider)->redirect();
        }
    }
}

I can get my $token and $user from my fb login callback but when I redirect it back to dashboard I still not able to login. Any idea?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Now I'm working on applying it at frontend and saw this code ($auth.oauth2) in https://github.com/websanova/vue-auth/blob/master/docs/Methods.md when I call the function social('facebook') it works well, sending client_id and redirect me to callback and getting a 'code' response from Facebook. The problem is when I'm being redirected back to my callback url on my mounted() when it detects that there's code in the URL I send a request again and with a parameter this.code then I get error:

    Client error: POST graph.facebook.com/v3.0/oauth/access_token resulted in a 400 Bad Request response

    Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this

    I set the 'Valid OAuth Redirect URI' but stil getting same error

    <script>
    export default {
        data() {
            return {
                context: 'oauth2 context',
                code: this.$route.params.code,
                type: this.$route.params.type
            };
        },
        mounted() {
            var app = this

            console.log(this.code)
            console.log(this.type)
            if (this.code) {
                this.$auth.oauth2({
                    code: true,
                    provider: this.type,
                    params: {
                        client_id: xxxxxx,
                        client_secret: 'xxxxxxxx',
                        code: this.code,
                        redirect_uri: 'mysite.com/#/dashboard'
                    },
                    success: function(res) {
                        console.log('success ' + this.context);
                    },
                    error: function (res) {

                        console.log('error ' + this.context);

                        console.log(res);
                    },

                });
            }
        },
        methods: {
            social(type) {
                this.$auth.oauth2({
                    provider: type || this.type,
                    rememberMe: true,
                    params: {
                        // code: this.code,
                        client_id: xxxxxxxx,
                        client_secret: 'xxxxxxxx',
                        redirect_uri: 'mysite.com/api/redirect/social'

                    },
                    success: function(res) {
                        console.log('success ' + this.context);
                    },
                    error: function (res) {
                        console.log('error ' + this.context);
                    }

                });
            }
        }
    }
</script>

```

  2. 0

    because JWT is stateless and socialite is statefull. I’m guessing you’re using a front framework like react or similar, you will need to have socialite be used by your front framework.

    Login or Signup to reply.
  3. 0

    Finally I found the solution. I’m working with NuxtJs 2 Auth & Laravel 8.x as API Web services. This is my way to do:

    First get login URL from Lararvel API

     async googleLogin() {
      let res = await this.$axios.get("http://localhost:8000/api/auth/google/url");
      if(res.data && res.data.url){
        window.location.href= res.data.url;
      }
    },

    Laravel web services will return an url for client like this:

      return Response::json([
            'url' => Socialite::driver('google')->stateless()->redirect()->getTargetUrl(),
        ]);

    then config redirect URL in file .env

    GOOGLE_REDIRECT_URL=http://localhost:3000/google

    After login success with google, it’ll redirect to page google in your SPA ( this case I named is google). In mounted() function I’ll call the callback API from services to retrieve user data

     mounted() {
    let token = this.$route.fullPath.split("/google");
    if (token[1]) {
      this.loginGoogle(token[1]);
    } else {
      this.$toast.error("Error, Please try again");
      setTimeout(() => {
        window.location.href = "/";
      }, 1000);
    }
  },
  methods: {
    async loginGoogle(token) {
      let res = await this.$axios.get(
        "http://localhost:8000/api/auth/google/callback" + token
      );
     // this is user data
      console.log(res);
    },
  },

    That’s it. Hope it can help

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search