Why is react admin login page only shown for one second?

779 views Asked by At

I have built a website with react admin. Now i want to add the basic login page from react admin.

For this I have added the simple authProvider which passes all username and password combinations. But now the login page is only shown for one second when I click on the logout button and then the website always jumps back to the dashboard.

I have tried a lot but can't find the error. Maybe someone has an idea what it could be or had the same problem before? Here is my code snippet from App.js:

function App() {
    return(
      <Admin
        dashboard={Dashboard}
        authProdiver={authProvider}
        dataProvider={dataProvider}
        customRoutes={customRoutes}
        theme={theme} 
        layout={MyLayout}
      >

        <Resource
          ...
        />
          ...
      </Admin> 
      );
    }
    
export default App;

I added the basic authProvider from the tutorial:

const authProvider = {
  // authentication
  login: ({ username }) => {
    localStorage.setItem('username', username);
    // accept all username/password combinations
    return Promise.resolve();
},

logout: () => {
  localStorage.removeItem('username');
  return Promise.resolve();
},
checkError: () => Promise.resolve(),
checkAuth: () =>
  localStorage.getItem('username') ? Promise.resolve() : Promise.reject(),
getPermissions: () => Promise.reject('Unknown method'),
};

export default authProvider;

my own layout is:

MyLayout.js:
import React from 'react';
import TreeMenu from '@bb-tech/ra-treemenu';
import { Layout } from 'react-admin';
import MyAppBar from './MyAppBar';
import { ProfileProvider } from './MyProfile/Profile.js';

const MyLayout = (props) => (
  <ProfileProvider>
    <Layout {...props} appBar={MyAppBar} menu={TreeMenu} />
  </ProfileProvider>
);

export default MyLayout;

MyAppBar.js:
import React from "react";
import { AppBar } from "react-admin";
import MyUserMenu from "./MyUserMenu";

const MyAppBar = props => 
<AppBar {...props} 
    userMenu={<MyUserMenu />} 
/>;

export default MyAppBar;

MyUserMenu.js:
import React from 'react';
import { UserMenu, MenuItemLink} from 'react-admin';
import SettingsIcon from '@material-ui/icons/Settings';

const MyUserMenu = (props) => {
  return (
    <UserMenu  {...props}>
      <MenuItemLink
        to="/my-profile"
        primaryText="Mein Profil"
        leftIcon={<SettingsIcon />}
      />
    </UserMenu>
  );
};

export default MyUserMenu;
0

There are 0 answers