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.
Related
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.
I am using Laravel as my backend together with Sanctum which generates personal access token for mobile users. For my mobile application I am using flutter.
To authenticate users they login with their username/password and get a personal access token in return. This works but requires a user to login every time they open the application again so I did what most tutorials suggest which is saving the token on the mobile device using shared preferences/secure storage.
Now comes the question how do you invalidate a user when you remove their token from the backend? On initial login it appears everything is still fine because like in most tutorial I check for the existence of a token. After that whenever I want to make a request which uses the token I obviously run into problems because it not longer exists on the backend.
Most tutorials/guide suggest saving the token and using that a reference to see if the user is logged in or not but this seems flawed because it gives the false impression you actually have a valid token.
My guess is this can be solved by always performing a heartbeat/ping action to check if the current token is valid and if not send them to the login screen instead of simply checking for the existence of the token.
Thoughts on this?
I can suggest a hack or trick here in every launch of the app you can send a request to an API to check if the user's token is valid or not and if it is valid then you can continue the app otherwise force the user to login and generate new token this way your app will be secure via server / API.
For this, you can store the user's secret token in the database and check it via HTTP API call and send a response from the API accordingly and check the response in app and do the next operation according to the response you get.
I don't know if this is a great way of doing this job but it is a kind of hack/trick to achieve what is needed.
Thanks
I have more conteptual question, how exactly should I handle social login in my project.
The use case is that I would like to allow user to login with Facebook, and keep on my backend information about this user (email, firstname, lastname)
I have some proposal Flow, but I'm not sure if it's a proper approach.
Let's say that I have application architecture as above. Now I would like to explain step-by-step full success flow.
Client (Vue application) make a call to AuthProvider (Facebook)
AuthProvider returns access_token
Client after reciving access_token make a call to backend endpoint like /fb_profile with access_token and userID (?)
Backend make a call to AuthProvider to check if given by client access_token is valid or not.
AuthProvider returns information about user. Backend after getting information about user, save it to database and generate new JWT token
Backend returns generated token to user
Now my question is - Is this good approach? Or should i handle it in other way? Like keep more logic to backend part? Instead of make a call to Facebook from Client, maybe should I make a call to backend, and backend make a call to Facebook?
You seem to be on right track. There could me many ways to do the same thing, here is the way which is working for me using vue/laravel/passport/socialite/github.
Trigger redirect in controller from frontend,
Provider(here github app) is triggered in browser with its url using client id/app name saved in back end config/env. Fill out your login details
It will redirect as created in provider and configured in backend-> show it on frontend, in my case its
http://localhost:8080/authorize/github/callback
From frontend now trigger callback in controller, it will check if user details already exist and will insert if its first time user as per logic. Then it will send back access_token to frontend which can be used in frontend for all the operations
DB
The above will be the sequence of the request flow ( same as yours ).
This would be the standard practice we used to integrate with Facebook. In this case, I strictly advise you to use the JavaScript SDK for Facebook.
Refer below link in case if you run into the following issue:
Vuejs component wait for facebook sdk to load
I've created a web application that uses the built-in authentication method for the web, once the user is authenticated he/she is presented with a dashboard page. At this moment Ajax calls to an API need to be made to fetch data for the logged-in user. What would be the correct approach to this to make it is secure?
As a next step, I would like to be able to use the API "stand-alone" as well, so a 3rd party could access the dataset through the API as well.
Right now I am looking into Laravel Passport as well as Spatie Permission package to help me with access control.
If you are using ajax calls in same domain it won't be problem with built-in authentication to give access to authorized users only, because tokens & sessions are accessible for laravel and you can get authenticated users by default.
If you want to make external api as well the best approach will be to use Laravel Passport and pass token in Authorization header as usual.
Hope this helps you
I'm learning both Sails and Vue.js and making a full REST app to do that.
So far from now, I've made a multi-step sign-up page in Vue which is working fine and POST all needed informations in my different Controllers in Sails, it also creates the user.
Now, I'm working on my login page. Again, no problem to PUT informations in my Login Controller and I receive an OK (200) response which let me know the user is logged on my backend server.
Now, I would like to understand how I could keep the information the user is logged-in my server and let him access to private content on my front-end app -> securely. I have understood that Sails use Sessions (alias of cookies ?). Also in the common example on the web, people tend to use JWT which transmit a crypted JSON between the two environnement (and so desactivate the cookies ?).
So, could you please give me a semantic explanation on how I can make both app exchange securely and manage it in Vue Js. I just need some "track" to follow.
SOLUTION
For those who like me are blocked at this initial step, I resolved my problem this way.
1) My backend Sails app generates a JWT (token) on each login.
2) My frontend Vue app stores that information thanks to Vuex and set the header of each request with an Authorization parameter composed of : 'Barear ' + token.
3) All frontend resquests to any Sails controller are verified thanks to a Policy which compares the token in the header of the request with the one generated at the first step.
Now I just wonder if using built in sessions in Sails is relevant or not.