State/Auth Management, Auth-based Routing, and API Support

H0r53 commented 3 years ago

Version

latest

Reproduction link

http://localhost:3000/auth/login-page

Operating System

Windows 10

Device

Desktop

Browser & Version

Chrome 89

Steps to reproduce

1) Download material dashboard pro from source 2) Build 3) Run

What is expected?

The template provides a nice and abstract organization of resources, however there is a lot missing. For example, the first thing I would like to do is get Login functionality working. Although components exist for login, there is no Submit button or function stub where an axios API call (or equivalent) could be made.

Furthermore, there is no mention of how to implement state management. I would like to set some sort of token on successful login and grant user access accordingly. There isn't any code for state or route management. How can I automatically redirect to Login if a user is not authenticated, prevent access from the dashboard if a user is not authenticated, or allow access to the dashboard if a user is authenticated?

I would like simple examples of how to actually make the login and route management of this app functional. It looks like I will have to recreate all of the components to add API interaction, and after trying to do so I'm running into issues with the router (example: routes allowed when logged in versus routes allowed when not logged in; how to determine if a user is logged in and show routes accordingly). Please provide simple examples for authentication state management across pages and functional routing based on authentication and access. Also, some simple examples of extending components so methods such as "on click" are supported. In other words, what would index.js look like if a user was authenticated versus not authenticated? How can you redirect the user accordingly? How can you store and access this information when needed?

Thank you

What is actually happening?

The app is very complex while the components are very basic. Components do not have any "on click" type of methods where dynamic logic (such as API interaction) can occur. Also, the app provides zero capabilities for logging in and it isn't clear how to correctly implement logging in and authentication in the framework.

Solution

Additional comments

H0r53 commented 3 years ago

A more concrete example. Consider the following from index.js:

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/rtl" component={RtlLayout} />
      <Route path="/auth" component={AuthLayout} />
      <Route path="/admin" component={AdminLayout} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

All routes are exposed here. What is the best way to implement authenticated routes, such that if a user is not logged in, they are restricted to the Auth pages for example, where as a logged in user is allowed to access the Admin pages? I imagine the choose of state management is important here.

H0r53 commented 3 years ago

I attempted to put a conditional redirect in Admin.js to try this on my own. However, whenever my redirect occurs the following error displays instead of the redirected page: Error: no element is specified to initialize PerfectScrollbar

Here is my code.

  const isUserAuthenticated = false;

  return (
    !isUserAuthenticated ?
    <Redirect to="/auth/login" /> :

    <div className={classes.wrapper}>
      <Sidebar
        routes={routes}
        logoText={"Creative Tim"}
        logo={logo}
        image={image}
        handleDrawerToggle={handleDrawerToggle}
        open={mobileOpen}
        color={color}
        bgColor={bgColor}
        miniActive={miniActive}
        {...rest}
      />
 . . .

This should be enough to reproduce the error. Please advise on correct way to implement authenticated routing using this product.

einazare commented 3 years ago

Hello there, Jacob,

If you wish, we can offer you an upgrade coupon for paying the difference between your purchase - Material Dashboard PRO React, and Material Dashboard PRO React ASP.NET. You can also ask for custom development on our dedicated page here: https://services.creative-tim.com/?ref=ct-footer

I will leave the issue opened as Help Wanted, since this is something that we do not offer support for at the moment, for the product at hand.

Hope this information helps.

Best, Manu

H0r53 commented 3 years ago

I would not consider features such as authenticated routing to be backend. Your code simply needs conditions to provide or deny access to certain pages. Admittedly, this is what I've been stuck on while trying to implement myself. An API, database, and session management system is what I consider backend, not code that technically runs in the browser to provide a single page app experience.

I find it hard to believe that no one else has experienced this issue. The solution should be simple, I just don't know how to configure the React Router such that a local auth token can be checked when managing routes. This should be the first thing someone implements when using this template. Are you saying that these features have already been implemented in the react nodejs solutions you mentioned? I would like to know for sure before considering an upgrade.

einazare commented 3 years ago

Hello again, @H0r53 ,

I would like to know for sure before considering an upgrade.

Yes, you can take a look at the FREE versions first to check if they match your needs.

Best, Manu

creativetimofficial / ct-material-dashboard-pro-react