In Canonic, we now support projects with a username and password authentication system and in this blog, I'll walk you through how to create one such project and the moving parts around it.

Authentication is identifying a user with the credentials passed to the backend.

A prevalent method of managing authentication on any product/project is using the username and password system instead of integrations for third-party authentication.

In Canonic, we now support projects with a username and password authentication system and in this blog, I'll walk you through how to create one such project and the moving parts around it.

Starting a new Project

To get started with understanding the workflow of login and signup authentication for your application, let us start a new project to better understand how the entire thing works on canonic.

• When you go to your canonic dashboard, you will see a create project button similar to the one shown in the below screenshot. Let's click on "Create Project" and get to the next steps.
  

• Now, let us select a template for our project, since we want to build a signup and login app, let's select that template and proceed with the next steps.
  

• On the second screen of your project setup, you can then select from multiple options which provider you want to select for login. In this, the username/password method is preselected for you, so let's proceed to the next steps.
  

• In the next step, add your project name and the region where you want to deploy it, and click on the create button to finalize the project setup.
  

• When you click on create you will see a progress screen for the deployment of your project.
  

• Finally, when the project is deployed, you'll see the below popup on your project home and you can open up a code sandbox when you click on the Frontend Option in this popup.
  

In this playground, you can then play around with a dummy frontend code consuming the project's APIs to help users signup and log in using username and password.

Once you make a few entries from the code sandbox project, you can then check this data in your CMS for the project as shown below.

Exploring the project graph

When we go to the project's graph, we can see that there is a user table already created for us. This is to enable the username password feature for login. When we click on the user table, we see the settings as shown in the screenshot below.

As you can see, in the settings, in generating endpoints section, there are two endpoints that have been marked as true i.e. LOGIN WITH PASSWORD and SIGNUP WITH PASSWORD

Understanding the new APIs

As you have already seen above, there are a couple of APIs which are new in the settings section for the user table. The APIs being LOGIN WITH PASSWORD and SIGNUP WITH PASSWORD .

These APIs are what enable user generation and login using a username/password system.

Let us go through some basic documentation for these APIs to understand their usage better.

loginWithPasswordForUser

Login with password for user API as the name suggests carries out the function of logging an existing user in the system. To process the user login, we need a unique identifier (username in this case) and a password for the account. If the password and username combination matches, then the API returns a JWT token which can be used for future authentication and the users' details.

signupWithPasswordForUser

Signup with password for user API as the name suggests helps us make a new user in our project and sign them up for it. To process user signup, usually, a couple of data points are mandatory, and they are a username, (or email) and, password.

This API takes username and password as request payload and returns a JWT token which can be used for future authentication of the user. We also get the details of the generated user in the API response.

You can read more about both these APIs in your project's documentation section.

Using the JWT token in APIs

We now know that both the loginWithPasswordForUser and signupWithPasswordForUser APIs return a JWT token which as mentioned above can be used for authorization for the user.

This can be done in a very simple manner

Let us assume we have a function that acts as a wrapper for a fetch call and passes on some parameters to it.

function makeApiCall(url, params = {}) {
  return fetch(url, {
    method: "POST",
    body: JSON.stringify(params),
    headers: {
      Authorization: TOKEN,
      "Content-Type": "application/json",
    },
  }).then((res) => res.json());
}

In this function, as you can see, we pass an Authorization token, the value being passed to it can be the token that has been returned after a signup/login call to the project's endpoint.

And That's it for this post! I hope this walkthrough helped you understand the flow of this setup better and if you have any questions please feel free to comment or reach out!