Mixing
How to maintain isAuth and protect private routes?
I'm trying to implement authentication using Github oAuth API in React, I'm using React.CreateContext() to manage my AuthContext.
AuthContext.js
class AuthProvider extends React.Component {
constructor(props) {
super(props);
if(typeof(sessionStorage.getItem('isAuth')) === 'undefined') {
sessionStorage.setItem('isAuth',false);
}
this.state = { isAuth: sessionStorage.getItem('isAuth') };
this.login = this.login.bind(this)
this.logout = this.logout.bind(this)
}
login() {
this.setState({isAuth: true});
}
logout() {
this.setState({isAuth: false});
}
When the user clicks on login button login method is fired, isAuth is set to true, and the user is redirected to github login page,
but once the user returns to my app, the component is reinitialized and isAuth is set to false.
How can I handle this?
javascript reactjs oauth-2.0 github-api
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
add a comment |
I'm trying to implement authentication using Github oAuth API in React, I'm using React.CreateContext() to manage my AuthContext.
AuthContext.js
class AuthProvider extends React.Component {
constructor(props) {
super(props);
if(typeof(sessionStorage.getItem('isAuth')) === 'undefined') {
sessionStorage.setItem('isAuth',false);
}
this.state = { isAuth: sessionStorage.getItem('isAuth') };
this.login = this.login.bind(this)
this.logout = this.logout.bind(this)
}
login() {
this.setState({isAuth: true});
}
logout() {
this.setState({isAuth: false});
}
When the user clicks on login button login method is fired, isAuth is set to true, and the user is redirected to github login page,
but once the user returns to my app, the component is reinitialized and isAuth is set to false.
How can I handle this?
javascript reactjs oauth-2.0 github-api
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
add a comment |
I'm trying to implement authentication using Github oAuth API in React, I'm using React.CreateContext() to manage my AuthContext.
AuthContext.js
class AuthProvider extends React.Component {
constructor(props) {
super(props);
if(typeof(sessionStorage.getItem('isAuth')) === 'undefined') {
sessionStorage.setItem('isAuth',false);
}
this.state = { isAuth: sessionStorage.getItem('isAuth') };
this.login = this.login.bind(this)
this.logout = this.logout.bind(this)
}
login() {
this.setState({isAuth: true});
}
logout() {
this.setState({isAuth: false});
}
When the user clicks on login button login method is fired, isAuth is set to true, and the user is redirected to github login page,
but once the user returns to my app, the component is reinitialized and isAuth is set to false.
How can I handle this?
javascript reactjs oauth-2.0 github-api
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
I'm trying to implement authentication using Github oAuth API in React, I'm using React.CreateContext() to manage my AuthContext.
AuthContext.js
class AuthProvider extends React.Component {
constructor(props) {
super(props);
if(typeof(sessionStorage.getItem('isAuth')) === 'undefined') {
sessionStorage.setItem('isAuth',false);
}
this.state = { isAuth: sessionStorage.getItem('isAuth') };
this.login = this.login.bind(this)
this.logout = this.logout.bind(this)
}
login() {
this.setState({isAuth: true});
}
logout() {
this.setState({isAuth: false});
}
When the user clicks on login button login method is fired, isAuth is set to true, and the user is redirected to github login page,
but once the user returns to my app, the component is reinitialized and isAuth is set to false.
How can I handle this?
javascript reactjs oauth-2.0 github-api
javascript reactjs oauth-2.0 github-api
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
asked Jan 1 at 14:54
Karan TikkuKaran Tikku
579
579
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Reflect the state to sessionStorage:
// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.isAuth !== this.state.isAuth)
sessionStorage.setItem('isAuth', this.state.isAuth);
}
Note that data in sessionStorage is always a string, and anything that is not a string (e.g. booleans) will be converted to a string so you should:
this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
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%2f53996437%2fhow-to-maintain-isauth-and-protect-private-routes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Reflect the state to sessionStorage:
// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.isAuth !== this.state.isAuth)
sessionStorage.setItem('isAuth', this.state.isAuth);
}
Note that data in sessionStorage is always a string, and anything that is not a string (e.g. booleans) will be converted to a string so you should:
this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
add a comment |
Reflect the state to sessionStorage:
// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.isAuth !== this.state.isAuth)
sessionStorage.setItem('isAuth', this.state.isAuth);
}
Note that data in sessionStorage is always a string, and anything that is not a string (e.g. booleans) will be converted to a string so you should:
this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
add a comment |
Reflect the state to sessionStorage:
// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.isAuth !== this.state.isAuth)
sessionStorage.setItem('isAuth', this.state.isAuth);
}
Note that data in sessionStorage is always a string, and anything that is not a string (e.g. booleans) will be converted to a string so you should:
this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
Reflect the state to sessionStorage:
// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.isAuth !== this.state.isAuth)
sessionStorage.setItem('isAuth', this.state.isAuth);
}
Note that data in sessionStorage is always a string, and anything that is not a string (e.g. booleans) will be converted to a string so you should:
this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
answered Jan 1 at 15:01
Jonas WilmsJonas Wilms
60.8k53255
60.8k53255
add a comment |
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%2f53996437%2fhow-to-maintain-isauth-and-protect-private-routes%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
