Reputation: 61

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?

Upvotes: 0

Answers (3)

Nam Phan

Reputation: 1

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

Upvotes: 0

user3814670

Reputation: 61

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>

```

Upvotes: 0

N69S

Reputation: 17216

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.

Upvotes: 1

laravel socialite not working with JWT auth

Answers (3)

Related Questions