Having an error using the custom login page shown in the docs

[tomasalonz55]

I'm having these error when trying to use the custom login page on Docs

Gave me this error
index.js:1 Warning: Failed prop type: The prop theme is marked as required in ThemeProvider, but its value is undefined.

This is the code in the docs.

import * as React from 'react';
import { useState } from 'react';
import { useLogin, useNotify, Notification } from 'react-admin';
import { ThemeProvider } from '@material-ui/styles';

const MyLoginPage = ({ theme }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const login = useLogin();
const notify = useNotify();
const submit = (e) => {
    e.preventDefault();
    login({ email, password })
        .catch(() => notify('Invalid email or password'));
};

return (
    <ThemeProvider theme={theme}>
        <form onSubmit={submit}>
            <input name="email" type="email" value={email} onChange={e => 
             setEmail(e.target.value)} /> 
            <input name="password" type="password" value={password} onChange={e => 
              setPassword(e.target.value)} />
        </form>
        <Notification />
    </ThemeProvider>
);
};

export default MyLoginPage;

Other information:

Environment

• React-admin version: 3.7
• Stack trace:
  in ThemeProvider (at MyLoginPage.js:18)
  in MyLoginPage (created by Context.Consumer)
  in Route (created by CoreAdminUI)
  in Switch (created by CoreAdminUI)
  in CoreAdminUI (created by AdminUI)
  in AdminUI (created by Admin)
  in Router (created by ConnectedRouter)
  in ConnectedRouter (created by Context.Consumer)
  in ConnectedRouterWithContext (created by ConnectFunction)
  in ConnectFunction (created by CoreAdminContext)
  in TranslationProvider (created by CoreAdminContext)
  in Provider (created by CoreAdminContext)
  in CoreAdminContext (created by AdminContext)
  in AdminContext (created by Admin)
  in Admin (at App.js:34)
  in App (at src/index.js:9)
  in StrictMode (at src/index.js:8)

[djhi]

Thanks for reporting. The doc is missing the import of the theme.

You should add:

import theme from './theme';

And add this file with your theme.

[tomasalonz55]

Thanks for the follow, i already add the theme file and imported in the App.js, the error is not longer visible but the custom login page still not work, this is the theme.js

import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
    palette: {
        primary: indigo,
        secondary: pink,
        error: red,
        contrastThreshold: 3,
        tonalOffset: 0.2,
    },
    typography: {
        // Use the system font instead of the default Roboto font.
        fontFamily: [
            '-apple-system',
            'BlinkMacSystemFont',
            '"Segoe UI"',
            'Arial',
            'sans-serif',
        ].join(','),
    },
    overrides: {
        MuiButton: { // override the styles of all instances of this component
            root: { // Name of the rule
                color: 'white', // Some CSS
            },
        },
    },
});

export default theme;

[Luwangel]

Hi @tomasalonz55, can you open a CodeSandbox reproducing the issue or at least paste your App.js.

You can use the React Admin Template.

Thanks :)

[Shark]

@Luwangel I've created a CodeSandbox demo for this. What I did is take the template you mentioned, add login.js with the custom form code in the Authentication docs and add the component as loginPage in index.js. When you navigate to #/login you can see that the page doesn't have any layout.

I'd appreciate any help on this issue! :)

[jdemangeon]

Hello @Shark,

I think you got the wrong issue, or maybe you encountered the same problem as @tomasalonz55 ? In any case, your login.js file doesn't have a any layout, so it's normal that only the form fields are displayed.

[fidel-ruiz]

@jdemangeon @fzaninotto I've forked that sandox above created and applied the changes suggested in the docs and it was still rendering just the inputs.
@Shark
Is there anything else that I should be fixing?

Thanks in advance

[andrewlorenz]

In case it helps anyone else, here's some notes from my recent work in this area.

  import { Admin, Login } from 'react-admin';

  const CustomLogin = () => (
    <Login backgroundImage="splashScreen.jpg">
      <CustomLoginForm />
    </Login>
  )

  <Admin ... loginPage={CustomLogin}>
     // Resources
  </Admin>

Then CustomLoginForm is a copy of the standard source taken from https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/auth/LoginForm.tsx - this is where the username/password fields and submit button are.

Its a slight pity that the default padlock icon that appears on the top of the login form actually comes from the Login component and not the LoginForm - and no option to switch it off or change it - and I don't want to have a custom version of that in my code. The red box in the pic attached shows the scope of LoginForm, the rest comes from Login (the MUI Card component and padlock icon)

[yaron2]

@andrewlorenz how did you import the copy of LoginForm.tsx? I tried the same but getting an error:

Module not found: Error: Can't resolve './LoginForm/MyLoginForm.tsx' in ...

And here is the import statement:

import { LoginForm } from "./LoginForm/MyLoginForm";

[andrewlorenz]

hey @yaron2 I didn't ! Here's my "code complete":

• file CustomLoginForm.js:

import { Field, Form } from 'react-final-form';
import { useLogin, useNotify, useSafeSetState } from 'ra-core';

const CustomLoginForm = (props) => {
  const { redirectTo } = props;
  const [loading, setLoading] = useSafeSetState(false);
  const login = useLogin();
  const notify = useNotify();

  return (
    <Form
      onSubmit={submit}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit} noValidate>
          ...
        </form>
      )}
    </Form>
  )
}
export default CustomLoginForm;

• and then

import { Admin, Login } from 'react-admin';
import CustomLoginForm from './CustomLoginForm';

  const CustomLogin = () => (
    <Login backgroundImage="splashScreen.jpg">
      <CustomLoginForm />
    </Login>
  )

  <Admin ... loginPage={CustomLogin}>
     // Resources
  </Admin>

I've snipped out the main body of my actual custom login form as that's specific to my application, but you can see how the pieces fit together and what other imports you might need. HtH

[yaron2]

Thanks!