How to build Email/Password Signup with Canonic
Tags: frontend, api, lowcode, beginners
Published: 2022-06-16 06:19:43

---
title: How to build Email/Password Signup with Canonic
published: true
description: Building a login with email password setup on canonic platform
tags: #frontend #API #lowcode #beginner
canonical_url: https://blog.canonic.dev/articles/how-to-setup-username-password-signup-on-canonic/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2r4q5k0u1pgnthcxcdt.png
---

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](https://canonic.dev/?utm_source=dev.to&utm_medium=organic_article&utm_campaign=june01-15&utm_term=canonic&utm_content=june13), 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.
![Create Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w08rma4ll4hinx1yzl5p.png)

- 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.
![Project Tempalte selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8deo88g95r02vo7a63t.png)

- 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.
![Login Provider Selection Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6vvempp5i3vuxlbb31o.png)

- 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.
![Deployment Settings screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elgkv50nnelum7q5gw31.png)

- When you click on create you will see a progress screen for the deployment of your project.
![Deployment progress screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9btojisnbkj630dnest.png)

- 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.
![Deployment Success Popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex995lmy2zhhzjda9iaa.png)

![Frontend Codepen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puec0s0rlrji4z37bfcr.png)


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.

![User Table Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jrya0eodhtdl9kirjzr.png)

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.

```javascript
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!

---