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 5 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 3 months ago

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

Sign in to participate in this thread!

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