How to organize social authentication through Socialite(Laravel)+JWTAuth+Vue.js without a redirect from the API server?

Question

OAuth

I am doing social authentication on the Vue + Laravel bundle in the image and likeness of this one: https://github.com/fritsvt/laravel-nuxt-authentication (this is a working example, at least everything started for GitHub OAuth). But there is a catch:
- It uses Socialite for authentication between Laravel and the OAuth provider (well, for example, it's GitHub)
- And it uses https for authentication between Laravel and the front on Nuxt.js (in fact, it's Vue.js) :/ /github.com/tymondesigns/jwt-auth
and when on the Laravel side it receives user data from GitHub, then further, by redirect

return redirect(env('CLIENT_BASE_URL') . '/auth/social-callback?token=' . $this->auth->fromUser($user) . '&origin=' . ($newUser ? 'register' : 'login'));

already passes the JWT token to the front - to Vue.
But this solution, frankly, is a so-so solution, because you have to hardcode the client into the server config
CLIENT_BASE_URL
. And if I have more than one client? What if I have a client with no URL at all and I don't know his IP beforehand?
Take IP from request and substitute dynamically?
But this is also the case here ... I generally want to set up this authentication for the Android (Cordova) client, and I'm afraid that it simply won't work there - all these redirects ...
What would your colleagues advise? :) How can this be done more dexterously? Especially in the context of a WebView client?
Thanks in advance.

Answer 1

This scheme works for me in both Ionic and NativeScript.
In general, the scheme is the same everywhere.
On Laravel you need Socialite, on the client something according to the framework. I used ng2-ui-auth. You also need to install the plugin InAppBrowser.
The sequence is as follows:
1. In your application, you click on the "Login via GitHub" button
2. The InAppBrowserGitHub login window opens (the clientId of your application and redirectUri are passed in the url , responsible for this ng2-ui-auth).
2a. Note that the redirectUri from the request must be identical to the Authorization callback URL in your app's settings on the GitHub site (Settings / Developer settings / OAuth Apps ) and in case Cordovashould be " localhost:3000 ".
3. GitHub authorizes you by login/password, asks for permission to transfer data to the Application and redirects the page to redirectUri adding a token to it.
4. ng2-ui-authintercepts the call to localhost:3000 (this is done using JS, there is no local server here), gets the token and forwards it to the final url (specified for each provider in the settings ng2-ui-auth).
4a. This final url should be the address of your backend, namely the method that Socialitewill use it to request user data from GitHub.
5. With the help of Socialite, you get user data from GitHub. Create a user in Laravel if it doesn't exist and do whatever else is necessary.
6. Using the user's data, jwt-authcreate a jwt token with and return it to the client (in step 4).
7. On the client, remember the jwt token and the fact that the user is authenticated. You can get an email from the response (if you sent it) and display it somewhere.
With NativeScript , everything is absolutely the same (I use it on the client nativescript-oauth2) except for one thing: there is no webview in NS, so the redirectUri interception looks different:
1. In the Authorization callback URL on GitHub, you write something likeblablabla://auth(instead of blablabla some long unique string - urlScheme ).
2. This urlScheme is also signed in the settings nativescript-oauth2and in App_Resources/Android/src/main/AndroidManifest.xml as intent-filter

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="blablabla" />
</intent-filter>

The application intercepts the call to this unique urlScheme and then everything continues according to the list.