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.
Related
I have two or more back-end API(Laravel) projects and a single front-end React JS project. From the front-end app, I will call all of the back-end API projects.
When the user login, authentication will check in App 1(with Laravel passport) and return access_token.
I want to use these access_token when calling API from both App 1 and App 2. But, the main problem is how to check access_token validation from App 2 to App 1 server.
To solve this problem, I think but not sure it is the correct way or not, I can create middleware in the App 2 server and get every incoming access_token and send it to check validation to App 1. If return true, user can access, else can't access.
But, I think this way is inappropriate because every incoming request needs to check access_token validation from App 2 to App 1, it will slow down the server and bottleneck problem.
I already search a lot of posts on google but, not yet find the best way for me. I found one way OAuth server implementation https://www.youtube.com/watch?v=K7RfBgoeg48 but, I think that way is not working well in my project structures because I have a lot of customization.
I'm also read the discussion on reddit(https://www.reddit.com/r/laravel/comments/dqve4z/same_login_across_multiple_laravel_instances/) but, I still didn't understand very well.
You have several options here:
I expect you have a database containing all your access and refresh tokens for your users - so just create a database access from the App2 backend server to the database containing your access and refresh tokens and just check them directly in the App2 via the new database connection.
Create the middleware that will check user authentication from App2 to App1, but as you correctly pointed out, that would cause an extra loading time.
Depending on whether you need the end user to know that he's connecting to "another server" - meaning App2 - you can use Oauth2 authorization - https://www.youtube.com/watch?v=zUG6BHgJR9w
Option 1. seems like the best solution to me
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.
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'm trying to create an SPA with auth and roles.
I've been reading a lot of tutorials that explains how to do it and everyone tells the same strategy:
Save the permissions on localstorage, for example accessToken and is_admin=0|1.
So when you login the backend response fills this data.
Then the vue routing is just checking these 2 fields for granting or preventing the access.
This is so unsecure, anyone can access to develop tools and see this data and change it, just writing a random accessToken grants access on this site... and then is_admin = 1 and wala.
Okay, is difficult to KNOW this but... And every single API call checks this accessToken on the backend.
So there is something we can do to prevent this? Or if we want this "agility navigation" we can't protect 100% route navigation middleware?
One of the guides I followed:
https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router
On the questions section so many people is comenting this, and their response is that is a frontend demo... but how can I rely this on the backend? If I want this every navigation click will refresh the page.
A SPA will only load once. After that navigation is handled by the frontend. However the data needed for the next page is loaded using ajax from the backend. Meaning you can still validate access in the backend before exposing the data you want to protect.
I have a website which is based on a Laravel backend api and a Nuxt.js frontend app.
The laravel app is served at api.website.com. Till now the api was open, meaning everyone can make a get request. There are almost no post requests.
I know need to implement a login mechanism for the users (Usual login+register and facebook login).
My question is about how would I go to make this process secure. Do I need Laravel Passport (or other similar mechanism)?
My thought is that, say I have an endpoint api.website.com/register (POST), I do not want anyone to be able to just make a post request and create an account. I need to have some sort of security like a csrf token. I know I can use CORS but that doesn't really provide much of security in this case.
You can use jwt like this or laravel passport.