DEV Community: Shivang Bhandari

How to build Email/Password Signup with Canonic

Shivang Bhandari — Thu, 16 Jun 2022 06:19:43 +0000

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!

Querying data on your Canonic database!

Shivang Bhandari — Fri, 27 May 2022 19:14:37 +0000

Whenever we want to interact with our database, there needs to be a signal to our backend that we want to make a change, get some data, update an entry, etc. This is where we query our database. A query is a keyword signifying that our backend has been notified we want to perform an action on our data, and the nature of the action is deduced by what query we want to run.

A database query is either an action query or a select query.

Select Query - To retrieve data from the database.
Action Query - For insertion, updating, deleting, or other forms of data manipulation.

In this blog, I will be walking you through how to perform some basic queries on your canonic project that has some existing data entries.

We will cover:

Filtering data
Searching for an entry or a group of entries
Sorting query results

Searching your data

Searching for data is the most executed operation on a database because by the virtue of storing your data in a database, it is a given you would want to search for this data to perform some operations in your application.

There are majorly two ways to go about searching your data:

Running a search query for a unique data entry
Running a search query for a group of data (we will talk more about this in filtering your data section)

To search for a unique data entry, Let's consider we have a list of products in our database and we want only to fetch a unique data entry here.

Let's take a product inventory project to understand this with real code now!

We have a project which has a few products listed in the products table as you can see below.

On the Left-hand menu inside the graph, you can see there is an endpoints sub-menu that populates the endpoints for this specific table of products.

Let us now click on the product endpoint, because that is the general endpoint where you can get a unique data entry. There will be a similar endpoint for your table pre-created by canonic for you!

Click the graph node to open up the settings for this endpoint
Go to the code section and expand it using the bottom left arrow

Here you will see, that the method has the following code:

module.exports = async function getOne({ _id }) {
  return Product.findOne({ _id }).populate([]);
}

By default, this method will accept a unique ID for a product in our database and if any entry matches the value for the ID we have passed, we will get that data entry in the response.

Now let us search for Nike Shoes entry in our database by passing its unique ID as an argument to our function.

The best part is you do not actually need to run this code on your frontend to see how this will work, just pass this value in the Input section and press the Test code Button (play icon) in the center to run this code.

As you can see above, we passed in a unique ID mapped to the key _id in an object as the input and we got back our results as expected. Voila!

Filter your data

Filtering data is one of the most essential use-cases of querying a database for any product. There are a lot of use-cases where we might have to reduce the fetched data based on some filters because that's just an efficient thing to do.

To fetch only a subset, we will have to figure out which products we need, and to do that we would need to add constraints. If a product matches the constraint only then do we want is a general understanding.

This is the perfect use for a filter query.

The key difference here is instead of using a .findOne() method in our function, we will leverage .find() method here.

As mentioned above, we will use the same list of products to understand the filter query.

Let's say I only want to search for the Nike Shoes Product because I need that product's data for some operation.

Let us go to the project's graph now!

On the Left-hand menu inside the graph, you can see there is an endpoints sub-menu that populates the endpoints for this specific table of products.

Let us now click on the products endpoint, because that is the general getAll endpoint where you can add your filters to get specific data instead of all entries. There will be a similar endpoint for your table pre-created by canonic for you!

Click the graph node to open up the settings for this endpoint
Go to the code section and expand it using the bottom left arrow

You should have a code interface similar to the below screenshot now open!

Here you will see that the method has a code

module.exports = async function getAll(query = {}) {
  return Product.find(query).populate([]);
}

As you can see, this method accepts an arg called query and this is where we pass our filters. We can filter based on a key in the table.

For e.g. if I want to filter for a product with the name Nike Shoes I will have to pass a query that helps me achieve this. To get this result, we simply have to pass {"name": "Nike Shoes"} as our query.

Similar to the above example, all you have to do to see if your code runs fine is go to the code tab of this graph node and run it there.

As you can see we get an output for this product which is something like this:

[
  {
    "name": "Nike Shoes",
    "_id": "62750be6d85a0a00096639f1",
    "createdAt": "2022-05-06T11:52:06.085Z",
    "updatedAt": "2022-05-06T11:52:06.085Z",
  }
]

This is one very basic example of how to filter your data based on a field and its value. You can also create complex queries and filter your data as you like! As long as a data entry matches the query, you will get your data.

Sort your query results

Sorting your query results is another major use case that we need for day-to-day operations. One of the classic ones is listing out products. Since we are already talking about a product catalog, the use-case where you need to list products alphabetically as a user might want to see them in alphabetical order, be it sorted from A to Z or Z to A. This is a common pattern seen on e-commerce websites as well and is the perfect place to add a sort query.

For this example, we will be using the getAll API endpoint, similar to what we used in the above section, and making a small modification in the function by chaining a .sort() method with our .find() method.

To give you a little more context let us dive briefly into how the sort method actually works. It simply accepts an object as an argument where you can mention the field which you want to sort and the accepted values for this key will be -1 or 1 . Mapping the key 1 will sort it in ascending order while mapping it with -1 will sort it in descending order.

Let's sort the list of products by their names now!

We have simply chained the sort method and as an argument, we have passed the field we want to sort it by and the order we want to sort it in.

When we run this query we will get the following results:

[
  {
    "name": "Amul Taaza",
    "_id": "62750bddd85a0a00096639ee",
    "createdAt": "2022-05-06T11:51:57.116Z",
    "updatedAt": "2022-05-06T11:51:57.116Z",
  },
  {
    "name": "Chocolate",
    "_id": "62738392c8db87000927fd50",
    "createdAt": "2022-05-05T07:58:10.536Z",
    "updatedAt": "2022-05-06T11:51:47.080Z",
  },
  {
    "name": "Lays",
    "_id": "62750bd7d85a0a00096639eb",
    "createdAt": "2022-05-06T11:51:51.375Z",
    "updatedAt": "2022-05-06T11:51:51.375Z",
  },
  {
    "name": "Nike Shoes",
    "_id": "62750be6d85a0a00096639f1",
    "createdAt": "2022-05-06T11:52:06.085Z",
    "updatedAt": "2022-05-06T11:52:06.085Z",
  }
]

Our data is successfully sorted and that's how we do a sort query!

Thanks for reading! If you find this story helpful, please click the 👏 button and share it to help others find it! Feel free to leave a comment 💬 below.

Build Google Login with Canonic

Shivang Bhandari — Mon, 11 Apr 2022 06:40:40 +0000

A key aspect of frontend development and products is the authentication and security of users. Adding Login flows to a project is usually the easiest way to get comfortable with authentication.

Adding Login flows to a project is usually the easiest way to get comfortable with authentication. As developers get started there are a few questions that come to mind:

How to handle passwords
How to handle reset passwords
How to encrypt and store them

Why use Third-Party Providers?

Third-party sign-on has proven to be a widely adopted and secure alternative to username/password authentication.

It’s easier to retrospect on the complexities of having an in-house authentication and managing everything. This would mean all the user data including their passwords will have to be stored on internal servers and it needs to be properly salted and hashed. Managing all the complexity and solving a problem that Google, Facebook, etc. have already solved on a mammoth scale is not the most efficient solution for this problem. Third-party sign-on takes care of all of this for us as we are never dealing with the user credentials. This is done for us by the oAuth provider we have integrated.

While third-party oAuth service sounds great, when implemented it involves a fair amount of code, getting familiar with provider APIs, and integrating multiple login services is still isn't that straightforward.

Then came Canonic!

Simplified Authentication using Canonic

At Canonic, we help reduce all this complexity by providing a single API endpoint that can be used for multiple providers. The process stays the same on a high level for all the different logins. In this article, we’ll walk you through integrating Google Login with ReactJS, powered by Canonic.

So let's get started!

Setting up the backend

To set up the backend for our authentication, first, let’s head over to canonic.dev. After this, you can log in to canonic, or create a new account if you do not already have one! We provide a free plan to enable developers to try out the product.

After this, we need to set up a new project and we can name it “Test Login App” or anything else that you would want to name it 😄. Select the “Create” option which would mean we need a new DB Instance for this project (provided by canonic).

Now we need to create a table that will handle the data which will flow in. We enter the name of our table, let’s name this one “Users”. There are 3 types of tables we can create:

List - This means we’ll be storing multiple records in this table.
Standalone - means we can store only one record in this table.
Identity - creates a user table where we can enable different login providers.

For the next step, We’ll select identity as the type. We’re provided with a bunch of predefined system field that covers most of the user information. You can also add more fields to this table as required.

Now that our table and fields are ready, we need to enable login providers on this table. To open settings, we click on the table and select identity settings from the tabs. You’ll find a list of all the service providers on your left. For our project, we enable Google login.

There are 3 fields that are needed in this setup:

Redirect URI → The URL where users will be redirected after logging in to google. (for our app purposes, http://localhost:3000/ will be our redirect URL)
Client ID → Client ID (provided by google)
Secret → Secret (provided by google) Once all the settings are filled, close the panel and hit deploy on the top right corner.

And VOILA! Our APIs are ready for consumption. Now let’s start with the front end. We’ll use react with GraphQL.

Need Help in getting the client id and secret from google? Read more about it here

Setting up the Frontend

Here's what the flow will look like on frontend:

Step 1 - Frontend calls Canonic to get the google URL where the user needs to be redirected for sign in.
Step 2 - After logging in, google will redirect back to our app with a code.
Step 3 - We send this code back to Canonic to get the authorization token and user data.

To start the react app, we can go with CRA since it's easy to set up the project using it.

npx create-react-app my-test-frontend
cd my-app
npm start

Next, we install GraphQl in our app

# You can use either yarn or npm
yarn add @apollo/client graphql

After GraphQL is installed, we head over to Canonic, to get our GraphQL connection URL. Go to project documentation via the vertical navigation bar, at the bottom left, click on the button named API Playground.

You'll see the connection URL in the tab. It'll end in /graphql

Now that we have our connection URL ready,

In order to consume our GraphQL APIs, we need to establish a client using Apollo. We open the index.js file and wrap our App in ApolloProvider and create our client.

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "<COPIED-URI-FROM-CANONIC>",
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

This will now enable our frontend application to connect with the backend.

Now we need a component for logging in. Let's create LoginComponent. On the screen, the user can interact with a CTA that lets them sign in using google. Once the user is logged in, We'll have to fetch our google login redirect URL (the URL we need to redirect users to. when they click on the button). For that, we need to call getLoginUrlsForUser query with the following parameters:

query Login {
  getLoginUrlsForUser {
    GOOGLE
  }
}

In order to call our API and get the login URL, we call useQuery method from apollo/client

We create login.js inside the components directory.

import React from "react";
import { useQuery, gql } from "@apollo/client";

const LOGIN_URLS_QUERY = gql`
  query Login {
    getLoginUrlsForUser {
      GOOGLE
    }
  }
`;

function Login() {
  const { loading, error, data } = useQuery(LOGIN_URLS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;


  return <a href={data?.getLoginUrlsForUser?.GOOGLE}>LOGIN with Google</a>;
}

export default Login;

So far we have got a working setup for the google redirection URL.

Next Steps:
Now we need to grab the token from the URL when google redirects back to our application. Then we have to send this token to Canonic, call login API, and get the authorization token along with the user object.

So we add a few lines of code to App.js.

Remember, we are running the project on http://localhost:3000/ so google will redirect back to this URL - with code in the URL (It'll look something like this http://localhost:3000/?code=.......

Now in our frontend, We want to check if there's a code in the URL when the component mounts (when the web app loads), so we use useEffect to check this.

useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      <CALL-LOGIN-API-HERE>
    }
  }, []);

So we call our login mutation - our mutation would involve two parameters - Code (Google passes it back) and Service (which will be "GOOGLE" in our case).

mutation Login($code: String!, $service: String!) {
  loginForUser(code: $code, service: $service) {
    token
    user {
      _id
      createdAt
      updatedAt
      email
      firstName
      lastName
      avatar {
        url
        name
      }
    }
  }
}

💡 NOTE: Since this is a write operation, we'll need to generate a secret key for our Canonic APIs with appropriate permissions. Go back to Canonic --- Go to your project --- project settings located in the left vertical menu --- Access Tokens --- Create a new access token. Be sure to select write permission. Read more about it here.

When we combine our mutation and useEffect in App.js will look something like this. We import Login Component in our App and depending on whether we have a token or not, we show the login component.

import { useEffect } from "react";
import { gql, useMutation } from "@apollo/client";

import Login from "./components/Login";

import "./App.css";

const LOGIN_MUTATION = gql`
  mutation Login($code: String!, $service: String!) {
    loginForUser(code: $code, service: $service) {
      token
      user {
        _id
        createdAt
        updatedAt
        email
        firstName
        lastName
        avatar {
          url
          name
        }
      }
    }
  }
`;

function App() {
  const [loginMutation, { data }] = useMutation(LOGIN_MUTATION);

  useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      loginMutation({ variables: { code: urlCode, service: "GOOGLE" } });
    }
  }, []);

  return (
    <>
      {!data?.loginForUser?.token ? (
        <Login />
      ) : (
                <div>Hi, you're logged in! You're email is {data?.loginForUser?.user?.email}</div>
      )}
    </>
  );
}

export default App;

Stitching all this together will get the App working and it’ll look something like this:

To add more login providers (Github, Facebook), now you simply enable the login provider on Canonic, fill in the required secret, id, and you're good to go!

We already have the code mentioned in this blog hosted on Github, Feel free to clone this project, add your own project URL and give it a spin!