In this short article, I will show you how you can add a full-featured admin panel to your koa application.
This is a 5minutes’ long article which can save you weeks of work.
After following this tutorial you will have an app with authentication, beautiful interface and the entire CRUD for your data. Further, you can adjust it to your specific needs.
So this is HOT news. ^^^
If you start from scratch, first initialize the repo and install koa:
yarn add koa
Now install the following dependencies necessary to set up the admin panel:
yarn add admin-bro @admin-bro/koa @koa/router koa2-formidable
Admin Setup — basics
Now we have to launch the admin interface. Create an
index.js file and insert the following content:
What we did:
- create a regular
- initialize AdminBro with some default settings
- attach admin by using the
Now, let’s run the app with
node command. (you can also use
And visit the http://localhost:3000/admin page. You should see something like this:
Ok, it’s pretty and it works, but it doesn’t do much. Let’s change that.
Fill it with your data
Now install mongoose dependencies:
yarn add @admin-bro/mongoose mongoose
And change our
- Require new dependencies and register the mongoose adapter with AdminBro, so it knows how to handle passed models.
- Create a new mongoose model: User with an
- We have to
awaitfor mongo to
connectmethod first. This is why we will need to wrap an entire setup with an
- Inside the setup, we pass User to
resourcesarray in AdminBro.
This is an updated
And this is what creating new users looks like:
For the User model, AdminBro has generated an entire CRUD with validations.
The problem is with the password field which should be hashed whenever the user passes something. Fortunately, AdminBro comes with installable chunks of code which are called AdminBro Features. And guess what — there is a feature to the password hashing.
Install the feature first with argon2 which will be used to encrypt the password.
yarn add @admin-bro/passwords argon2
And pass the feature to AdminBro options like this
And this is basically it. Now you can create users and their passwords will be hashed automatically. Cool — right?
Before you move forward — create, at least, one user with known email and password. Let me suggest:
Since we have users in the database, with proper password hashing, let’s add an authentication mechanism.
In order to do that we will have to change
buildAuthenticatedRouter and define the
async authenticate method.
Before we do this we also have to set koa
app.keys because authentication is using cookies.
app.keys = ['super-secret1', 'super-secret2']
most probably in the real world example you would like to take them from
Next, change the
So we first look for an existing user and then we check her password with
argon2. If everything is correct, we return the user object, which goes to the session. It can be then used inside the AdminBro.
And this is what we see after running the app again:
Fill it with the email and password you’ve just created (PS: I suggested
email@example.com:password :)) – and you are in.
Summary, what’s next
Uff, we did it. We launched the entire application, authentication, password hashing and user management (CRUD) in a couple of minutes. Everything thanks to the amazing koa framework and a superb admin-bro admin panel.
From here you can do lots of things:
- Modify the look and feel of the UI
- Add new resources
- Define actions (like approve, disapprove users etc)
- Add role-based access control
- And many, many more
To check out all the available options — see adminbro.com documentation page — it is huge.
I hope you liked this brief tutorial. Next time I would like to describe some more advanced AdminBro topics.
If you want you can download one file with the server code — you can do this here.