React router problem

[Techicolors]

i may have an issue with a React project i am working on. so i implemented a simple authentication flow, but i cannot get it to work seamlessly. When the user logs in a token is issued to the browser session then stored. however i have routes that are protected, meaning it is only usable when the user is authenticated. once the token is issued, i will have to verify the token as the user navigates to a protected page. but the Fetch API request to the backend takes time, so the page will just render the protected version of the component. i want it so all protected pages are unlocked because the token is verified and valid

 

i tried using componentDidMount and it seemed to have worked, but when i refresh the page the issue persists. it may be an issue of Fetch being asynchronous, but React will render anyways 

[elpiop]

You could use conditional rendering to render a different component until your request is completed. There may be a better solution specific to React Router, but I haven't used it for authentication before.

 

For example:

 

 

state = {authenticationState: NOT_AUTHENTICATED} 

componentDidMount(){
	this.authenticateUser().then(res => {
      if(res.isAuthenticated) {
       	this.setState(authenticationState: AUTHENTICATED) //or True, or whatever
      } else {
       this.setState(authenticationState: FAILED_AUTHENTICATION) // or NOT_AUTHENTICATED or False 
      }
    }
                                 
    render() {
      let component;
      const {authenticationState} = this.state;
      
      if(authenticationState === AUTHENTICATED){ //or whatever value you want to check against
      	component = <ProtectedComponent /*...props*/ />
      } else {
        component = <NonProtectedComponent /*...props*/ />
      return (
         <React.Fragment>
          {component}
          </React.Fragment>
         )     
    }
}

 

[Techicolors]

44 minutes ago, elpiop said:

You could use conditional rendering to render a different component until your request is completed. There may be a better solution specific to React Router, but I haven't used it for authentication before.

 

For example:

 

right now i am using react router's example of an auth workflow 

https://reacttraining.com/react-router/web/example/auth-workflow

 

which works well. the issue tho is that the Fetch API to my backend server is not instant, so even though the user is technically authenticated, React will render the protected routes anyway. one solution is to use setTimeout, but IMO it's a poor way to get around it. i'm thinking to 'delay' React until the fetch is complete/resolved but unsure how to do 

 

i noticed in the example that there is a 'fake async' aliased as a setTimeout, could be simulating an API call but doesn't appear to work for me

[elpiop]

3 hours ago, Techicolors said:

right now i am using react router's example of an auth workflow 

https://reacttraining.com/react-router/web/example/auth-workflow

 

which works well. the issue tho is that the Fetch API to my backend server is not instant, so even though the user is technically authenticated, React will render the protected routes anyway. one solution is to use setTimeout, but IMO it's a poor way to get around it. i'm thinking to 'delay' React until the fetch is complete/resolved but unsure how to do 

 

i noticed in the example that there is a 'fake async' aliased as a setTimeout, could be simulating an API call but doesn't appear to work for me

Don't use setTimeout, just set the variable you're using to determine whether or not the user is logged in initially to false, then after you receive the response from your API call set it to True if it was successful.

[Techicolors]

16 hours ago, elpiop said:

Don't use setTimeout, just set the variable you're using to determine whether or not the user is logged in initially to false, then after you receive the response from your API call set it to True if it was successful.

okk that works but i had to disable redirects. if i left redirects, then the page will just redirect even though the user is technically authenticated. so if i went to a protected page, i immediately redirect to login but the token is authed and valid. refreshing the page works but that is annoying for the user to do every time, so i'm trying to get redirects working aswell