DEV Community: Akunne Pascal

Building an E-commerce Storefront using Nextjs, Cloudinary, and Xata

Akunne Pascal — Wed, 23 Nov 2022 07:11:07 +0000

In a world where over 4.5 billion people access the internet daily, it has become an integral part of our lives because it affects our social interactions in so many ways. One is the increase in the number of people making purchases online. To create online stores, business owners have turned to online platforms like Shopify. These factors have led to an increase in the importance of online sales in our economy. E-retail sales have surpassed 5.7 trillion dollars globally, and this number is only likely to rise in the upcoming years.

In this article, you will learn how to integrate Xata and Cloudinary to Nextjs to build an E-commerce storefront, the presentation layer of an online store that communicates with online customers. Nextjs is a React framework used to create the user interface. Cloudinary is a robust media API used to manage media files, and Xata is a serverless database that stores users' data.

Prerequisite

Npm
Node
Git
Basic knowledge of Reactjs and Nextjs

Getting started

The entire source code for this application is publicly accessible on GitHub. You can clone it locally to your computer. This article will concentrate on how we will be utilizing Xata and Cloudinary in the project.

Cloudinary is a powerful media API for websites and mobile apps alike. Developers and marketers can effectively create, manage, and deploy their digital experiences using any browser, device, or bandwidth, thanks to Cloudinary. The architecture of Cloudinary was designed from the ground up to withstand enormous loads and manage essentially infinite amounts of assets and consumption.

After you clone it, you must add a Xata API key, Cloudinary cloud name, and the upload preset in an .env file at its root if you want to execute it locally.

Upload presets can be defined as a collection of activities that would occur upon uploading a resource. These activities could include applying an add-on capability, performing a transformation, or altering a resource's access control, among many other possibilities.

To clone the application, run the following command on the terminal.

git clone https://github.com/HarcourtHamsa/Frontier.git

Create a .env file in the root directory and paste your Xata api key

XATA_API_KEY=<your Api key>
CLOUD_NAME=<your cloudinary cloud name>
UPLOAD_PRESET=<your cloudinary upload preset>

Start the project

npm run dev

Adding Xata CLI

Xata is a serverless database with robust search and analytics. It is comparable to a serverless relational database, a search engine, and an analytics engine, all hidden behind a uniform API.

It is advisable to use the SDK when adding Xata to the project; We can use the SDK in many JavaScript runtimes, including Node.js, Deno, Electron, etc.

To install Xata, run the command:

npm i -g @xata.io/cli

Next, we have to authenticate Xata with the command

xata auth login

With the stated command, you can either paste in an existing API key or create a new one by opening a browser.

Also, you will need to configure the application with the command below:

xata init

The command above will start a brief survey that will assist us in setting up our project. Answer the questions, and use code generation.

Now that Xata is set up in the project, you can query data with the utmost security and efficiency.

Creating Xata API

To add an API key, you'll go to your account settings, where you can add an API key. There you will be required to submit a name to generate a key. Because your key will only be shown to you once before becoming inaccessible for security reasons, ensure you copy it to a secure area. You can invalidate and create a new key if you misplace this one.

Setting up a Cloudinary account

Visit the website to sign up for a free account, then set up your Cloudinary account. You can sign up using GitHub, Gmail, or your email address.

After signing up, you will be required to choose a role. In this case, you should select Developer and click continue.

Next, you will be asked to select what your project is most likely to be. Select the first option and click Done.

Navigate to your dashboard. The dashboard contains the account details, which is the most critical area of the project.

By default, Cloudinary assigns a random cloud name which you can edit to a name of your choice. To edit your cloud name, click on settings (the clog icon at the top left corner) and scroll to the bottom of the page as seen below:

Enter the cloud name of your choice and click Save.

Next, you need to set your upload preset. Still on your settings page, at the top of the page, click on Upload and scroll down to the section below.

Click on Add upload preset.

Input your desired preset name, set the Signing mode to Unsigned, and click Save.

Next, you will set up your Xata account.

Setting up the Xata account

Visit the website to register for free. You will see the Add a database card after signing up, where you will create your database.

Click on the card, input your database name and click Create. A new card with your database name will appear next to the Add a database card.

Next, you need to create a table. Select your new database to navigate a page like the one below.

Click on Add a table in the sidebar below and insert your table name. You can also populate your table by clicking the Add a record button and filling in the desired details.

For this project, you will need three tables; Users, Stores, and Products.

The Users table should have the following columns:

id: The user's unique id auto-generated by xata
first_name: The user's first name
last_name: The user's last name
email: The user's email
password: The user's password
username: The user's display name

The Products table should have the following columns:

id: Xata auto-generated id
name: Name of product
price: Price of the product
description: Short description of the product
image_url: Image URL gotten from Cloudinary
store_id: The store id

Finally, the Store table should contain the following:

id: Xata auto-generated id
name: Store name
owners_id: User id

Congratulations! You have completed the basic setup for Cloudinary and Xata. Next, you will insert and query data with Nextjs to Cloudinary and Xata.

Xata and Nextjs

Signing up users

Go to /pages/api/auth/register.ts

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { getXataClient } from "../../../utils/xata.codegen";


const xata = getXataClient();
const handler = nc().post(async (req: NextApiRequest, res: NextApiResponse) => {
  const record = await xata.db.Users.filter({
    email: req.body.email
  }).getMany();
  if (record.length !== 0) {
    res.status(403);
    res.end();
    return;
  } else {
    console.log(req.body)
    const user = await xata.db.Users.create({
      ...req.body,
    });
    return res.status(200).json({ data: user });
  }
});
export default handler;

The above code performs authentication for users when they try to sign up. First, the Users table is queried from the database and then filtered based on the email gotten from the client side. The result will be an array that is passed to the record variable.

Then we check if the record contains any data using record.length. If true, we parse a 403 error code and end the process. If false, we proceed to create a new user.

Log in users

Go to /pages/api/auth/login.ts.

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import Router from "next/router";
import { getXataClient } from "../../../utils/xata.codegen";

const xata = getXataClient();
const handler = nc().post(async (req: NextApiRequest, res: NextApiResponse) => {
  const record = await xata.db.Users.filter({
    email: req.body.email,
  }).getMany();

  if (!record) {
    return res.status(401).json({ message: "Invalid email/password" });
  } else if (record[0].password !== req.body.password) {
    return res.status(401).json({ message: "Invalid email/password" });
  } else {
    return res.status(200).json({ data: record });
  }
});
export default handler;

Like the sign-up page, the Users table is also queried and filtered for the login page. If no data is found, an error message is passed. If a record is found, we parse the data.

Create a store

/pages/api/store/index.ts

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { getXataClient } from "../../../utils/xata.codegen";
import { decode } from "jsonwebtoken";
const xata = getXataClient();
const handler = nc().post(async (req: NextApiRequest, res: NextApiResponse) => {
  const { name }: { name: string } = req.body;
  const jwt = req.cookies.frontier__jwt;
  const decodedData = decode(jwt);
  const accessToken = decodedData["0"].id;

  const record = await xata.db.Store.create({
    owners_id: accessToken,
    name: name,
  });
  if (!accessToken && record) {
    res.end();
    return;
  }
  res.status(200).json({
    data: record,
  });
});
export default handler;

To create a store, the above code retrieves the user's (owner) id encoded with JSON web token (JWT) and passes it along with the desired store name.

Fetch user store

/pages/api/products/index.ts

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { getXataClient } from "../../../utils/xata.codegen";
const xata = getXataClient();
import { decode } from "jsonwebtoken";
const handler = nc().get(async (req: NextApiRequest, res: NextApiResponse) => {
  const jwt = req.cookies.frontier__jwt;
  const decodedData = decode(jwt);
  const accessToken = decodedData["0"].id;
  const record = await xata.db.Store.filter({
    owners_id: accessToken,
  }).getMany();
  if (!record) {
    res.end();
    return;
  }
  res.status(200).json({
    data: record,
  });
});
export default handler;

The code above filters the Store table by the user's id and returns every store owned by the user.

Post a product

/pages/api/store/index.ts

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { getXataClient } from "../../../utils/xata.codegen";
const xata = getXataClient();
const handler = nc().post(async (req: NextApiRequest, res: NextApiResponse) => {
  console.log(req.body);
  const product = xata.db.Products.create({ ...req.body });
  console.log(product);
  return res.status(200).json({ data: product });
});
export default handler;

To create a product, the above code passes the information sent from the client form.

Fetch user product

/pages/api/stores/index.ts

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { getXataClient } from "../../../utils/xata.codegen";
const xata = getXataClient();
const handler = nc().post(async (req: NextApiRequest, res: NextApiResponse) => {
  const { storeID } = req.body;
  const record = await xata.db.Products.filter({
    store_id: storeID,
  }).getMany();
  if (!record) {
    res.end();
    return;
  }
  res.status(200).json({
    data: record,
  });
});
export default handler;

The code above filters the Product table based on the store's id and returns every product owned by the store.

Cloudinary and Nextjs

Uploading file to Cloudinary

/pages/app/products/new/index.ts

The above code aids in passing the image file to Cloudinary. The handleFileChange() function sets the file state with the image file from the input field. After filling in other fields, the submit button calls the handleSubmit() function when clicked. The formData is used to construct a set of key/value pairs representing the required field for uploading media to Cloudinary.

Then a POST request is made, passing the cloudinary_url, along with the formData. The response is parsed, and the URL for the image is set to state image_url. Next, all the information from the form is passed to the server side using the product() function, where they are inserted into the Product table.

Wrapping up

In this article, you learned how to set up and use Cloudinary to upload and store media files and Xata to query data from your Nextjs project. You also learned how to configure Xata on your project using the CLI. Remember the project is available and accessible on GitHub.

Project Demo

You can check out the live application to get a feel for how the application works.

Project Contributors

Akunne Pascal

Harcourt Hamsa

Article Banner: Created with React and Auth0

Akunne Pascal — Sat, 16 Oct 2021 22:53:00 +0000

This project is created with React.js and uses Auth0 for authentication. So in this article, we will discuss on how to use the application.

Challenges

Before we talk about the project, let me briefly highlight the challenge I encountered. This is actually not a complete project, in that I plan on adding a Generate link button so users can either download the banner or generate a link instead. This is where Cloudinary comes in.

In using cloudinary, the traditional way of uploading media to their server is via a form. But for this project, form is not used, rather an NPM package (html2canvas) is used to generate the banner image. If you know a way I can upload canvas image to cloudinary without using the form, please leave a comment.

We won't cover the entirety of the project, just the important part, so I will try to make this article as brief as possible. You can clone the source code to your device. Now let's dive right in!

After cloning the project to your device, open the project on your IDE (e.g visual studio) to start.

Registering on Auth0

First off, you will need to create an account on Auth0. Visit Auth0 to register your account.

Creating a tenant

You will create a tenant after successfully signing up. The tenant is where you configure your Auth0 usage and where Auth0 assets like applications, connections, and user profiles are defined, managed, and stored. It is immutable.

Creating an application

From your dashboard, click on applications > applications. Then click on create application. A box will appear as seen below, where will be required to enter your application name and select your application type.

Auth0 will assign you an immutable client ID which you will use in your code to call the Auth0 API. To get your client ID, select your application, and go to settings.

Environmental Variable

On the root folder of your project, create a .env file

    REACT_APP_AUTH0_DOMAIN= /* domain */
    REACT_APP_AUTH0_CLIENT_ID= /* client id */

Copy your Domain and Client ID values from your application settings and paste them in your .env file.

Run the following command in your terminal to install dependencies

    npm install

Your dependencies can be found in the package.json file.

Using Auth0

Auth0 is platform that creates an easy to implement, adaptable authentication and authorization for your application. In this section, I will explain how the Auth0 authentication is used in different components of the application.

Integrating Auth0

To integrate Auth0 to your react application, you will use the Auth0 React SDK @auth0/auth0-react.

Run the command

    npm install --save @auth0/auth0-react

auth-history.js
Go to /src/auth/auth-history.js

    import React from "react";
    import { useHistory } from "react-router-dom";
    import { Auth0Provider } from "@auth0/auth0-react";
    const AuthHistory = ({ children }) => {
      const domain = process.env.REACT_APP_AUTH0_DOMAIN;
      const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
      const history = useHistory();
      const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
      };
      return (
        <Auth0Provider
          domain={domain}
          clientId={clientId}
          redirectUri={window.location.origin}
          onRedirectCallback={onRedirectCallback}
        >
          {children}
        </Auth0Provider>
      );
    };
    export default AuthHistory;

To process authentication, the Auth0 React SDK connects to the Auth0 Application. The Auth0Provider must be configured with an Auth0 Domain and Client ID.

The onRedirectCallback() method is called when Auth0 redirects users from the Auth0 Universal Login page to the application. The useHistory() hook is used to retrieve the React Router's history object. The history.push() method will then redirect users to the route they intended to visit prior to authentication.

index.js
Go to src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import {BrowserRouter as Router} from 'react-router-dom'
    import AuthHistory from './auth/auth-history'


    ReactDOM.render(
      <Router>
        <AuthHistory>
          <App />
        </AuthHistory>
      </Router>,
      document.getElementById("root")
    );

The App component is wrapped with the AuthHistory component so that the entire application will have access to the AuthContext. The BrowserRouter component from React Router must be the parent of the AuthHistory.

LoginButton.js
Go to /src/components/buttons/loginbutton.js

    import React from "react";
    import { useAuth0 } from "@auth0/auth0-react";
    const LoginButton = () => {
      const { loginWithRedirect } = useAuth0();
      return <button className="btn btn-primary btn-block" onClick={() => loginWithRedirect()}>Log In</button>;
    };
    export default LoginButton;

When loginWithRedirect() method is called, a user is asked to authenticate and give permission for the application to access specific data on their behalf. This means that the application redirects the user to the Auth0 Universal Login page to complete the authentication process.

SignupButton.js
Go to /src/components/buttons/signupbutton.js

    import React from "react";
    import { useAuth0 } from "@auth0/auth0-react";
    const SignupButton = () => {
      const { loginWithRedirect } = useAuth0();
      return (
        <button
          className="btn btn-primary btn-block m-2"
          onClick={() =>
            loginWithRedirect({
              screen_hint: "signup",
            })
          }
        >
          Sign Up
        </button>
      );
    };
    export default SignupButton;

In the signup component, an option is passed to redirect users to an Auth0 Universal Login page optimized for signing up for the application. This is done by specifying the screen_hint=signup property in the configuration object of loginWithRedirect()

LogoutButton.js
Go to /src/components/buttons/logoutbutton.js

    import React from "react";
    import { useAuth0 } from "@auth0/auth0-react";
    const LogoutButton = () => {
      const { logout } = useAuth0();
      return (
        <button
          className="btn btn-danger btn-block"
          onClick={() =>
            logout({
              returnTo: window.location.origin,
            })
          }
        >
          Log Out
        </button>
      );
    };
    export default LogoutButton;

Auth0Context's logout() method clears the application session and redirects to the Auth0 /v2/logout endpoint to clear the Auth0 session. logout(), like the login method, accepts an object argument to define parameters for the /v2/logout call. The returnTo option specifies the URL to which Auth0 should redirect users after they logout.

AuthenticateButton.js
Go to /src/components/buttons/authenticatebutton.js

    import React from "react";
    import LoginButton from "./LoginButton";
    import LogoutButton from "./LogoutButton";
    import SignupButton from './SignupButton'
    import { useAuth0 } from "@auth0/auth0-react";
    const AuthenticationButton = () => {
      const { isAuthenticated } = useAuth0();
      return isAuthenticated ? <LogoutButton /> : (
        <div>
          <SignupButton className="mr-5 " />
          <LoginButton />
        </div>
      );
    };
    export default AuthenticationButton;

The isAuthenticated is used to check if a user is logged in. It returns a boolean true is logged in. If a user is authenticated, it displays the logout button, if not authenticated, the signup and login buttons are displayed.

BannerWrapper
Go to src/components/bannerwrapper/index.js

    ...
    const { isAuthenticated } = useAuth0();
      return (
        <>
          <div className="wrapper">
            <div>
              <Output values={values} />
            </div>
            <div className="actionWrapper">
              <InputWrapper values={values} setters={setters} />
              { isAuthenticated ? (
                <>
                  <button className="btn btn-success mb-5 mt-3" id="download-button" download="banner.png" href={imgURL}>
                    <a download="banner.png" href={imgURL}>DOWNLOAD BANNER</a>
                  </button>
                </>
              ) : (
                <h5 className="mb-5 mt-3" style={{color: "red"}}>Login to download your banner</h5>
              )}
            </div>
          </div>
        </>
      )
    }

In this part of the bannerWrapper component, the isAuthenticated is used once more to check if user is logged in. If authenticated, the download button will be displayed. If not authenticated, a red-colored text is displayed requesting the user to login in order to download the banner.

That is how Auth0 is used in this project application.

Overview of the application

Now run the following command to start the project:

    npm start

Your browser should display the following image

At the bottom of the page, your will see a red-colored sentence, requesting you to login before you can download your banner. Since your are a new user, you will have to signup instead. So click on the signup button to register.

Fill in your email address and password to signup or your can simply signup with Google. When signed in, you will be presented access to the download button, so your can easily download your banner to your device.

Conclusion

With Auth0, we can easily implement an adaptable authentication and authorization for our application. While with Cloudinary, we can manage our cloud-based media services such as image and video. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and apps.

These are robust technologies that can make our development easier and faster.

Here is a link to my live demo on codesandbox

Reference

https://auth0.com/docs/quickstart/spa/react

https://auth0.com/docs/get-started

https://auth0.com/blog/complete-guide-to-react-user-authentication/

Content created for the Hackmamba Jamstack Content Hackathon using Auth0 and Cloudinary