how would i change the code to have front page only visible when user is signed in?

[og-7]

I tired i n pages -> index.tsx to change code like

  const isAuthenticated = useSelector<AppState, boolean>(
    state => state.authModule.authenticated
  )
return (
  isAuthenticated ?  (

  <Layout title="Home">
  <Container component="main" maxWidth="md">
      <CssBaseline />
      <div className={classes.paper}>
      <img src="/images/next_logo.svg" height="85"></img>
        <Typography align="center" component="h1" variant="h5">
          NextJS / SSR / AWS Cognito 
        </Typography>
        <Typography align="center" component="h3" variant="h3">
        HttpOnly Cookie base authentication boilerplate
        </Typography>
      </div>
    </Container>
  </Layout>
  ): <Material />
  )

or

i tried changing index.tsx to wrap around withAuthentication

return (  
  <Layout title="Home">
  <Container component="main" maxWidth="md">
      <CssBaseline />
      <div className={classes.paper}>
      <img src="/images/next_logo.svg" height="85"></img>
        <Typography align="center" component="h1" variant="h5">
          NextJS / SSR / AWS Cognito 
        </Typography>
        <Typography align="center" component="h3" variant="h3">
        HttpOnly Cookie base authentication boilerplate
        </Typography>
      </div>
    </Container>
  </Layout>
  )
}

export default withAuthentication(Index)

but none of the trick works. any ideas?

Basically I always wants sign-in page to be default page at port 3000 and only go to index.tsx when index.tsx is authenticated.

[seldebrings]

withAuthentication hoc should be the way to go , try to replicate how it works with the token page.