Return JWT token to javascript SPA from socialite login

I have a SPA app built on vue.js with a lumen api using JWT tokens which is working fine.

Im trying to add socialite login with facebook and google which is working but the flow is quite right.

Ive added the socialite package and created two routes

/auth/oauth/{provider}/redirect /auth/oauth/{provider}/callback

I've created an OauthController with a redirect handler and callback handler.

The redirect handler looks like this

public function redirectToProvider($provider)
  return $this->socialiteManager->with($provider)->stateless()->redirect()->getTargetUrl();

Which returns the oauth url back to the SPA, which then directs the user to the oauth dialogue page, my callback url in the social app is on my api which goes to this callback handler

public function handleProviderCallback($provider)
  $oauthUser = $this->socialiteManager->with($provider)->stateless()->user();

  $userEntity = $this->repository->findOrCreateOauthUser($oauthUser);

  $providerEntity = app()
    ->findOneBy(['name' => $provider]);

    throw new \Exception('Oauth Provider not found');

  $socialAccountEntity = app()
    ->findOrCreateSocialAccount($providerEntity, $oauthUser, $userEntity);  

  $token = $this->auth->fromUser($userEntity);
  $resource = $this->item($token)
      ->serializeWith(new ArraySerialization())

  return $this->showResponse($resource);

which does work fine it find or creates a user, finds or create there social account record in the db, auths them with JWT gets a token and returns it.

But at this point in my flow im stuck in my api. the user should be redirected back into the SPA app. I could do something which I dont like the sound of, instead of returning the response in the callback doing something like

return redirect()->to('/some-spa-route')

But I dont think the api should be aware of the SPA it should be two independent codebases.

Has anyone any ideas of how to successfully implement oauth with JWT like this? Im thinking maye the callback url needs to be set to my SPA which then sends it to my API and exchanges it for a JWT token. But im not sure with this flow how to make the API aware of the token issued initially form the provider? Can I take the initial token issued send it to the API which refreshes it at the thrid party provider sends it back to the api which in turn exchanges it for a JWT?

Philip Elliott replied 7 months ago

Hi @jkirkby91 -- mind if I query your solution to this one, if you found one? I am in exactly the same train of thought and would be interested to know what you found out.

Thanks Phil

Tim J√ľnemann replied 5 months ago

yea, me too. would be great to know if someone found a solution.

Mathias replied 1 month ago

Maybe the authentication flow from Satellizer can help you - Satellizer is an Angular plugin for email and social authentication:

There is also a plugin for vue (vue-authenticate) which I suppose is doing basically the same:

I am currently working on integrating a Vue-SPA authentication with Laravel as backend with email und social authentication. That's why I am also interested in this topic. Have you in the meanwhile found a solution? thanks for your insights.

Aidan Ayala replied 1 month ago

You need to look at the social authentication in a different way.

In the SPA use a package, like Hello.js or vue-authenticate to retrieve an access_token from one of your providers. Be sure that you're using the implicit auth flow.

Once you have retrieved an access token, you can send it to your API in exchange for an access_token to the API (Passport, JWT ect)

Your logic will be slightly different as you do not need to redirect the user from your API. Instead you could have a route like so:{provider}/token

Which implements the following:

$user = Socialite::driver($provider)->userFromToken($request->get('access_token'));

// Implement logic to create/retrieve existing user
// Implement logic to return a token (JWT, Passport)

Does that make sense?

Sign in to participate in this thread!

We'd like to thank these amazing companies for supporting us