How to manage authentication in asp.net core with react?
up vote
0
down vote
favorite
I have created website asp.net core with typescript + react + webpack in visual studio 2017.
I have created 1 mvc view Home->Index that contains only main div to render react. Then 2 more components (Login & Dashboard). Both will be rendered inside Home->Index mvc view.
I have created one Private Route component - to restrict Dashboard without Login. Like below:
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user')
?
<Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
and In Main Component I wrote like below
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
public render() {
return (
<div >
<BaseRoute exact path="/" component={Login} />
<Route exact path="/login" component={Login} />
<Layout>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Layout>
</div>
);
}
}
It's working properly like after login, I store my object to local storage and whenever I try to redirect to Dashboard, it checks in local storage and redirect back me to Login Page.
But Main Problem is, Let's say I logged in today and stored that object in local storage, and then I close the browser window (or I try to open website next day), and again I try to redirect to dashboard it should ask me to login instead of direct to dashboard.
So I think I have to manage session in asp.net core website server side also.. I'm not sure but what I can do??
reactjs typescript asp.net-core webpack
asked Nov 22 at 16:33
ldev
11
add a comment |
up vote
0
down vote
favorite
I have created website asp.net core with typescript + react + webpack in visual studio 2017.
I have created 1 mvc view Home->Index that contains only main div to render react. Then 2 more components (Login & Dashboard). Both will be rendered inside Home->Index mvc view.
I have created one Private Route component - to restrict Dashboard without Login. Like below:
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user')
?
<Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
and In Main Component I wrote like below
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
public render() {
return (
<div >
<BaseRoute exact path="/" component={Login} />
<Route exact path="/login" component={Login} />
<Layout>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Layout>
</div>
);
}
}
It's working properly like after login, I store my object to local storage and whenever I try to redirect to Dashboard, it checks in local storage and redirect back me to Login Page.
But Main Problem is, Let's say I logged in today and stored that object in local storage, and then I close the browser window (or I try to open website next day), and again I try to redirect to dashboard it should ask me to login instead of direct to dashboard.
So I think I have to manage session in asp.net core website server side also.. I'm not sure but what I can do??
reactjs typescript asp.net-core webpack
asked Nov 22 at 16:33
ldev
11
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have created website asp.net core with typescript + react + webpack in visual studio 2017.
I have created 1 mvc view Home->Index that contains only main div to render react. Then 2 more components (Login & Dashboard). Both will be rendered inside Home->Index mvc view.
I have created one Private Route component - to restrict Dashboard without Login. Like below:
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user')
?
<Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
and In Main Component I wrote like below
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
public render() {
return (
<div >
<BaseRoute exact path="/" component={Login} />
<Route exact path="/login" component={Login} />
<Layout>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Layout>
</div>
);
}
}
It's working properly like after login, I store my object to local storage and whenever I try to redirect to Dashboard, it checks in local storage and redirect back me to Login Page.
But Main Problem is, Let's say I logged in today and stored that object in local storage, and then I close the browser window (or I try to open website next day), and again I try to redirect to dashboard it should ask me to login instead of direct to dashboard.
So I think I have to manage session in asp.net core website server side also.. I'm not sure but what I can do??
reactjs typescript asp.net-core webpack
asked Nov 22 at 16:33
ldev
11
I have created website asp.net core with typescript + react + webpack in visual studio 2017.
I have created 1 mvc view Home->Index that contains only main div to render react. Then 2 more components (Login & Dashboard). Both will be rendered inside Home->Index mvc view.
I have created one Private Route component - to restrict Dashboard without Login. Like below:
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user')
?
<Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
and In Main Component I wrote like below
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
public render() {
return (
<div >
<BaseRoute exact path="/" component={Login} />
<Route exact path="/login" component={Login} />
<Layout>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Layout>
</div>
);
}
}
It's working properly like after login, I store my object to local storage and whenever I try to redirect to Dashboard, it checks in local storage and redirect back me to Login Page.
But Main Problem is, Let's say I logged in today and stored that object in local storage, and then I close the browser window (or I try to open website next day), and again I try to redirect to dashboard it should ask me to login instead of direct to dashboard.
So I think I have to manage session in asp.net core website server side also.. I'm not sure but what I can do??
reactjs typescript asp.net-core webpack
reactjs typescript asp.net-core webpack
asked Nov 22 at 16:33
ldev
11
asked Nov 22 at 16:33
ldev
11
asked Nov 22 at 16:33
ldev
11
asked Nov 22 at 16:33
ldev
11
asked Nov 22 at 16:33
ldev
11
11
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07
add a comment |
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07
add a comment |
active
oldest
votes
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',
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%2f53435096%2fhow-to-manage-authentication-in-asp-net-core-with-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53435096%2fhow-to-manage-authentication-in-asp-net-core-with-react%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
react and asp.net are not related in any way. You should focus on learning how to implement session-based authentication using asp.net, get that working properly on your server, then in your react app, create a function that serves as an api client (used to interact with your .net server). In this client function, you would configure what headers or cookies are relevant for client authentication.
– Peter
Nov 22 at 18:07