Overriding the login view in AdminJS has been simplified

One of the most repeatedly asked questions in AdminJS community is how to customise the default login view in AdminJS. Until version 6.2.0 this was a complex process because you had to:

• create your custom component or an HTML view,
• override AdminJS login route with your framework to serve the custom view,
• worry about extra issues such as accessing AdminJS options (if you needed to).

In version 6.2.0 this has been simplified. This article will explain how you can override the default login page with your own, custom React component as long as you had updated to version 6.2.0.

Setting up an AdminJS instance

We will start by setting up an AdminJS instance in Typescript. This tutorial will use @adminjs/express but you can choose any other plugin. If you already have an instance of AdminJS running, you can skip this step.

Start by installing the required dependencies:

$ yarn add adminjs express @adminjs/express tslib express-session express-formidable
$ yarn add -D ts-node typescript @types/node @types/express @types/styled-components

You should also initialize a tsconfig.json file. You can do this by running npx tsc --init. The only change you have to make is to set the jsx option to react; the remaining options can have default values:

"compilerOptions": {
  // ...
  "jsx": "react",
  // ...
}

Afterwards, create app.ts with the following contents:

This is the most basic AdminJS setup with authentication. If you have any trouble setting up the instance, please refer to the official documentation.

You can now start your application by running node app.js and you should be able to see the default login page when you open http://localhost:3000/admin in your browser. If you submit the form without inputting any credentials, it will still let you in, but this is an intended simplification.

Default login page of AdminJS

Next, we will create our custom login view.

Creating a custom React login component

Our login view will be very simple: a plain white box with “Just let me in!” button in the middle. This is to avoid unnecessary complexities in the component’s code. You can customise your application’s view in any way that you wish. We will name the file login.tsx and we will put it in the components directory.

Overriding the login view

The final and actually the simplest part is overriding the default login view.

To do this, we will return to the app.ts file that we created at the beginning. There are two changes that we have to add here:

1. import out custom Login component:
   import Login from './components/login'
2. use the new overrideLogin method to override the login component:
   admin.overrideLogin({ component: Login })

The overrideLogin method takes an object argument containing the component and optionally props that you would like to pass into the component.

Finally, your app.ts should look like in the snippet below:

When you restart the server and visit http://localhost:3000/admin you should now see the custom login page which lets you enter the admin panel after pressing the “Just let me in!” button.

Custom login page in AdminJS

Overriding the login view in Admin JS is simpler

As you can see, the process of overriding the login view has been greatly simplified. If you still have doubts about the process or other questions about AdminJS, just join our Slack, where you can get help both from the AdminJS core team as well as our community members.