Create your login system effortlessly with Materia

Published in

Materia In Depth

5 min readAug 6, 2019

Materia is an API builder that help you build powerful web and mobile application with database. To understand better what Materia is, take a look at this Article: Introduction to Materia: An API Builder made for Frontend developers.

In this article, we’ll see how simple it is to have a login system API with email verification for your application using 2 addons:

@materia/users to add user management features (signin / signup / lost password / change email / change password),
@materia/mailjet to send transactional emails with Mailjet to your users when they signup to verify their email address or when they lose their password to reset it.

To begin, create an application in Materia designer:

Mailjet addon

To send email via Mailjet, you need to create a free account on Mailjet and retrieve your apikey here. Then, you can install @materia/mailjet in the addons section of Materia Designer and configure it with the APIKeys you’ve just created.

As you can see, this addons add multiple Virtual entities that allows you to easily query Mailjet API like creating a campaign or sending a templated email etc.

User management addon

Once Mailjet addon is installed and configured, you can install @materia/users and configure it like the following:

In this article, we’re using session authentication instead of token authentication for its simplicity but you must be aware that it works only in browser and not with mobile application. Today, most authentication system prefer using token authentication.

For token authentication, you get a token in response of a successful login. Then, you need to add this token in the header of every API call to be authorized Authorization: Bearer [token] .

And finally, we enable the emailing with Mailjet to be able to automatically send emails on specific events.

Storing custom data attached to your users

You can optionally create a profile entity to add fields to your user (e.g. name, picture, company etc.) and add it in the User management configuration:

The addon will add these fields in the signup endpoint POST /api/user/signup and when you retrieve the connected user information GET /api/users/me .

Emails templating

To send automatically emails at key events, we need to create 3 transactional emails for 3 different scenarios:

When the user signed up to verify his email address,
When the user change his email to verify his new email address,
When the user lose his password and ask to send a reset password link.

This is the template we’ve used in our demo:

Then, you can add them directly in Materia Designer like the following GIF:

Email configuration in User Management addon

Implementing the front-end

You’re now good to go, your API is ready to be consumed by any front-end framework in your web application (to work with mobile and desktop apps you just need to switch to token base authentication in the User Management settings).

The flow is the following:

1- You call POST /api/user/signup when your user fill the signup form. Your user is automatically signed in after a signup.

2- Your user will receive a welcome email to verify their email address, when they click the button, they are redirected on the link you’ve passed in the User Management settings (e.g. http://localhost:8080/verify_email). You need to call GET /api/user/me to check if verified is true to know if the email has been successfully verified, else you can display an error “This link has expired” — If you have setup the user management with the token based authentication, a authorization token is sent in query parameter to be able to call the GET /api/user/me endpoint with the token in header as explained in the “User management addon” chapter.

3- If the user don’t receive his email to verify his email address, you can display a button “Send a verification email again” which will call POST /api/user/me/send_verification_email .

4- When a user go in your application, you can display their information by calling GET /api/user/me at anytime.

5- If the user want to update their email or password, you can call PUT /api/user/me/email and PUT /api/user/me/password . Note that changing his email will trigger an email verification step to verify his new email address.

6- The user can signin at anytime using POST /api/user/signin with the email and password passed in body parameters.

7- If the user want to remove his account, you can call DELETE /api/user/me which will definitively remove the user account.