Adding Steam-Login to VueJS SPA - laravel

I'm trying to get Steam login to work with my SPA (Vuejs+Laravel).
Ive thought about using a Socialite package for Steam and then vue-social-auth
However, it looks like that vue-social-auth wont work with any OpenID protocol, but only with OAuth.
Whenever I try to login, I'm getting an error called Invalid OAuth Type.
Is there another option to login with Steam using a SPA?

Related

Is MSAL correct for this case?

I have an old web app that uses Forms Authentication that we've converted to support SAML using Shibboleth. This part is complete and works fine. The app redirects to login.microsoftonline.com, allows a login against the customer's AD (hburg.kyschools.us), and redirects back to the app which now allows the authenticated user in.
The web app also has some ASP.NET Web API controllers that we'd like to authenticate the same way. This also seems to work when the controllers are accessed from a browser that has already logged in. So far, so good.
Now we want to access these Web API controllers from a WPF app. The WPF app has been accessing them for years but just using Basic Authentication. Looking for an example, I found this project on github that shows how to use MSAL:
https://github.com/Azure-Samples/active-directory-dotnet-desktop-msgraph-v2
This project will acquire a token via MSAL and then use it with HttpClient to call a web service. I can run this project and use it to log in to the same AD as above (hburg.kyschools.us). And then it can use HttpClient to access MS Graph.
Now, when instead I try to have the project call into my Web API controller using HttpClient, passing in the same token I received back from the hburg.kyschools.us AD, I get back the Log In page at login.microsoftonline.com, as if I haven't authenticated.
Can I use MSAL to get a token this way that can be used to access my web api via HttpClient from WPF? It seems like I'd need to tell MSAL that I want the token to include authorization for the web app. Is that done somehow in the scopes parameter?

Laravel 8: AJAX Athentication in non-SPA app

I'm writing a non-SPA app that needs to use an internal API. The API is called via AJAX requests. This is to provide the user with suggestions as they are typing, so I don't want the page to be reloading. The user must be logged in to access the API. The API doesn't need to be called from any other origin.
I have successfully got it working using Sanctum and API tokens. When the user logs in, I generate a token and store it in the browser session, and then send it with the Bearer header. This seems to work but is it the right approach? Should I just using the built in or web auth? I've been reading the docs but have just been getting kind of confused with all of the options.

Best Way To Integrate Server Side Laravel Login VueJS SPA

How can I authenticate a user with sanctum when the whole login process happens server side? The question I am asking is kind of hard to phrase so I will explain my situation.
I have a Vue SPA for my front end and a Laravel app as a backend api (they run on the same domain). Normally, to authenticate with the laravel api using sanctum, you would send the credentials in a post request, and if the login was successful, you would get the session information returned. However, I want to use steam login for authentication. I already have to whole process on the backend figured out in terms of actually logging in, however I am unsure how to pass the session data back to the SPA. Currently I have a link on my site that takes the user to the login endpoint on the api, and that endpoint will have them authenticate with steam, so the entire login process is handled on the backend. Now I just need to figure out how to send the session data back to the SPA. I guess it world be similar to using sanctum with socialite.
So far I've tried usisng Sanctums Mobile Aplication Authentication. I did this by having the user log in into the laravel app using steam, then once authenticated, a access token for their account would be created, and they would get redirected back to the Vue apps call back file, with the token as a part of the query string. Then the token would be stored and . This worked, however it presented some security issues.
The token was passed back in the url, so anyone could screenshot it and use it
Anyone who obtained the token by some other method could use it.
Here is the code for what I tried: https://gist.github.com/DriedSponge/4e8549486c2bfa33e4c0b21a539bdf85
So in summary, I want the entire login process to take place on the server, but somehow at the same time authenticate the SPA. If you have any ideas on how I can make this work, please let me know. If you have any questions just leave a comment. Thanks in advance.

Laravel socialite login and register by REST - best flow?

I'm doing some Android app that needs API and users.
I'm planning adding login (and register) button via Facebook.
I'm wondering: how should the flow of such an operation look like?
My idea:
Request the Facebook token in the app.
Send the token to the laravel backend by POST request (is this even secure approach?)
Get the Facebook user by Facebook token using socialite
Create / auth laravel user using Facebook user.
Return laravel's bearer token to the app (do I need passport to get the token or laravel has something built in?)
Is this the best approach?

Facebook and JWT Auth w/ Laravel back-end and React Native app

I have built a website with vuejs front-end and laravel back-end.
Only way to login is via Facebook Login using Socialite
All that works fine.
Now I am building some React Native apps (Ios/Android) that also use Facebook login but need to interact with the same web api.
I want to use JWT to secure the API for React Native -> Laravel API
I set up JWT w/ Dingo on Laravel side and I am able to generate a token using the JWTAuth::fromUser(). And I have established some API endpoints that use the token to authenticate.. so far so good.
Now here's the part that becomes sticky. I understand that on the Laravel side of things you can create JWT token with any user.. right now the JWT "identifier" is simply "id".. and it's my understanding that the token I generate from JWTAuth::fromUser() simply has no idea or care that this user doesn't have conventional credentials and instead used a Facebook Login.
On the React Native side however.. when a new user first authenticates via the Facebook Login.. it has no idea what the "matching user" is on the Laravel app, all I have to go on is basically the unique Facebook Provider Id.
So the question is as follows:
How can I generate a JWT token on the React Native side using only the Facebook Provider Id and the JWT Secret, and more importantly, how do I modify my JWT code on the Laravel side so that it can understand tokens that were generated with the Facebook Provider Id and JWT Token
In other words, I think my Laravel JWT implementation needs to be modified so that tokens are created/parsed purely on the basis of the Facebook Provider Id because otherwise it won't match up with tokens generated on the React Native side.
Many thanks!!
Ok after doing some reading I think this flow might work. Your thoughts please?
1 User authenticates via Facebook on in on Android/Ios app
2 Retrieve facebook access token
3 Do api call to public endpoint on web server and pass FB Access Token and FB ID
4a Web server makes Facebook Graph Api call w/ Access Token and verifies token is valid, is authenticated with Facebook App, and matches Facebook ID
4b If user doesn't exist on web first.. create user
5 If above matches, then web servers generates JWT token from user model and returns JWT token to app
6 App now uses JWT token for future API calls

Resources