2

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;
Fee
  • 21
  • 2
  • You should provide us with the `authProvider `'s code in order to be able to tell anything :) – Kia Kaha Mar 01 '21 at 13:03
  • @KiaKaha I added the code of my `authProvider`. Thank you for your help – Fee Mar 01 '21 at 13:29
  • authProvider looks good also. My next guess would be that you are using a custom layout (`MyLayout`) which is not secured with `useAuthenticated()` hook. Could you also provide the MyLayout source code? Or just try commenting out the custom layout? Another thing to debug the issue would be to check the localStorage content after loggin out. – Kia Kaha Mar 01 '21 at 15:10
  • @KiaKaha thank you but when I comment out the custom layout it is still the same problem or the login page is then even no longer displayed when I click on the logout button... How could I check the localStorage content after logging out? – Fee Mar 01 '21 at 21:37
  • You can inspect localStorage by opening the Developer Tools inside your browser and in Firefox it is under the Storage tab, in Chrome the tab is called Application. – Kia Kaha Mar 02 '21 at 10:09
  • I finally fixed the problem! I added a initial state and now it works:) Thank you for your help @KiaKaha – Fee Mar 02 '21 at 11:36
  • 1
    You're welcome! Happy coding - and consider adding the final solution as an answer to help others stumbling with this in the future :) – Kia Kaha Mar 02 '21 at 18:06

0 Answers0