Most secure way to pass authorised user from Laravel backend to frontend with React
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am building a weather app with laravel(almost finished) and i decided to implement the frontend with react/redux/react-router and use laravel from api calls. The only thing that i decided to leave the same is my custom laravel auth implementation with routes and views. However, i struggle to find a secure way to pass my Auth::user object after login in order to store on redux. I have 2 options:
1) After login and before render the main jsx, to make an axios request to specific route in order to return the Auth::user like:
in routes.php
Route::post('/auth/user' ,function(){
return response()->json(['user'=>auth()->user()]);
})->middleware('auth');
in js
axios.post('/auth/user').then((res)=>{console.log(res.data.user)}).catch((e)=>{console.log(e)})
2) pass Auth::user with blade, catch it with getAttribute, save it to redux and instantly remove from DOM:
<div id="app" data-usr="{{ auth()->user() }}"></div>
However neither of them seem to me like a secure way to pass this kind of data. Can anyone tell me his opinion about this or figure me with a better solution?
Thanks a lot.
php reactjs laravel redux
asked Nov 20 '18 at 16:51
billyValbillyVal
104
|
show 3 more comments
I am building a weather app with laravel(almost finished) and i decided to implement the frontend with react/redux/react-router and use laravel from api calls. The only thing that i decided to leave the same is my custom laravel auth implementation with routes and views. However, i struggle to find a secure way to pass my Auth::user object after login in order to store on redux. I have 2 options:
1) After login and before render the main jsx, to make an axios request to specific route in order to return the Auth::user like:
in routes.php
Route::post('/auth/user' ,function(){
return response()->json(['user'=>auth()->user()]);
})->middleware('auth');
in js
axios.post('/auth/user').then((res)=>{console.log(res.data.user)}).catch((e)=>{console.log(e)})
2) pass Auth::user with blade, catch it with getAttribute, save it to redux and instantly remove from DOM:
<div id="app" data-usr="{{ auth()->user() }}"></div>
However neither of them seem to me like a secure way to pass this kind of data. Can anyone tell me his opinion about this or figure me with a better solution?
Thanks a lot.
php reactjs laravel redux
asked Nov 20 '18 at 16:51
billyValbillyVal
104
1
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
1
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the wholeauth()->user()over.
– tyteen4a03
Nov 20 '18 at 17:10
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24
|
show 3 more comments
I am building a weather app with laravel(almost finished) and i decided to implement the frontend with react/redux/react-router and use laravel from api calls. The only thing that i decided to leave the same is my custom laravel auth implementation with routes and views. However, i struggle to find a secure way to pass my Auth::user object after login in order to store on redux. I have 2 options:
1) After login and before render the main jsx, to make an axios request to specific route in order to return the Auth::user like:
in routes.php
Route::post('/auth/user' ,function(){
return response()->json(['user'=>auth()->user()]);
})->middleware('auth');
in js
axios.post('/auth/user').then((res)=>{console.log(res.data.user)}).catch((e)=>{console.log(e)})
2) pass Auth::user with blade, catch it with getAttribute, save it to redux and instantly remove from DOM:
<div id="app" data-usr="{{ auth()->user() }}"></div>
However neither of them seem to me like a secure way to pass this kind of data. Can anyone tell me his opinion about this or figure me with a better solution?
Thanks a lot.
php reactjs laravel redux
asked Nov 20 '18 at 16:51
billyValbillyVal
104
I am building a weather app with laravel(almost finished) and i decided to implement the frontend with react/redux/react-router and use laravel from api calls. The only thing that i decided to leave the same is my custom laravel auth implementation with routes and views. However, i struggle to find a secure way to pass my Auth::user object after login in order to store on redux. I have 2 options:
1) After login and before render the main jsx, to make an axios request to specific route in order to return the Auth::user like:
in routes.php
Route::post('/auth/user' ,function(){
return response()->json(['user'=>auth()->user()]);
})->middleware('auth');
in js
axios.post('/auth/user').then((res)=>{console.log(res.data.user)}).catch((e)=>{console.log(e)})
2) pass Auth::user with blade, catch it with getAttribute, save it to redux and instantly remove from DOM:
<div id="app" data-usr="{{ auth()->user() }}"></div>
However neither of them seem to me like a secure way to pass this kind of data. Can anyone tell me his opinion about this or figure me with a better solution?
Thanks a lot.
php reactjs laravel redux
php reactjs laravel redux
asked Nov 20 '18 at 16:51
billyValbillyVal
104
asked Nov 20 '18 at 16:51
billyValbillyVal
104
asked Nov 20 '18 at 16:51
billyValbillyVal
104
asked Nov 20 '18 at 16:51
billyValbillyVal
104
asked Nov 20 '18 at 16:51
billyValbillyVal
104
104
1
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
1
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the wholeauth()->user()over.
– tyteen4a03
Nov 20 '18 at 17:10
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24
|
show 3 more comments
1
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
1
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the wholeauth()->user()over.
– tyteen4a03
Nov 20 '18 at 17:10
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24
1
1
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
1
1
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the whole
auth()->user() over.– tyteen4a03
Nov 20 '18 at 17:10
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the whole
auth()->user() over.– tyteen4a03
Nov 20 '18 at 17:10
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24
|
show 3 more comments
2 Answers
2
active
oldest
votes
I would create a Class to represent the user with just the vital information I need to show on the front-end.
So instead of passing auth->user() to the front, you can inject it into a decorator and generate a simpler user class with just the methods you wish to display.
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
add a comment |
Thankfully i found a solution with API TOKEN implementation built-in with Laravel. Also i destroy token after logout and recreate it in login, so nobody can use it with other services to collect data if he is not signed in
answered Nov 23 '18 at 13:32
billyValbillyVal
104
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397794%2fmost-secure-way-to-pass-authorised-user-from-laravel-backend-to-frontend-with-re%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would create a Class to represent the user with just the vital information I need to show on the front-end.
So instead of passing auth->user() to the front, you can inject it into a decorator and generate a simpler user class with just the methods you wish to display.
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
add a comment |
I would create a Class to represent the user with just the vital information I need to show on the front-end.
So instead of passing auth->user() to the front, you can inject it into a decorator and generate a simpler user class with just the methods you wish to display.
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
add a comment |
I would create a Class to represent the user with just the vital information I need to show on the front-end.
So instead of passing auth->user() to the front, you can inject it into a decorator and generate a simpler user class with just the methods you wish to display.
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
I would create a Class to represent the user with just the vital information I need to show on the front-end.
So instead of passing auth->user() to the front, you can inject it into a decorator and generate a simpler user class with just the methods you wish to display.
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
answered Nov 20 '18 at 16:56
Diogo SantoDiogo Santo
54329
54329
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
add a comment |
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
2
2
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
Or use a Resource Class to transform your user to the simple version. laravel.com/docs/master/eloquent-resources
– common sense
Nov 20 '18 at 17:08
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
@commonsense genius! Had no idea! :D Go for this one instead!!
– Diogo Santo
Nov 20 '18 at 17:10
add a comment |
Thankfully i found a solution with API TOKEN implementation built-in with Laravel. Also i destroy token after logout and recreate it in login, so nobody can use it with other services to collect data if he is not signed in
answered Nov 23 '18 at 13:32
billyValbillyVal
104
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
add a comment |
Thankfully i found a solution with API TOKEN implementation built-in with Laravel. Also i destroy token after logout and recreate it in login, so nobody can use it with other services to collect data if he is not signed in
answered Nov 23 '18 at 13:32
billyValbillyVal
104
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
add a comment |
Thankfully i found a solution with API TOKEN implementation built-in with Laravel. Also i destroy token after logout and recreate it in login, so nobody can use it with other services to collect data if he is not signed in
answered Nov 23 '18 at 13:32
billyValbillyVal
104
Thankfully i found a solution with API TOKEN implementation built-in with Laravel. Also i destroy token after logout and recreate it in login, so nobody can use it with other services to collect data if he is not signed in
answered Nov 23 '18 at 13:32
billyValbillyVal
104
answered Nov 23 '18 at 13:32
billyValbillyVal
104
answered Nov 23 '18 at 13:32
billyValbillyVal
104
answered Nov 23 '18 at 13:32
billyValbillyVal
104
104
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
add a comment |
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
Can you explain that further?
– Nico Haase
Nov 23 '18 at 13:34
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
when user logs in a new token is created and updates user's api_token column, passed through blade view with window.Laravel and appends to axios.header. So with every request from user to api, the api_token is checked. if false token or missing no data returned
– billyVal
Nov 23 '18 at 14:29
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
Please add such explanation to the answer by editing it, not to the comment section
– Nico Haase
Nov 24 '18 at 8:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397794%2fmost-secure-way-to-pass-authorised-user-from-laravel-backend-to-frontend-with-re%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What exactly do you want to expose to the frontend?
– tyteen4a03
Nov 20 '18 at 16:56
You mean after i store it to redux or before?
– billyVal
Nov 20 '18 at 17:05
1
Assume that whatever you send to the frontend will be abused by attackers. Send only necessary information - this means you should be cherry-picking the fields you want to expose instead of sending the whole
auth()->user()over.– tyteen4a03
Nov 20 '18 at 17:10
Understood but, what about an axios call with a hashed token. This isn't secure enough?
– billyVal
Nov 20 '18 at 17:17
Not sure why you are creating separate "hashed tokens" - is PHP Sessions not enough for you?
– tyteen4a03
Nov 20 '18 at 17:24