DEV Community: Babatunde Koiki

How To Build A Contact Manager Application With Next JS, Auth0 and Fauna

Babatunde Koiki — Tue, 27 Jul 2021 00:01:52 +0000

Authored in connection with the Write with Fauna program.

Introduction

This article will demonstrate how to build a contact manager with Next.js and Fauna by walking you through the process of building a Google contact application clone.

What is NextJS?

Next.js is a React.js front-end framework with server-side capabilities, which makes it easy to build full-stack applications with

Some of its features and benefits include:

Static Site Generation (SSG)
Server-Side Rendering (SSR)
Pre-rendering
Better SEO
Fast compilation times
Automatic build size optimization

Prerequisites:

Knowledge of React and JSX.
Basic knowledge of Express.js
Basic knowledge of Next.js
npm and npx installed
Installation of the create-next-app CLI tool

What you will learn in this article:

Next.js app setup
Routing on the client-side
Routing on the server-side
Authentication with Next.jsand Auth0
Creating Fauna databases, collections, and indexes
Building a fully functional app

Setting Up A Next.js Application

To set up a next.js app, all we need to do is to run the following command in the terminal:

npx create-next-app $relativePathToDir # npx create-next-app

This will create everything we need in the specified directory. You can look at the package.json file to check out the dependencies and scripts there.

As we can see, the package.json file has three scripts and three dependencies.

The dev command is used to start the app in development mode, while the build command is used to compile it. Meanwhile,the start command runs the app in production mode. Note, however, we need to compile our application before running it in production mode.

The app also has three dependencies: react, react-dom, and next itself.

Now, let's run our app. To do this, we need to type npm run dev in the application's root directory. We should see the following:

As we can see from the diagram above, there is are links to navigate from one site to another. We can also try to go to a random endpoint in the app. You should see the following, which is the default 404 page Next.js created for us:

Routing in NextJS

Unlike React.js, Next.js offers routing support out-of-the-box. In React.js, we need to install React Router dom to have routing abilities. However,with Next.js we do not need to do so. Rather, we just need to follow a particular syntax. Let's look at how we can handle both client-side and server-side routing in next js:

Client-Side Routing

In your pages folder, you can create a file, and that file name will be the route's endpoint. For example, say I want to have a /login endpoint; all I need to do is create a pages/login.js file. The page will then show a return value of the exported component.

Server-Side Routing

A folder called api should contain a file called hello.js with a simple express-like server in your pages folder. To test the API, go to the api/hello endpoint. You should see the following: {"name": "John Doe"}. That is the JSON object, which is sent as a response. Just as we route in the client, we create a file with the name we want to give the endpoint.

Complex Routes

Say we want to create a route like api/users/:userId, where userId is dynamic, create a route like api/users/contacts/follow, or api/users/:userId/follow/:friendId. How can we achieve this?.

Let's start with a route that is not dynamic – say api/users/contacts/follow or /users/contacts/follow. We need to chain it down using directories and sub-directories in our pages folder.

To create the /users/contacts/follow route, we need to create a pages/users/contacts/follow.js file in our application.

We can create a dynamic route, on the other hand, by naming the file with the path parameter enclosed in a square bracket. Say, for example, we want to create a route api/users/userId, we need to just create a file pages/api/users/[userId].js

To read more about routing in next.js, click here.

Authentication In Auth0 and NextJS

Handling authentication ourselves in some cases might not be a good idea because of security breaches. In this application, we'll be using Auth0 for authentication.

Let’s install the auth0js library for nextjs; in the terminal, we will have to type the following:

npm i @auth0/nextjs-auth0

If you do not have an auth0 account, create one here. Head over to your dashboard and go to your applications page, then create a new application.

As we're using NextJS, we need to select regular web applications. After creating the application, we should redirect to its settings page. Scroll down and edit the application URL as shown below, then save your changes. You can check auth0 next.js documentation here.

Connecting Auth0 and NextJS

We need to get the following from our auth0 dashboard:

AUTH0_SECRET=#random character
AUTH0_BASE_URL=<http://localhost:3000> #base URL of the application
AUTH0_ISSUER_BASE_URL=#Your domain
AUTH0_CLIENT_ID=#Your client id
AUTH0_CLIENT_SECRET=#Your Client Secret

To create environment variables in our next js app during development, we need to create a .env.local file in the root directory of our application. We need to create this file and pass in these values. Next js will parse the environment variables for us automatically, which we can use in the node environment of our app.

If we want to access these variables in the browser, we need to prefix the name with NEXT_PUBLIC_.

Now create a file called pages/api/auth/[...auth0].js, which will expose us to four different endpoints due to the fact that we’re destructuring the file: api/auth/login, api/auth/callback, api/auth/me and api/auth/logout that we can use in our application.

In the file you created, type the following:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

Also update your pages/_app.js file with the following:

import { UserProvider } from '@auth0/nextjs-auth0';
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
    return (
        <UserProvider>
            <Component {...pageProps} />
        </UserProvider>
    );
}

export default MyApp

With these two things set up, we can have a login and logout button on our home page just to test the functionality of our app. Change the content of the pages/index.js file to the code snippet below:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={styles.main}>
                <h1 className={styles.title}>
                Welcome to <a href="/">Next.js!</a>
                </h1>
                <p className={styles.description}>
                    <a className={styles.code} href="/api/auth/login">Get started</a> by Creating an account or logging in
                </p>
                <p className={styles.description}>
                    <a className={styles.code} href="/api/auth/logout">Logout</a>
                </p>
                <p className={styles.description}>
                    <a className={styles.code} href="/api/auth/me">Profile</a>
                </p>
                <p className={styles.description}>
                    <a className={styles.code} href="/api/auth/callback">callback</a>
                </p>
            </main>
            <footer className={styles.footer}>
                <a
                href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                target="_blank"
                rel="noopener noreferrer"
                >
                    Powered by{' '}
                    <span className={styles.logo}>
                        <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
                    </span>
                </a>
            </footer>
        </div>
    )
}

The app should now look like this; try to navigate to a different part of the app using the links. Start by creating an account or logging in; you should see the following page:

After signing in in, click on the profile link You should get a JSON response showing your profile data:

Navigate to the callback and logout route to see what happens.

Note that we won't be using the api/auth/me in the client-side of our app as auth0 provided us with a hook called useUser which returns the same thing when the user is logged in, and it returns null when the user is logged out.

Route Protection In Next JS and Auth0

It’s not enough to have an endpoint to log users in and out of the application; we need to be able to protect unauthenticated users from viewing some pages in the application and also restrict access to some APIs. Auth0 provides us with two functions that help ensure only authenticated users have access to a particular resource: withApiAuthRequired and withPageAuthRequired

These functions take in a callback function, while we use withApiAuthRequired in the API part of the app, and we use withPageAuthRequired in the components.

Let's now look at how we can restrict unauthenticated users to get a resource from the endpoint api/user and the dashboard page.

We'll need to create the following files: pages/api/user.js and pages/dashboard.js We need to put the following in the pages/api/user.js file:

import { withApiAuthRequired ,getSession } from "@auth0/nextjs-auth0"

export default withApiAuthRequired(async (req, res) => {
    const user = getSession(req, res).user // the getSession function is used to get the session object that's created in the app. Which is where auth data is kepy
        res.json({user})
    })

In our pages/dashboard.js file, let’s type the following:

import { withPageAuthRequired, useUser } from '@auth0/nextjs-auth0'

const Dashboard = () => {
    const {user} = useUser()
    return (
        <div>
            <main>
                {user && (
                    <div>
                        <div>
                            {user.email} {!user.email_verified && <span>Your account is not verified</span>}
                        </div>
                    </div>
                )}
            </main>
        </div>
    )
}

export const getServerSideProps = withPageAuthRequired()

export default Dashboard

If you go to the dashboard endpoint without logging in, it redirects to the login page. Similarly, if you go to the api/user endpoint, it will return with an error message. We've successfully protected routes both on the client and server-side.

Connecting Our Application To Fauna

Creating A Fauna Database

To create a Fauna database, head to the dashboard.

Next, click on the New Database button, enter the database name, and click enter.

Creating Fauna Collections

A collection is a group of documents(rows) with the same or a similar purpose. A collection acts similarly to a table in a traditional SQL database.

In the app we’re creating, we'll have one collection contacts. The user collection is where we’ll be storing our contact data.

To create these, click on the database you created and New Collection. Enter only the collection name (contacts), then click save.

Creating Fauna Indexes

Use indexes to quickly find data without searching each document in a database collection every time you need to access one. Indexes using one or more fields of a database collection. To create a Fauna index, click on the indexes section on the left of your dashboard.

In this application, we will be creating the one index which is the user_contacts index, this is used to retrieve all passwords created by a particular user.

Generating Your Fauna Secret

The Fauna secret key connects an application or script to the database, and it is unique per database. To generate it, go to your dashboard’s security section and click on New Key. Enter your key name, and a new key will be generated for you. Paste the key in your .env.local file in this format: REACT_APP_FAUNA_KEY={{ API key }}

Building Our Application

First, we need to figure out the structure of our application. Our application will have the following endpoints:

/: home route
/dashboard: The dashboard route. Only authenticated users can access this page.
api/contacts: This is an API. It will support the GET HTTP method for getting all the contacts created by the user and the POST HTTP method for creating a new contact
api/contacts/:contactId: This is also an API which will support GET, PUT and theDELETE HTTP method for getting a single contact, updating it, and deleting a contact respectively.

Now we know the routes that we need to create and automatically we know the files we need to create to achieve this, we also need to have some components that will be used in the app. Thus, we will create a components folder in the root directory of our app and put each component there:

Navbar: This is the navbar of the app,. We Will create a file called components/Navbar.js for this.
Contact: This contains details of a single contact detail. We won't have a separate file for this.
Contacts: This will use the Contact component and display all the contacts created by the authenticated user. We will create a file called components/Contacts and put both the Contacts and Contact components there.
BaseModal: is the component we will build all our modals upon. We will place it in a file called components/BaseModal.js.
CreateContact.modal: is the component that creates a modal for creating a new contact. We will place it in a file called CreateContact.modal.js.
EditContact.modal: This is the component that creates a modal for editing a contact. We will add it to a file called EditContact.modal.js

We also need to have a file that handles the logic of database modeling, so we won’t have to be writing queries directly in the api folder. This file models.js will be in the root directory of our app.

We also need to install the remaining dependencies. Type the following in the root directory of your application:

npm i faunadb axios @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/fontawesome-free react-bootstrap

Models

In your models.js, type the following

import faunadb, {query as q} from 'faunadb'

const client = new faunadb.Client({secret: process.env.REACT_APP_FAUNA_KEY})

export const createContact = async (
    firstName, 
    lastName, 
    email, 
    phone,
    user, 
    jobTitle, 
    company,
    address,
    avatar
    ) => {
    const date = new Date()
    const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
    ]
    let newContact = await client.query(
        q.Create(
            q.Collection('contacts'),
            {
                data: {
                    firstName,
                    lastName,
                    email,
                    phone,
                    company,
                    jobTitle,
                    address,
                    avatar,
                    created__at: `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`,
                    user: {
                        id: user.sub
                    }
                }
            }
        )
    )
    if (newContact.name === 'BadRequest') return
    newContact.data.id = newContact.ref.value.id
    return newContact.data
}

export const getContactsByUserID = async id => {
    try {
        let userContacts = await client.query(
            q.Paginate(
                q.Match(q.Index('user_contacts'), id)
            )
        )
        if (userContacts.name === "NotFound") return
        if (userContacts.name === "BadRequest") return "Something went wrong"
        let contacts = []
        for (let contactId of userContacts.data) {
            let contact = await getContact(contactId.value.id)
            contacts.push(contact)
        }
        return contacts
    } catch (error) {
        if (error.message === 'instance not found') return []
        return
    }
}

export const getContact = async id => {
    let contact = await client.query(
        q.Get(q.Ref(q.Collection('contacts'), id))
    )
    if (contact.name === "NotFound") return
    if (contact.name === "BadRequest") return "Something went wrong"
    contact.data.id = contact.ref.value.id
    return contact.data
}

export const updateContact = async (payload, id) => {
    let contact = await client.query(
    q.Update(
        q.Ref(q.Collection('contacts'), id),
            {data: payload}
        )
    )
    if (contact.name === "NotFound") return
    if (contact.name === "BadRequest") return "Something went wrong"
    contact.data.id = contact.ref.value.id
    return contact.data
}

export const deleteContact = async id => {
    let contact = await client.query(
        q.Delete(
            q.Ref(q.Collection('contacts'), id)
        )
    )
    if (contact.name === "NotFound") return
    if (contact.name === "BadRequest") return "Something went wrong"
    contact.data.id = contact.ref.value.id
    return contact.data
}

The logic of this file is pretty straightforward. We have functions to create a new contact, get all contacts created by a user, obtain a single contact, update a single contact and delete a single contact. You might be wondering why we do not handle the user dB; well we do not need to in this case because we do not have a complex dB. We just need to be able to figure out the owner of a particular contact, and auth0 gives us access to the ID and email of the logged-in user, amongst other things.

Components

Navbar Component

In your components/Navbar.js file, type the following:

import {
    Navbar, Nav
} from 'react-bootstrap'
import { useUser } from '@auth0/nextjs-auth0';
import Image from 'next/image';

const NavbarComponent = () => {
    const {user, isLoading, error} = useUser()
    return (
        <Navbar fixed="top" collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Navbar.Brand className="mx-2 mx-md-4" href="/">Contact Manager</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse className="d-lg-flex justify-content-end" id="responsive-navbar-nav">
                {(!user & !error) ? 
                    <>
                        <Nav.Link className="text-light" href="api/auth/login">Sign In </Nav.Link> : 
                        <Image alt="avatar" loader={myLoader} src={`https://ui-avatars.com/api/?background=random&name=John+Doe`} width="35" height="35" className="rounded-circle" />
                    </> :
                    <>
                        <Nav.Link className="text-light" href="/dashboard">Dashboard</Nav.Link>
                        <Nav.Link className="text-light" href="api/auth/logout">Sign Out</Nav.Link>
                        <Nav.Link href="/profile">
                            <Image alt="avatar" loader={myLoader} src={user.picture || `https://ui-avatars.com/api/?background=random&name=${firstName}+${lastName}`} width="35" height="35" className="rounded-circle" />
                        </Nav.Link>
                    </>
                }
            </Navbar.Collapse>
        </Navbar>
    )
}

const myLoader=({src})=>{
    return src;
}

export default NavbarComponent

We used the useUser hook here to determine if the user is logged in or not since we want to return things from this component dynamically. We also have a myLoader function at the bottom of the file, and this is because we are using the Image tag with a link.

BaseModal Component

In your components/BaseModal.js file, type the following:

import Modal from 'react-bootstrap/Modal'
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const BaseModal = (props) => {
    const onHide = () => {
        if (props.create) {
            props.updateFirstName('')
            props.updateLastName('')
            props.updateEmail('')
            props.updatePhone('' )
            props.updateAddress('')
        }
        props.onHide()
    }
    return (
        <Modal
        {...props}
        size="xlg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        onHide={onHide}
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    {props.header && props.header}
                    {props.title && props.title}
                </Modal.Title>
            </Modal.Header>
            <Modal.Body className="show-grid">
                <Container>
                    <Form>
                        <Row>
                            <Form.Group as={Col} className='form-group'>
                                <Form.Control placeholder="First name" className='form-control' value={props.firstName} onChange={e => {props.updateFirstName(e.target.value)}}/>
                            </Form.Group>
                            <Form.Group as={Col} className='form-group'>
                                <Form.Control placeholder="Last name" className='form-control' value={props.lastName} onChange={e => {props.updateLastName(e.target.value)}}/>
                            </Form.Group>
                        </Row>
                        <Row>
                            <Form.Group as={Col}>
                                <Form.Control type="email" placeholder="Email" value={props.email} onChange={e => {props.updateEmail(e.target.value)}}/>
                            </Form.Group>
                        </Row>
                        <Row>
                            <Form.Group as={Col}>
                                <Form.Control type="phone" placeholder="Phone number(+2348180854296)" value={props.phone} onChange={e => {props.updatePhone(e.target.value)}}/>
                            </Form.Group>
                        </Row>
                        <Row>
                            <Form.Group as={Col}>
                                <Form.Control placeholder="Address" value={props.address} onChange={e => {props.updateAddress(e.target.value)}}/>
                            </Form.Group>
                        </Row>
                    </Form>
                </Container>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="danger" onClick={onHide}>Close</Button>
                <Button variant="success" onClick={props.create ? props.handleCreate: props.handleEdit} disabled={(!props.firstName || !props.lastName || !props.phone) ? true : false}>{props.btnText}</Button>
            </Modal.Footer>
        </Modal>
    );
}

export default BaseModal

Contacts and Contact component

In your components/Contacts.js file, type the following:

import Image from 'next/image';
import Button from 'react-bootstrap/Button'
import Table from 'react-bootstrap/Table'
import { useState } from 'react'
import EditContactModal from './EditContact.modal'

const Contact = ({
    id,
    firstName,
    lastName,
    email,
    phone,
    address
    avatar,
    handleDelete,
    handleEdit
    }) => {
    const [editModal, setEditModal] = useState(false)
    const editContact = () => {
        setEditModal(true)
    }

    const deleteContact = () => {
        handleDelete(id)
        alert('Contact deleted successfully')
    }

    return (
        <tr>
            <td>
                <Image alt="avt" loader={myLoader} src={avatar} width="35" height="35" className="rounded-circle" />
            </td>
            <td>{firstName} {lastName}</td>
            <td>
                <a href={`mailto:${email}`}>{email}</a>
            </td>
            <td>
                <a href={`tel:${phone}`}>{phone}</a>
            </td>
            <td>{address}</td>
            <td><Button onClick={editContact}>Edit</Button></td>
            <td><Button onClick={deleteContact}>Delete</Button></td>

            <EditContactModal
            show={editModal}
            firstname={firstName}
            lastname={lastName}
            email={email}
            phone={phone}
            address={address}
            title={"Edit Contact for "+firstName}
            onHide={() => {
                let n = window.confirm("Your changes won't be saved...")
                if (n) setEditModal(false)
            }}
            onEdit ={(contact) => {
                contact.id = id
                handleEdit(contact)
                alert(`Contact for ${firstName} updated successfully`)
                setEditModal(false)
            }}
            />
        </tr>
    )
}

const Contacts = ({contacts, handleEdit, handleDelete}) => {
    return (
    <>
        {!contacts && 'Fetching contacts...'}
        <Table striped bordered hover responsive>
            <thead>
                <tr>
                <th>avatar</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Edit</th>
                <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {contacts.map(ele => <Contact {...ele} 
                    key={ele.id} 
                    handleEdit={handleEdit} 
                    handleDelete={handleDelete} />)} 
            </tbody>
        </Table>
    </>
    )
}

const myLoader=({src})=>{
    return src;
}

export default Contacts

Create Contact Modal

In your CreateContact.modal.js file, type the following:

import BaseModal from './BaseModal'
import { useState } from 'react'

const CreateContactModal = (props) => {
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('') 
    const [email, setEmail] = useState('')
    const [phone, setPhone] = useState('') 
    const [address, setAddress] = useState('')

    const handleCreate = () => {
        const payload = {
            firstName,
            lastName,
            email,
            phone, 
            address
        }
        props.onCreate(payload)
    }

    return <BaseModal
        show={props.show}
        onHide={props.onHide}
        firstName={firstName}
        lastName={lastName}
        email={email}
        phone={phone}
        address={address}
        updateFirstName={newInput => setFirstName(newInput)}
        updateLastName={newInput => setLastName(newInput)}
        updateEmail={newInput => setEmail(newInput)}
        updatePhone={newInput => setPhone(newInput)}
        updateAddress={newInput => setAddress(newInput)}
        header="Create New Contact"
        btnText="Create"
        handleCreate={handleCreate}
        create={true}
    />
}

export default CreateContactModal

This component uses the BaseModal.js file and passes props to the component.

Edit Contact Modal

In your components/EditContact.modal.js file, type the following:

import BaseModal from './BaseModal'
import { useState } from 'react'

const EditContactModal = props => {
    const [firstName, setFirstName] = useState(props.firstname)
    const [lastName, setLastName] = useState(props.lastname) 
    const [email, setEmail] = useState(props.email)
    const [phone, setPhone] = useState(props.phone) 
    const [address, setAddress] = useState(props.address)

    const onEdit = () => {
        const payload = {
            firstName
            lastName,
            email,
            phone, 
            address
        }
        props.onEdit(payload)
    }

    return <BaseModal
        show={props.show}
        onHide={props.onHide}
        title={props.title}
        firstName={firstName}
        lastName={lastName}
        email={email}
        phone={phone}
        address={address}
        updateFirstName={newInput => setFirstName(newInput)}
        updateLastName={newInput => setLastName(newInput)}
        updateEmail={newInput => setEmail(newInput)}
        updatePhone={newInput => setPhone(newInput)}
        updateAddress={newInput => setAddress(newInput)}
        btnText="Edit"
        handleEdit={onEdit}
        create={false}
    />
}

export default EditContactModal

You might notice that the pages,/index.js file has a Meta tag.All pages should have their meta tag for SEO optimization.

Let’s create a components/MetaData.js file:

MetaData Component

In your components/MetaData.js file, type the following:

import Head from 'next/head'

const MetaData = ({title}) => {
    return (
        <Head>
            <title>{`Contact Manager App ${title && "| " +title}`}</title>
            <meta name="description" content="A simple Contact Manager" />
            <link rel="icon" href="/favicon.ico" />
        </Head>
    )
}

export default MetaData

API

Before we start creating our screens, it’s ideal for our backend to be complete since we will consume the APIs in the frontend of our app.

We need the following files for our API, excluding the auth endpoint:

api/contacts - we need to create a pages/api/contacts.js file

a. GET - get all contacts.
b. POST - create a new contact.
api/contacts/:id - we need to create a pages/api/contacts/[id].js file

a. GET - get a single contact
b. PUT - update a single contact
c. DELETE - delete a single contacts

Create and Get all contacts

In your pages/api/contacts.js file, type the following:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { withApiAuthRequired, getSession } from "@auth0/nextjs-auth0"
import { createContact, deleteContact, getContactsByUserID } from "../../models"

export default withApiAuthRequired(async (req, res) => {
    const user = getSession(req, res).user
    if (req.method === 'POST') {
        let {
            firstName, lastName, email,
            company, jobTitle, phone, address, avatar
        } = req.body
        let newContact = await createContact(
            firstName, lastName, 
            email, phone,
            user, jobTitle, 
            company, address, avatar
        )
        res.status(201).json({ 
            message: "Successfully created contact",
            data: newContact,
            status: 'ok'
    })
    } else if (req.method === 'GET') {
        let contacts = await getContactsByUserID(user.sub)
        if (!contacts) return res.status(400).json({
            message: 'Something went wrong',
            data: null,
            status: false
        })
        res.status(200).json({ 
            message: "Successfully retrieved contacts",
            data: contacts,
            status: 'ok'
        })
    } else {
        res.status(405).json({
            message: 'Method not allowed',
            data: null,
            status: false
        })
    }
})

In this file, we used the getSession function to get the current user from the request and response object. We then used this to set the contact creator and get contacts created by the user.

UPDATE, DELETE and GET a single Contact

In your pages/api/contacts/[id].js type the following:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { withApiAuthRequired ,getSession } from "@auth0/nextjs-auth0"
import { deleteContact, getContact, updateContact } from "../../../models"

export default withApiAuthRequired(async (req, res) => {
    const user = getSession(req, res).user
    if (req.method === 'PUT') {
        let contact = await updateContact(
            req.body, req.query.id
        )
        res.status(201).json({ 
            message: "Successfully updated contact",
            data: contact,
            status: 'ok'
        })
    } else if (req.method === 'GET') {
        let contact = await getContact(req.query.id)
        res.status(200).json({ 
            message: "Successfully retrieved contact",
            data: contact,
            status: 'ok'
        })
    } else if (req.method === 'DELETE') {
        let contact = await getContact(req.query.id)
        if (contact.user.id !== user.sub) {
            return res.status(403).json({
                message: "Forbidden",
                status: false,
                data: null
            })
        }
        contact = await deleteContact(req.query.id)
        res.status(200).json({ 
            message: "Successfully deleted contact",
            data: contact,
            status: 'ok'
        })
    } else {
        res.status(405).json({
            message: 'Method not allowed',
            data: null,
            status: false
        })
    }
})

With this we have our API all set up. You can test it by going to different endpoints using an API testing tool, like Postman.

Pages

Now we finished creating our components and APIs,, we need to create the pages and use the above.

Index Page

Change the content of your pages/index.js file to the following:

import Image from 'next/image';
import { useUser } from '@auth0/nextjs-auth0';
import MetaData from '../components/MetaData'
import styles from '../styles/Home.module.css'

export default function Home() {
    const { error, isLoading } = useUser();
    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>{error.message}</div>;

    return (
        <div>
        <MetaData title="" />
        <main className={styles.container}>
            <Image className={styles.img} alt="home" src="/home.jpeg" width="400" height="200" />
        </main>
        </div>
    )
}

This page just returns an image as the content of the app. You might be wondering: where will our navbar be? So as not to call the navbar more than once, we’ll place it in our pages/_app.js file. Basically, this file is what is served, and it changes based on what is happening on the current page.

Dashboard Page

In your pages/dasboard.js file, type the following:

import { useEffect, useState } from 'react'
import { withPageAuthRequired, useUser } from '@auth0/nextjs-auth0'
import Button from 'react-bootstrap/Button'
import axios from 'axios'
import CreateContactModal from '../components/CreateContact.modal'
import Contacts from '../components/Contacts'
import MetaData from '../components/MetaData'
import styles from '../styles/Home.module.css'

const Dashboard = () => {
    const {user} = useUser()
    const [contacts, setContacts] = useState([])
    const [createModalShow, setCreateModalShow] = useState(false);

    const handleHide = () => {
        let n = window.confirm("Your changes won't be saved...")
        if (n) setCreateModalShow(false)
    }

    useEffect(async () => {
        let res = (await axios.get(`/api/contacts`)).data
        res = await res.data
        setContacts(res.reverse())
    }, [])

    const createContact = async payload => {
        payload.avatar = `https://ui-avatars.com/api/?background=random&name=${payload.firstName}+${payload.lastName}`
        let newContact = (await axios.post(`/api/contacts`, payload)).data
        setContacts([newContact.data, ...contacts])
    }

    const editContact = async payload => {
        let id = payload.id
        delete payload.id
        let replacedContact = (await axios.put(`/api/contacts/${id}`, payload)).data
        setContacts(contacts.map(contact => contact.id === id? replacedContact.data : contact))
    }

    const deleteContact = async id => {
        (await axios.delete(`/api/contacts/${id}`)).data
        setContacts(contacts.filter(contact => contact.id !== id))
    }

    return (
        <div>
            <MetaData title="Dashboard" />
            <main>
                {user && (
                    <div className={styles.dashboardContainer}>
                        <div>
                            <img alt="avatar" src={user.picture} className="rounded-circle m-3" width="100" height="100"/> 
                            <span>Welcome {user.nickname.toLowerCase().charAt(0).toUpperCase()+user.nickname.toLowerCase().slice(1)}</span> 
                            {!user.email_verified && <div>Your account is not verified</div>}
                    </div>
                    <div>
                        <Button variant="primary" onClick={() => setCreateModalShow(true)}>
                            Create New Contact
                        </Button>
                        <CreateContactModal
                            show={createModalShow}
                            onHide={handleHide}
                            onCreate ={(payload) => {createContact(payload); setCreateModalShow(false)}}
                        />
                    </div>
                </div>
                )}
            </main>
            <Contacts 
                contacts={contacts}
                handleEdit={(id) => editContact(id)}
                handleDelete={(id) => deleteContact(id)} 
            />
        </div>
    )
}

export const getServerSideProps = withPageAuthRequired()

export default Dashboard

What is happening here is pretty straightforward: We are getting contacts the user created when the page loads, and we render it. We also show some details about the logged-in user, and we have a create contact button.

Before we can run our application, we need to make one change: we need to add the navbar to the pages/_app.js file.

Root Component

Update the content of your pages/_app.js file with the following:

import React, { useEffect, useState } from 'react'
import { UserProvider } from '@auth0/nextjs-auth0';
import axios from 'axios'
import MetaData from '../components/MetaData'
import NavbarComponent from '../components/Navbar'
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
    return (
        <UserProvider>
            <NavbarComponent />
            <Component {...pageProps} />
        </UserProvider>
    );
}

Running Our Application

We have successfully built our application. Next, we need to run it in development mode. If you run your application, you should see the following:

After signing in, you should get redirected to the home page after signing in with the navbar being different.

Go to the dashboard endpoint and create some contacts. Also, edit some of them and watch how the dashboard component is changing. You can also check the network request. You’ll notice that our Fauna secret key isn’t present as we handle this from the server.

We’ve successfully tested our application.

Next Steps

We have now built our application, but we're never really done developing it, as there's always room for improvement.. These are some of the things we can add to this application to make it look better:

We can improve the appearance of the UI
We can add a PWA feature to our application
We can also create a profile page for the logged-in user, where they can update their profile.

Conclusion

This article has offered a deep dive into Next.js and why we should use it in our projects. It also explains how to build a fully functional application with authentication features using NextJS and auth0 for authentication, and Fauna as our database provider.

Do you have something to add to this project? kindly let me know. You can reach out to me via Twitter. If you like this project, kindly give it a star on GitHub. You can also check out the deployed app here.

Building A Password Manager With React JS, Crypto JS, and Fauna

Babatunde Koiki — Tue, 15 Jun 2021 16:07:09 +0000

Building A Google Password Manager Clone With React JS and Fauna

Authored in connection with the Write with Fauna program.

Introduction

This article will walk you through how I built a password manager with React JS and Fauna. Password managers are essential. When we have multiple accounts and multiple passwords, we need to keep track of them. Tracking passwords is difficult without having a password manager to help you.

Prerequisites

Basic knowledge of React and JSX.
npm and npx installed.
How to create a react app.
React Bootstrap installed.
Basic knowledge of encryption and cryptography.

Getting Started With Fauna

First, create an account with Fauna.

Creating A Fauna Database

To create a fauna database, head to the fauna dashboard.

Next, click on the New Database button, enter the database name, and click enter.

Creating Fauna Collections

A collection is a grouping of documents(rows) with the same or a similar purpose. A collection acts similar to a table in a traditional SQL database.

In the app we’re creating, we’ll have two collections, users and passwords. The user collection is where we’ll be storing our user data, while the passwords collection is where we’ll be keeping all the password data.

To create these collections, click on the database you created, click New Collection. Enter only the collection name (users), then click save and do the same for the second collection (passwords).

Creating Fauna Indexes

Use indexes to quickly find data without searching every document in a database collection every time a database collection is accessed. Indexes can be created using one or more fields of a database collection. To create a Fauna index, click on the indexes section on the left of your dashboard.

In this application, we will be creating the following indexes:

user_passwords: Index used to retrieve all passwords created by a particular user.
user_by_email: Index used to retrieve specific user data using the user’s email. This index needs to be unique

Setting Up The Application

Moving forward, we will be using the below starter project. Begin with cloning the project on Github

git clone <https://github.com/Babatunde13/password-manager-started-code.git>
cd password-manager-starter-code
npm install

After cloning the repo, the following files/folders will be downloaded:

/src/assets/: This folder contains all images that will be used in the application.
/src/App.css: This is the base CSS file for our application
/src/models.js: This is the file where we will communicate with our Fauna database.
.env.sample: This file shows the environment variables we need to create to run the app successfully.
The service worker files are used for PWA features.
index.js: This file is where we mount the div, in the public/index.html file, to our application component.
src/screens: This folder is where all the pages(screens) we have in the app are defined. The following screens are defined in the screen folder:
Home.js: This is the home page.
Signin.js: This is the Sign-in page.
Signup.js: This is the signup page.
App.js: This is the dashboard page.
src/components: This is the folder where we create all the components in the app. The following components are created in the components folder:
Flash: This folder contains a flash.js and a flash.css file. The component exported in the flash.js file is used for flashing messages across the app.
createPassword.modal.js: This is a modal that is shown when trying to create a new password.
editPassword.modal.js: This modal is shown when a user tries to update a password.
Navbar.js: This is the navbar component.
Passwords.js: This component renders the passwords and is imported into the app dashboard.
previewPassword.modal.js: This modal is shown when a user previews a password.

Environment Variables

Our app has two environment variables, as we can see in the sample env file, REACT_APP_FAUNA_KEY, and REACT_APP_SECRET_KEY. When creating environment variables with React and create_react_app, we need to prefix the environment variables with REACT_APP_.

Generating Your Fauna Secret Key

The Fauna secret key connects an application or script to the database, and it is unique per database. To generate your key, go to your dashboard’s security section and click on New Key. Enter your key name, and a new key will be generated for you. Paste the key in your .env file in this format REACT_APP_FAUNA_KEY={{ API key}}

Application Secret Key

Your application secret key has to be private, and no one should have access to it. We will use the application secret key to encrypt passwords before storing them in our database. Add your secret key in your .env file in this format: REACT_APP_SECRET_KEY={{ secret key}}

Running Our Boilerplate Application

So far, we’ve looked at our app structure, now is a great time to run our boilerplate app. To run the app, we type npm start in the root directory. We should see the following after the server starts:

You can test other endpoints by manually editing the endpoints with what we’ve currently defined in our src/App.js file. The image below shows the /login endpoint:

Let’s discuss what is going on in this component. First, a couple of files in our screens folder are imported, alongside a couple of libraries.

We imported BrowserRouter, Switch, Route, and Redirect from react-router-dom; this library is used to define endpoints for our components. The BrowserRouter component can be used to route multiple components, and we can also set come components that we want to exist across all our app. The switch component is where we tell React to render only one component at a time. And the Route component takes in that path and component, and we also pass the exact parameter telling it to match that same endpoint.
We also imported the events library, which we use to listen for events that we flash to the user in the app. This is done by creating a flash function and attaching it to the window object to use it anywhere in our app. This function takes in a message and type, then emits an event. We can then listen for this event with our flash component and render some flash messages in the application.

Home Page

Let’s build the home page of our app. Change the content of src/screens/Home.js to the following:

import NavbarComponent from "../components/Navbar";
import Container from 'react-bootstrap/Container';
import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeart } from '@fortawesome/free-solid-svg-icons'
import {Flash} from '../components/Flash/flash'
import hero1 from '../assets/illus8.jpg';
import hero from '../assets/illus4.png';

const Home = () => {
  return (
    <div>
      <NavbarComponent />
      <Flash />
      <Container style={{height : "70vh", display : "flex", alignItems : "center", justifyContent : "center", overflow : "hidden"}}>
        <img src={hero1} alt="" className="h-25 shadow-lg mx-2" style={{border : "none", borderRadius : "15px"}} />
        <img src={hero} alt="" className="shadow-lg" style={{border : "none", borderRadius : "15px", maxWidth : "90%", maxHeight : "75%"}} />
        <img src={hero1} alt="" className="h-25 shadow-lg mx-2" style={{border : "none", borderRadius : "15px"}} />
      </Container>
      <p className="navbar fixed-bottom d-block w-100 m-0 text-center" style={{backgroundColor : "#d1e1f0e7"}} >Built with <FontAwesomeIcon icon={faHeart} className="text-danger" /> by <Link target="_blank" to={{ pathname: "https://twitter.com/bkoiki950"}}>Babatunde Koiki</Link> and <Link target="_blank" to={{ pathname: "https://twitter.com/AdewolzJ"}}>wolz-CODElife</Link></p>
    </div>
  )
}

export default Home

There isn’t much happening here, just JSX. Go back to the browser to view the content of the application; you should see the following:

Navbar Component

Change the content of your src/components/Navbar.js to the following:

import {useState} from 'react'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'
import { Link } from 'react-router-dom'
import CreatePasswordModal from '../components/createPassword.modal'
import favicon from '../assets/favicon.png'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserCircle, faCog } from '@fortawesome/free-solid-svg-icons'

const NavbarComponent = (props) => {
  const [createModalShow, setCreateModalShow] = useState(false);
  const handleHide = (url, password, email, name) => {
    let n = true
    if (url || password || email || name) {n = window.confirm("Your changes won't be saved...")}
    if (n) setCreateModalShow(false)
  }

  const handleCreate = payload => {
    props.handleCreate(payload)
    setCreateModalShow(false)
  }

 return (
  <Navbar expand="lg" className="navbar-fixed-top" 
  style={{position : "sticky", top : "0", zIndex: "10000", backgroundColor : "#d1e1f0e7"}}>
    <Navbar.Brand as={Link} to="/" style={{cursor : 'pointer'}}>
    <img src={favicon} alt="" style={{width : '40px', height : '40px'}} className="mr-2" /> 
    Password Manager
    </Navbar.Brand>

    <Navbar.Toggle aria-controls="basic-navbar-nav" />

    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        <Link to="/" className="mt-2" style={{textDecoration : "none"}}>Home</Link>

        {!localStorage.getItem('userId') ? 
          <>
            <NavDropdown title={<FontAwesomeIcon icon={faUserCircle} size="2x" className="text-primary" />} alignRight id="basic-nav-dropdown">
              <NavDropdown.Item as={Link} to="/login" className="text-primary">Sign in</NavDropdown.Item>
              <NavDropdown.Item as={Link} to="/register" className="text-primary">Register</NavDropdown.Item>
            </NavDropdown>
          </>: 
          <>
            <NavDropdown title={<FontAwesomeIcon icon={faCog} size="2x" className="text-primary" />} alignRight id="basic-nav-dropdown">
              <NavDropdown.Item as={Link} to="/dashboard" className="text-primary" >Dashboard</NavDropdown.Item>
              <CreatePasswordModal show={createModalShow} onHide={handleHide} handleCreate={ handleCreate } />
              <NavDropdown.Item to="#" onClick={() => setCreateModalShow(true)} className="text-primary" >Create New Password</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item as={Link} to="/logout" className="text-primary" >Logout</NavDropdown.Item>
            </NavDropdown>
          </>
        }
      </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default NavbarComponent

The application home page should now look like this:

This Navbar is a dynamic component. What is displayed in the dropdown depends on if the user is authenticated or not. If the user is not logged in, a sign-in and signup button is shown; if the user is logged in, a create password button, dashboard button, and logout button are displayed. This component has a local state called createModal, which is set to false by default and is used to determine if the create password button is clicked. If this button is clicked, the create password modal is displayed. The handleCreate function is passed as a prop to the CreatePasswordModal component to create a new password. The handleHide function is used to hide the modal when the user clicks somewhere outside the modal or the cancel button. We also check if there is no data passed, and we need to be sure that the user wants to close the modal. Check if the user object exists in the localStorage, which we’ll set whenever a user signs in. If you notice, the Flash component is displayed in the app as raw text. We need to update the component.

Flash Component

Replace the content of your src/components/Flash/flash.js with the following:

import React, { useEffect, useState } from 'react';
import {event} from '../../App';
import './flash.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'

export const Flash = () => {
 let [visibility, setVisibility] = useState(false);
 let [message, setMessage] = useState('');
 let [type, setType] = useState('');

 useEffect(() => {
 event.addListener('flash', ({message, type}) => {
 setVisibility(true);
 setMessage(message);
 setType(type);
 });
 }, []);

 useEffect(() => {
 setTimeout(() => {
 setVisibility(false);
 }, 10000)
 })

 return (
    visibility && 
      <div className={`alert alert-${type}`}>
        <br />
        <p>{message}</p>
        <span className="close">
          <FontAwesomeIcon icon={faTimesCircle} onClick={() => setVisibility(false)} />
        </span>
        <br />
    </div>
  )
}

This component is rendered when we emit an event in any part of our app. We need the event class exported from our root App.js component. This event object is what we’ll be emitting. We listen for an event that will give us the message and type emitted (Recall that: that’s what we wanted to listen for as defined in the App.js file). We created three states, message, type, and visibility. On listening for the event, we update the message and type states to what is returned, and we set the visibility to true. The flash component should only be visible only for a short time(10 seconds) if the user doesn’t remove it manually. We also created another useEffect which we use to turn the visibility to false back after 10 seconds. We returned some content if visibility was true. If you check the app now, you shouldn’t see anything for flash as the visibility is false. The type state is used for dynamic styling the way we have warning, success, and error alerts in bootstrap. We’ll create our Signin and Signup components next, but before that, we need to create two functions in our models.js, which we’d be using to create a user and sign a user in.

User Models

At the end of the src/models.js file, type the following:

export const createUser = async (firstName, lastName, email, password) => {
  password = await bcrypt.hash(password, bcrypt.genSaltSync(10))
  try {
    let newUser = await client.query(
    q.Create(
      q.Collection('users'),
        {
          data: {
            firstName, 
            email, 
            lastName, 
            password
          }
        }
      )
    )
    if (newUser.name === 'BadRequest') return
    newUser.data.id = newUser.ref.value.id
    return newUser.data
  } catch (error) {
    return
  }
}

export const getUser = async (userId) => {
  const userData = await client.query(
    q.Get(
      q.Ref(q.Collection('users'), userId)
    )
  )
  if (userData.name === "NotFound") return
  if (userData.name === "BadRequest") return "Something went wrong"
  userData.data.id = userData.ref.value.id
  return userData.data
}

export const loginUser = async (email, password) => {
  let userData = await client.query(
    q.Get(
      q.Match(q.Index('user_by_email'), email)
    )
  )
  if (userData.name === "NotFound") return
  if (userData.name === "BadRequest") return "Something went wrong"
  userData.data.id = userData.ref.value.id
  if (bcrypt.compareSync(password, userData.data.password)) return userData.data
  else return
}

The first function, createUser, takes in the data of the user that we want to create: first name, last name, email, and password(plain text), which creates the user data. We hash the password first before creating the document.
The second function, getUser, is used to get user data given its unique ID.
The loginUser takes in the email and password and finds the userData with that email; if it exists, it compares the passwords and returns the userData object if they are the same; else, it will return null.

Signup Page

Change your src/screens/Signup.js file to the following:

import { useState } from 'react'
import { createUser } from '../models';
import {useHistory} from 'react-router-dom'
import Form from "react-bootstrap/Form";
import { Link } from 'react-router-dom'
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import NavbarComponent from '../components/Navbar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
import { Flash } from '../components/Flash/flash';

export default function SignIn() {

  const history = useHistory()
    if (localStorage.getItem('userId')) {
      setTimeout(() => {
      window.flash('You are logged in', 'warning')
      }, 100)
    history.push('/')
  }

  const [validated, setValidated] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault()
    const body = {
      firstName: e.target.firstName.value,
      lastName: e.target.lastName.value,
      email: e.target.email.value,
      password: e.target.password.value
    }

    try {
      if (body.firstName && body.lastName && body.password && body.email && body.password === e.target.confirm_password.value) {
        const user = await createUser(body.firstName, body.lastName, body.email, body.password)
        if (!user) {
          window.flash('Email has been chosen', 'error')
        } else {
          localStorage.setItem('userId', user.id)
          localStorage.setItem('email', user.email)
          history.push('/')
          window.flash('Account created successfully, signed in', 'success')
        }
      } else if (!body.firstName || !body.email || !body.lastName || !e.target.confirm_password.value) {
        setValidated(true)
      } else {
        setValidated(true)
      }
    } catch (error) {
      console.log(error)
      window.flash('Something went wrong', 'error')
    }
  } 

 return (
    <>
      <NavbarComponent /> 
      <Flash /> <br/><br/>
      <Container className='d-flex flex-column align-items-center justify-content-center pt-5' style={{height : '80vh'}}>
        <p className="h3 display-4 mt-5"><FontAwesomeIcon icon={faUserCircle} size="1x" /></p>
        <p className="h2 display-5">Register</p>
        <Form noValidate validated={validated} onSubmit={handleSubmit} style={{minWidth : '300px' }}>
          <Form.Row>
            <Form.Group as={Col} md="6" controlId="validationCustom01">
              <Form.Label>First name</Form.Label>
              <Form.Control required name='firstName' type="text" placeholder="First name" />
              <Form.Control.Feedback type="invalid">Please provide your first name.</Form.Control.Feedback>
              <Form.Control.Feedback>Great name!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="6" controlId="validationCustom02">
              <Form.Label>Last Name</Form.Label>
              <Form.Control required name='lastName' type="text" placeholder="Last name" />
              <Form.Control.Feedback type="invalid">Please provide your last name.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="12" controlId="validationCustomUsername">
              <Form.Label>Email</Form.Label>
              <Form.Control type="email" placeholder="Email" aria-describedby="inputGroupPrepend" required name='email' />
              <Form.Control.Feedback type="invalid">Please choose a valid and unique email.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="6" controlId="validationCustom04">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" required name='password' />
              <Form.Control.Feedback type="invalid">Please provide a password between 8 and 20.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="6" controlId="validationCustom04">
              <Form.Label>Confirm Password</Form.Label>
              <Form.Control type="password" placeholder="Confirm Password" required name='confirm_password' />
              <Form.Control.Feedback type="invalid">Fields do not match.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Button type="submit">Register</Button>
          <p className="text-center"><Link to="/login">Sign in</Link> if already registered!</p>
        </Form>
      </Container>
    </>
  )
}

At the beginning of the function, we verified that the user is not authenticated. If the user is authenticated, we called the window.flash function created earlier and pass a message and warning as the type; then, we redirect back to the homepage.
Next, we created a validated state that is used for data validation.
The handleSubmit function is passed as the onSubmit handler for the form. We also use named form, so we don't have to define multiple variables.

The validated data is sent to the createUser function, and if it returns a user object, then the user is created; else, the user exists.

Go to the sign-up page now and create an account.

Sign in Page

Change your src/screens/Signin.js file to the following:

import { useState} from 'react'
import { useHistory } from 'react-router-dom';
import {loginUser} from '../models'
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { Link } from 'react-router-dom'
import Container from "react-bootstrap/Container";
import NavbarComponent from '../components/Navbar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
import { Flash } from '../components/Flash/flash';

export default function SignIn() {

  const history = useHistory()
  if (localStorage.getItem('userId')) {
    setTimeout(() => {
      window.flash('You are logged in', 'warning')
    }, 100)
    history.push('/') 
  }

  const [validated, setValidated] = useState(false)

  const handleSubmit = async (event) => {
    event.preventDefault();
    const body = {
      email: event.target.email.value,
      password: event.target.password.value
    }

    // Handle login logic

    if (!body.email || !body.password) {
      setValidated(true)
    } else {
      const user = await loginUser(body.email, body.password)
      if (user) {
        localStorage.setItem('userId', user.id)
        localStorage.setItem('email', user.email)
        history.push('/')
        window.flash('Logged in successfully!', 'success')
      } else {
        window.flash('Invalid email or password', 'error')
      }
    }
  }

 return (
    <>
      <NavbarComponent />
      <Flash />
      <Container className='d-flex flex-column align-items-center justify-content-center' style={{height : '80vh'}}>
        <p className="h3 display-4"><FontAwesomeIcon icon={faUserCircle} size="1x" /></p>
        <p className="h2 display-5">Sign in</p>
        <Form noValidate validated={validated} onSubmit={handleSubmit} style={{minWidth : '300px' }}>
          <Form.Row>
            <Form.Group as={Col} md="12" controlId="validationCustom01">
              <Form.Label>Email</Form.Label>
              <Form.Control required name='email' type="email" placeholder="Email" />
              <Form.Control.Feedback type="invalid">Please provide a valid email.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks Good!</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="12" controlId="validationCustom02">
              <Form.Label>Password</Form.Label>
              <Form.Control required name='password' type="password" placeholder="Password" />
              <Form.Control.Feedback type="invalid">Please provide a password.</Form.Control.Feedback>
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Button type="submit">Sign in</Button>
          <p className="text-center"><Link to="/register">Register</Link> to create account!</p>
        </Form>
      </Container>
      </>
    )
  }

This component is similar to the Signup component.

Password Model

Update the models.js file by adding functions that will help create, edit, delete, and get passwords in our application. Add the following to the end of the src/models.js file:

export const createPassword = async (accountName, accountUrl, email, encryptedPassword, userId) => {

  let user = await getUser(userId)
  const date = new Date()
  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ]
  let newPassword = await client.query(
    q.Create(
      q.Collection('passwords'),
      {
        data: {
          accountName,
          accountUrl,
          email,
          encryptedPassword,
          created__at: `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`,
          user: {
            email: user.email, 
            id: user.id
          }
        }
      }
    )
  )
  if (newPassword.name === 'BadRequest') return
  newPassword.data.id = newPassword.ref.value.id
  return newPassword.data
}


export const getPasswordsByUserID = async id => {
  let passwords = []
  try {
    let userPasswords = await client.query(
      q.Paginate(
        q.Match(q.Index('user_passwords'), id)
      )
    )
    if (userPasswords.name === "NotFound") return
    if (userPasswords.name === "BadRequest") return "Something went wrong"
    for (let passwordId of userPasswords.data) {
      let password = await getPassword(passwordId.value.id)
      passwords.push(password)
    }
    return passwords
  } catch (error) {
    return
  }
}

export const getPassword = async id => {
  let password = await client.query(
    q.Get(q.Ref(q.Collection('passwords'), id))
  )
  if (password.name === "NotFound") return
  if (password.name === "BadRequest") return "Something went wrong"
  password.data.id = password.ref.value.id
  return password.data
}

export const updatePassword = async (payload, id) => {
  let password = await client.query(
    q.Update(
      q.Ref(q.Collection('passwords'), id),
      {data: payload}
    )
  )
  if (password.name === "NotFound") return
  if (password.name === "BadRequest") return "Something went wrong"
  password.data.id = password.ref.value.id
  return password.data
}

export const deletePassword = async id => {
  let password = await client.query(
    q.Delete(
      q.Ref(q.Collection('passwords'), id)
    )
  )
  if (password.name === "NotFound") return
  if (password.name === "BadRequest") return "Something went wrong"
  password.data.id = password.ref.value.id
return password.data
}

The getPasswordsByUserID function uses the user_passwords index we created earlier to filter the collection and return the result. It searches through the collection and returns an array of all passwords whose data.user.id is the same as the given id.

Dashboard Page

Update your src/screens/App.js with the following:

import { useState, useEffect } from 'react'
import { 
  getPasswordsByUserID, 
  createPassword, 
  deletePassword, 
  updatePassword 
} from "../models";
import 'bootstrap/dist/css/bootstrap.min.css';
import Passwords from '../components/Passwords';
import NavbarComponent from '../components/Navbar';
import { useHistory } from 'react-router';
import { Flash } from '../components/Flash/flash';

const AppDashboard = () => {
  const history = useHistory()
  if (!localStorage.getItem('userId')) {
    setTimeout(() => {
      window.flash('You need to be logged in', 'warning')
    }, 100)
    history.push('/login')
  }

  const [passwords, setPasswords] = useState([])
  const [isPending, setIsPending] = useState(false)

  const handleCreate = async password => {
  // save to dB
    password.userId = localStorage.getItem('userId')
    const newPassword = await createPassword(
      password.accountName, 
      password.accountUrl,
      password.email,
      password.encryptedPassword,
      password.userId
    )
    setPasswords([newPassword, ...passwords])
    window.flash('New contact created successfully', 'success')
  }

  useEffect(() => {
    setIsPending(true)
    const getContacts = async () => {
      let passwordData = await getPasswordsByUserID(localStorage.getItem('userId'))
      setPasswords(passwordData)
    }
    getContacts()
    setIsPending(false)
  }, [])

 return (
 <>
  <NavbarComponent passwords={ passwords} handleCreate={ handleCreate }/>
  <Flash />
  <Passwords isPending={isPending} passwords={passwords}
      handleEdit={async payload => {
        await updatePassword({
          accountName: payload.accountName,
          accountUrl: payload.accountUrl,
          email: payload.email,
          encryptedPassword: payload.password
        }, payload.id)
        setPasswords(passwords.map( password => password.id === payload.id? payload : password))
      }}
      handleDelete={async id => {
        await deletePassword(id)
        setPasswords(passwords.filter( ele => ele.id !== id)) 
      }} 
  /> 
 </>
 );
}

export default AppDashboard;

As you might have known, this page is protected from unauthenticated users. So we check if the user object is present in the localStorage first, and if the user is not logged in, we redirect back to the sign-in page.

The dashboard renders the passwords component, which displays passwords to the DOM. This component has two states: passwords and isPending. While fetching the data from the database the isPending component is set to true. When the password data is successfully fetched from the database the isPending state is set back to false and the passwords state is set to the retrieved data. While fetching the passwords data from the database, a spinner is displayed on the DOM. We achieve this by checking if the isPending state is set to true and if it is true a spinner is displayed in the dashboard.

The passwords component takes the following props:

isPending: This displays a spinner when fetching the passwords from the database
passwords: This is the data received from fetching the passwords created by the authenticated user.
handleEdit: This function is called on when the edit button of a password is clicked.
handleDelete: This function is called when the delete button of a password is clicked

Passwords Component

Replace the content of the src/components/Passwords.js file with the following:

import Button from 'react-bootstrap/Button'
import Container from 'react-bootstrap/Container'
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import CryptoJS from "crypto-js";
import dotenv from 'dotenv'
import { useState } from 'react'
import PreviewPasswordModal from './previewPassword.modal'
import web from '../assets/web.png';
import { Col } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons'

dotenv.config()

const Password = ({
 id,
 accountName,
 accountUrl,
 email,
 password,
 handleDelete,
 handleEdit
}) => {
 const [editModal, setEditModal] = useState(false)
 const [previewModal, setpreviewModal] = useState(false)
 const title_ = accountName || accountUrl

 const previewPassword = () => {
 setpreviewModal(true)
 }

 const editPassword = (payload) => {
 handleEdit(payload)
 setEditModal(false)
 window.flash('Password edited successfully', 'success')
 }

 const deletePassword = () => {
 handleDelete(id)
 window.flash('Password deleted successfully', 'success')
 }

 return (
    <Col sm="12">
      <Button style={{backgroundColor: "white", color: 'black', margin: '5px 0px', width: "100%"}} onClick={previewPassword}>
        <Row>
          <Col sm={1}><img src={web} alt="" /></Col>
          <Col className="text-left mt-1">{accountName}</Col>
        </Row>
      </Button>
      <PreviewPasswordModal
        id={id}
        show={previewModal}
        edit={editModal}
        onHideEdit={()=>{setEditModal(false)}}
        onEdit={()=>{setEditModal(true)}}
        onDelete={() => {deletePassword(); setpreviewModal(false)}}
        accountName={accountName}
        accountUrl={accountUrl}
        email={email}
        password={password}
        editPassword={editPassword}
        title={"Preview Password for "+title_}
        onHide={() => {setpreviewModal(false)}}
      />
    </Col>
  )
}

const Passwords = ({passwords, handleEdit, handleDelete, isPending}) => {
  return (
    <Container className="p-3 my-5 bordered"> 
      {isPending ? 
        <p className="my-5 py-5 h2 display-4 w-100" style={{textAlign : "center"}}>
          <FontAwesomeIcon icon={faSpinner} spin />
        </p>
      :
      <>
        <Row className="p-2 text-white" style={{backgroundColor : "dodgerblue"}}>
          <Col xs={12} sm={6} className="pt-2">{passwords ? passwords.length: 0} Sites and Apps</Col>
          <Col xs={12} sm={6}>
          <Form inline onSubmit={(e) => {e.preventDefault()}}>
            <input type="text" placeholder="Search Passwords" className="form-control ml-md-auto" onChange={(e)=> {e.preventDefault()}} />
          </Form>
          </Col>
        </Row> 
        <br/><br/>
        <Row>
            {passwords.length > 0? 
              passwords.map(ele => {
                const bytes = CryptoJS.AES.decrypt(ele.encryptedPassword, process.env.REACT_APP_SECRET_KEY);
                const password = bytes.toString(CryptoJS.enc.Utf8)
                const passwordData = {...ele, password}
                return <Password {...passwordData} key={ele.id} handleEdit={handleEdit} handleDelete={handleDelete} />
              }) :
              <p className="my-5 py-5 h2 display-5 w-100" style={{textAlign : "center"}}>You have not created any passwords</p>
            }
        </Row>
      </>
      }
    </Container>
  )
}

export default Passwords

This file contains two components: Password and Passwords components. Our dashboard will display a list of passwords in the same style, so it is important to have a component that displays a single password that we can use in the Passwords components. Let’s look at the Password component first.

The following is going on in the Password component:

The component takes in these props:
id: The id of the password generated from the database (Fauna)
accountName: Name of the application that we’re saving the password to
accountUrl: URL of the application that we’re saving the password to
email: Can either be the email or username, depending on what you’re using to log in to
password: Password used to login into the application.
handleDelete: Function that is called when we click on the delete button
handleEdit: Functions that is called when we edit a password
This component has two states:
editModal: Sate used in the editPassword component. It is used to set the show property of the modal
previewModal: State used in the PreviewPassword component to set the show property of the modal
Three functions are created in this component:
previewPassword: Used to set the state of PreviewModal state to true
This function is called when we click on a password in our dashboard
editPassword: This function calls then handleEdit props which comes from src/screens/App.js. The handleEdit props communicate with the editPassword function in our models.js file. This editPassword function calls this handleEdit function, then sets the value of the setEditModal state back to false, and finally flashes a success message.
deletePassword: Calls the handleDelete props and flashes a success message
The return statement of this component is a Col from react-bootstrap; this Col contains a button with an onClick of previewPassword, which makes the preview password modal show. The second content returned from this component is the PreviewPasswordModal modal itself. You can check out how to use modals with react-bootstrap using this link. This component also has some extra props like accountName, accountUrl, which I displayed in the modal.

Let’s now look at what is going on in the Passwords component: This component is stateless; it takes in the following props:

passwords: An array of passwords created by the user
handleEdit and handleDelete: Functions passed to the Password component.
isPending: Used to know if the app is still fetching data from the database

Encryption

Encryption is the act of turning a text into a code so that unauthorized users won’t have access to it. The science of encrypting and decrypting information is called cryptography. You can check out this article to get a better understanding of encryption. There are two types of encryption: symmetric and asymmetric encryption.

Symmetric encryption: In symmetric encryption, the same key is used for encryption and decryption. It is therefore critical that a secure method is considered to transfer the key between sender and recipient.

Asymmetric encryption: Asymmetric encryption uses the notion of a key pair: a different key is used for the encryption and decryption process. One of the keys is typically known as the private key, and the other is known as the public key.

You can check this article for a better understanding of these types of encryption.

Why Do We Need To Encrypt?

If we store raw passwords in our database and an authorized user gains access to the database, all our user data will be compromised, so we need a way to securely store their data so the admin can not get the raw text. You may be thinking, why not? Because even though we want to store encrypted data, we still want to view the raw password in the application, the need to encrypt and decrypt these passwords arises. If we hash the passwords, we can not decrypt them as it is one-way encryption, unlike encryption which is two-way encryption.

In this application, for simplicity, we’ll be using symmetric encryption. There are many encryption algorithms, but I used Advances Encryption Standard(AES). We will be using the crypto-js package. As you’ve noticed in the Passwords component, we will decrypt the passwords since we have encrypted passwords in the database.

This is a sample data in our database.

If you go the dashboard route, you should see the following:

Create Password Component

The createPasswordModal only returns the text create password, which is seen in the dropdown in the navbar. Let’s work on that component. In your src/components/createPassword.modal.js file, type the following:

import Modal from 'react-bootstrap/Modal'
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import CryptoJS from "crypto-js";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { useState } from 'react'
import dotenv from 'dotenv'

dotenv.config()

const CreatePasswordModal = props => {
 const [accountName, setAccountName] = useState('')
 const [accountUrl, setAccountUrl] = useState('') 
 const [email, setEmail] = useState('')
 const [password, setPassword] = useState('') 

 const handleCreate = async () => {
  const encryptedPassword = CryptoJS.AES.encrypt(password, process.env.REACT_APP_SECRET_KEY).toString()
  const payload = {
    accountName, 
    accountUrl,
    email,
    encryptedPassword
  }
  props.handleCreate(payload)
  setAccountName('')
  setAccountUrl('')
  setEmail('')
  setPassword('')
  window.flash('Password created successfully', 'success')
 }

  const onHide = () => {
    props.onHide(accountUrl, password, email, accountName)
  }

 return (
  <Modal
    {...props} size="xlg"  aria-labelledby="contained-modal-title-vcenter" centered onHide={onHide}
  >
    <Modal.Header style={{backgroundColor : "#d1e1f0"}} closeButton>
      <Modal.Title id="contained-modal-title-vcenter">Create New Password</Modal.Title>
    </Modal.Header>
    <Modal.Body className="show-grid">
      <Container>
        <Form>
          <Row>
            <Form.Group as={Col}>
              <Form.Control placeholder="Account Name" value={accountName} onChange={(e) => setAccountName(e.target.value)}/>
            </Form.Group>
            <Form.Group as={Col}>
              <Form.Control placeholder="Account URL" defaultValue={`https://${accountUrl}`} onChange={(e) => setAccountUrl(e.target.value)}/>
            </Form.Group>
          </Row>
          <Row>
            <Form.Group as={Col}>
              <Form.Control type="email" value={email} placeholder="Email" onChange={(e) => setEmail(e.target.value)}/>
            </Form.Group>
          </Row>
          <Row>
            <Form.Group as={Col}>
              <Form.Control type="password" value={password} placeholder="Password" onChange={(e) => setPassword(e.target.value)}/>
            </Form.Group>
          </Row>
        </Form>
      </Container>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="success" onClick={handleCreate} disabled={(!accountUrl || !accountName || !email) ? true : false}>
        <FontAwesomeIcon icon={faPlus} size="1x" className="" />
      </Button>
    </Modal.Footer>
  </Modal>
 );
}

export default CreatePasswordModal

This component has four states which are the values in the input fields. It also has two functions: handleCreate, which is called on when the plus icon is clicked, and onHide is called when you close the modal.

The app should look like this when you click on the create new password button.

Create some passwords, and they will be displayed in your dashboard.

If you click on the buttons, you will see the text preview password. The reason you see preview password text is because it is rendered in the previewPasswordModal component.

Preview Password Component

In your src/components/previewPassword.modal.js file, type the following:

import { useState } from "react";
import Modal from 'react-bootstrap/Modal'
import FormControl from 'react-bootstrap/FormControl'
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import EditPasswordModal from "./editPassword.modal";
import web from '../assets/web.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLink, faEye, faEyeSlash, faCopy, faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons'

const PreviewPasswordModal = props => {
  const [passwordType, setPasswordType] = useState('password')

  return <Modal
    {...props} size="xlg"aria-labelledby="contained-modal-title-vcenter" centered>
    <Modal.Header style={{backgroundColor : "#d1e1f0"}} closeButton>
      <Modal.Title id="contained-modal-title-vcenter">
        <img src={web} alt=""/> {props.accountName}
      </Modal.Title>
    </Modal.Header>
    <Modal.Body className="show-grid">
      <Container>
        <Row>
          <Col>
            <p><FontAwesomeIcon icon={faLink} size="sm" /> <a href={props.accountUrl} rel="noreferrer" target="_blank"><small>{props.accountName}</small></a></p>
            <div><FormControl type="text" value={props.email} className="my-1" readOnly/></div>
            <Row className="my-1">
              <Col xs={8} md={9}>
                <FormControl type={passwordType} value={props.password} readOnly/>
              </Col>
              <Col xs={2} md={1} className="text-left">
                <span style={{cursor : 'pointer'}} onClick={() => {setPasswordType(passwordType === "password"? "text" : "password")}}>
                  {passwordType === "password"? 
                    <FontAwesomeIcon icon={faEye} size="1x" className="align-bottom" /> 
                    : 
                    <FontAwesomeIcon icon={faEyeSlash} size="1x" className="align-bottom" /> }
                </span>
              </Col>
              <Col xs={2} md={1} className="text-right">
                <span style={{cursor : 'pointer'}}
                  onClick={() => {
                    let passwordText = document.createElement('textarea')
                    passwordText.innerText = props.password
                    document.body.appendChild(passwordText)
                    passwordText.select()
                    document.execCommand('copy')
                    passwordText.remove()
                  }}>
                    <FontAwesomeIcon icon={faCopy} size="1x" className="align-bottom" />
                </span>
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={props.onEdit}>
        <FontAwesomeIcon icon={faEdit} size="md" className="" /> 
      </Button>
      <Button variant="danger" onClick={props.onDelete}>
        <FontAwesomeIcon icon={faTrashAlt} size="1x" className="" /> 
      </Button>
    </Modal.Footer>
    <EditPasswordModal
      closePreview={() => {props.onHide()}}
      id={props.id}
      show={props.edit}
      editPassword={props.editPassword}
      onEdit={props.onEdit}
      accountName={props.accountName}
      accountUrl={props.accountUrl}
      email={props.email}
      password={props.password}
      title={"Edit Password for "+props.accountName}
      onHide={props.onHideEdit}
    />
    </Modal>
}

export default PreviewPasswordModal

This component renders the modal and the EditPasswordModal component. We pass some props to the component. If you click on any password in the dashboard, you should see the following:

See the Edit Password text at the bottom of the modal; this is rendered in the EditPasswordModal component. This component has functions for copying and previewing the password.

Edit Password Modal

In your editPasswordModal.js file, type the following:

import Modal from 'react-bootstrap/Modal'
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash, faEdit} from '@fortawesome/free-solid-svg-icons'
import { useState } from 'react'
import CryptoJS from "crypto-js";
import dotenv from 'dotenv'

dotenv.config()

const EditPasswordModal = props => {
  const [accountName, setAccountName] = useState(props.accountName)
  const [accountUrl, setAccountUrl] = useState(props.accountUrl) 
  const [email, setEmail] = useState(props.email)
  const [password, setPassword] = useState(props.password) 
  const [passwordType, setPasswordType] = useState('password')

  const onEdit = () => {
    const encryptedPassword = CryptoJS.AES.encrypt(password, process.env.REACT_APP_SECRET_KEY).toString()
    const payload = {
      accountName,
      accountUrl,
      email,
      encryptedPassword,
      id: props.id
    }
    props.editPassword(payload)
    props.closePreview()
  }

return (
    <Modal {...props} size="xlg" aria-labelledby="contained-modal-title-vcenter" centered>
      <Modal.Header style={{backgroundColor : "#d1e1f0"}} closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          {props.title}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body className="show-grid">
        <Container>
          <Form>
            <Row>
              <Form.Group as={Col}>
                <Form.Control placeholder="Account Name" value={accountName} onChange={(e) => setAccountName(e.target.value)}/>
              </Form.Group>
              <Form.Group as={Col}>
                <Form.Control placeholder="Account URL" value={accountUrl} onChange={(e) => setAccountUrl(e.target.value)}/>
              </Form.Group>
            </Row>
            <Row>
              <Form.Group as={Col}>
                <Form.Control type="email" value={email} placeholder="Email" onChange={(e) => setEmail(e.target.value)}/>
              </Form.Group>
            </Row>
            <Row className="my-1">
              <Col>
                <Form.Control type={passwordType} value={password} onChange={(e) => setPassword(e.target.value)}/>
              </Col>
              <Col xs={2} className="text-center">
                <span style={{cursor : 'pointer'}} 
                  onClick={() => {setPasswordType(passwordType === "password"? "text" : "password")}}>
                    {passwordType === "password"? 
                      <FontAwesomeIcon icon={faEye} size="1x" className="align-bottom" /> 
                    : 
                      <FontAwesomeIcon icon={faEyeSlash} size="1x" className="align-bottom" /> }
                </span>
              </Col>
            </Row>
          </Form>
        </Container>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="success" onClick={onEdit} disabled={(!accountUrl || !accountName || !email) ? true : false}> 
        <FontAwesomeIcon icon={faEdit} size="1x" className="" /> Edit
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

export default EditPasswordModal

Click on the edit icon now, and we should have the following:

You can also toggle the type of input field of the password from password to text to preview it, and try to edit the passwords.

Conclusion

This article has walked you through how to build a password manager app with React JS, Fauna, React Bootstrap, and Crypto JS. You can access the code snippet for this app here, and the deployed version of the app is available, here. If you have any issues, you can contact me via Twitter. Additionally, you can create a 404 page for the application, as it currently doesn’t have any.

Building A Blog App With React JS and Fauna

Babatunde Koiki — Fri, 16 Apr 2021 09:03:23 +0000

Authored in connection with the Write with Fauna program.

Introduction

There are several ways to build a web app in 2021; a good practice is to use Single Page Applications(SPA). If you’re considering building a SPA, React is one framework that’s good to use. There are a couple of reasons why you should choose React Js for your single-page application. Some of which are speed, simplicity, reusability.

When building a serverless full-stack app, you might be considering a serverless database to use. Fauna is a database that helps save time by using existing infrastructure to build web applications without setting up a custom API server.

This article will be walking you through how I built a Blog App with React, Fauna, Cloudinary, Bootstrap, and CKEditor.

Prerequisites

To take full advantage of this article, you need to have the following installed on your laptop.

Node JS
Have access to one package manager such as npm or yarn
Create-react-app, a CLI tool installed as a global package or use npx
Access to FaunaDB dashboard
Basic knowledge of React Hooks

Getting Started With FaunaDB

First, create an account with Fauna

Creating A Fauna Database

To create a fauna database, first head to the fauna dashboard.

Next, click on the New Database button and enter the database name, then click enter.

Creating Fauna Collections

A collection is simply a grouping of documents(rows) with the same or a similar purpose. A collection acts similarly to a table in a traditional SQL database.

In the app we’re creating, we’ll have two collections, users and blogs. The user collection is where we’ll be storing our user data, while the blog collection is where we’ll be keeping all the blog data. To create these collections, click on the database you created, click New Collection Enter only the collection name (users), then click save and do the same for the second collection (blogs).

Creating Fauna Indexes

Indexes are used to quickly find data without searching every document in a database collection every time a database collection is accessed. Indexes can be created using one or more fields of a database collection. To create a fauna index, click on the indexes section in the left part of your dashboard.

In our app, we need the following indexes:

all_blogs: This index is what we’ll use to retrieve all the created blogs. This index doesn’t have any terms and values.
blogs_by_author: This index is what we’ll use to retrieve all blogs created by a particular user. The terms field will be data.author.username.
user_by_email: This index is what we’ll use to get a user’s data with a given email. This index needs to be unique so the collection doesn’t have duplicate emails.
user_by_username: This index is what we’ll use to get a user’s data with a given username. This index needs to be unique, so the collection doesn’t have a duplicate username. We won’t be using this index in our application, but it helps us validate that no same username is created in the collection.

Generating Your Fauna Secret Key

Fauna secret key is used to connect to fauna in an application or script, and it is unique per database. To generate your key, go to your dashboard’s security section and click on New Key. Enter your key name. A new key will be generated for you. Keep the key somewhere safe as you can’t have access to that key in the dashboard again.

Setting Up The Application

On the command line, type the following command wherever you want to store your project.

Create-react-app react-blog 
npm i @ckeditor/ckeditor5-react
npm i @fortawesome/react fontawesome axios bcryptjs 
npm i bootstrap dotenv faunadb react-router-dom

The command above will create a folder named react-blog and some boilerplate files. Delete all the files in your src folder except index.js and App.js.

Create the following files in your src folder

App.js: This is the file that combines all the components and arranges them in the order we want. It displays the components in the src folder the way we want them to be displayed.
index.js: This file uses React to render the components in the App.js.
models.js: This is the file we use to communicate to the fauna database.
components/BlogPreview.js: This file is where we create our blog preview component that will be displayed for a single blog on the home page.
components/Navbar.js: This is where we make the navbar component for our application.
components/Signout.js: This is where we make the signout component for our application.
screens/Blog.js: This is the page where we’ll be rendering a single blog view.
screens/CreateBlog.js: This is the page where we’ll be creating a new blog.
screens/HomePage.js: This is the page that shows all the blogs. This component is the home page of our app. It uses the blog preview component
screens/NotFound.js: This page is the 404 page of our app.
screens/Signin.js: This is the sign-in page of our app.
screens/Signup.js: This is the signup page of our app.

Let’s start by creating our models. Before we can write any code; we need to paste the secret key we got from fauna in an environment file:

Create a .env file in the root directory of your project and type the following:

REACT_APP_FAUNA_KEY='secret key generated from fauna.'

In your index.js file, add the below the imports of the file:

import 'bootstrap/dist/css/bootstrap.min.css';

Database Setup

In your models.js file type the following:

import faunadb, {query as q} from 'faunadb'
import bcrypt from 'bcryptjs'
import dotenv from 'dotenv'

dotenv.config()
const client = new faunadb.Client({secret: process.env.REACT_APP_FAUNA_KEY})

export  const createUser = async (name, email, username, password) => {
  password = bcrypt.hashSync(password, bcrypt.genSaltSync(10)) //hashes the password 
  let data
  try {
    data= await client.query(
      q.Create(
        q.Collection('users'),
        {
          data: {
            name, 
            email, 
            username, 
            password
          }
        }
      )
    )
    if (data.name === 'BadRequest') return // if there's an error in the data creation
  } catch (error) {
    return 
  }
  const user = data.data
  user.id = data.ref.value.id // attaches the ref id as the user id in the client
  return user
}

export const getUser = async (userId) => {
  try {
    const user = await client.query(
      q.Get(
        q.Ref(q.Collection('users'), userId)
      )
    )
    return user.data
  } catch {
    return // return null if there is any error.
  }
}

export const loginUser = async (email, password) => {
 try {
  let userData = await client.query(
    q.Get(
      q.Match(q.Index('user_by_email'), email)
    )
  )
  userData.data.id = userData.ref.value.id
  if (bcrypt.compareSync(password, userData.data.password)) return userData.data
  else return
 } catch (error) {
   return
 }
}

export const createPost = async (title, body, avatar, authorId, tags) => {
  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] 
  let author = await getUser(authorId)
  const date = new Date()
  let data = await client.query(
    q.Create(
      q.Collection('blogs'),
      {
        data: {
          title, 
          body, 
          upvote: 0,
          downvote: 0,
          created__at: `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`, // converts date to "Month day, Year"
          author: {
            name:author.name, 
            email: author.email, 
            id:author.id, 
            username: author.username
          },
          avatar,
          tags
        }
      }
    )
  )
  data.data.id = data.ref.value.id
  return data.data
}

export const getPosts = async () => {
  let allBlogs = await client.query(
    q.Map(
      q.Paginate(q.Documents(q.Collection("blogs"))),
      q.Lambda("X", q.Get(q.Var("X")))
    )
  )
  return allBlogs.data
}

export const getPost = async id => {
  try {
    let blog = await client.query(
      q.Get(q.Ref(q.Collection('blogs'), id))
    )
    blog.data.id = blog.ref.value.id
    return blog.data
  } catch (error) {
    return
  }
}

export const upvotePost = async (upvote, id) => {
  try {
    let blog = await client.query(
      q.Update(
        q.Ref(q.Collection('blogs'), id),
        {data: {upvote}}
      )
    )
    blog.data.id = blog.ref.value.id
    return blog.data
  } catch  {
    return
  }
}

export const downvotePost = async (downvote, id) => {
  try {
    let blog = await client.query(
      q.Update(
        q.Ref(q.Collection('blogs'), id),
        {data: {downvote}}
      )
    )
    blog.data.id = blog.ref.value.id
    return blog.data
  } catch (error) {
    return
  }
}

In the models.js file above, I created a fauna client using the secret key obtained from the environment variable. Then I created multiple helper functions. Let’s go over each of them.

createUser: This is the function used to create a new user, we need just the name, email, username, and password of the user, and we return the created data
getUser: This is the function used to get user data given its fauna id, which is in the Ref object when we run client.query. While returning data, I added this id, which I used as the app’s id on the client-side for simplicity.
loginUser: This is the function used to verify a user object using email and password. If there is data with the given email and the password is correct, I returned the user data and null if otherwise.
createPost: This is the function used to create a new blog post. I used the getUser function to get the user data of the user creating the blog post given its userId.
getPosts: This is the function used to retrieve all blog posts.
getPost: This is the function used to get a single blog post given its unique id.
upvotePost and downvotePost: These functions are used to upvote and downvote a post, respectively.

Navbar component

In your Navbar.js file, type the following:

import React from "react";
import { Link, useHistory, useLocation } from "react-router-dom";

const DynamicSignup = ({isLoggedIn}) => {
  const {pathname} = useLocation() // endpoint of the request
  const history = useHistory() 

  const handleSignout = () => {
    localStorage.clear()
    history.push('/') //redirects back to homepage
  }
  if (isLoggedIn) {
    return (
    <>
      <li className={pathname==="/create"? "active": ""}><Link to="/create"><span className="glyphicon glyphicon-pencil"></span> New Blog</Link></li>
      <li className={pathname==="/signout"? "active": ""} onClick={handleSignout}><Link to="/signout"><span className="glyphicon glyphicon-log-in"></span> Signout</Link></li>
    </>)
  } else {
      return <>
        <li className={pathname==="/signup"? "active": ""}><Link to="/signup"><span className="glyphicon glyphicon-user"></span>Signup</Link></li>
        <li className={pathname==="/signin"? "active": ""}><Link to="/signin"><span className="glyphicon glyphicon-log-in"></span> Signin</Link></li>
      </>
  }
}

function Navbar() {
  const {pathname} = useLocation()
  return (
    <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <div className="navbar-header">
          <Link className="navbar-brand" to="#">Fauna Blog</Link>
        </div>
        <ul style={{display:'inline'}} className="nav navbar-nav">
          <li className={pathname==="/"? "active": ""}><Link to="/">Home</Link></li>
          <li className={pathname==="/blogs"? "active": ""}><Link to="/blogs">Blogs</Link></li>
        </ul>
        <ul style={{display:'inline'}} className="nav navbar-nav navbar-right">
          <DynamicSignup isLoggedIn={localStorage.getItem('userId')? true: false} />
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

SignOut component

In your signout component, type the following:

import { useHistory } from "react-router";

export default function Signout() {
  const history = useHistory()
  const handleClick = () => {
    localStorage.clear()
    history.push('/')
  }
  return (
    <div className="signin__input mt-6">
      <button onClick={handleClick}>Sign Out</button>
    </div>
  )
}

I checked if the user details are stored in localstorage to know if the user is logged in in the Navbar component. If the user is logged in, there shouldn’t be a sign-in and sign-up button; instead, there should be a sign-out and new blog component.

Next, we’ll be building our sign-in and sign-up screens.

SignIn page

In your screens/Signin.js file, type the following:

import {useRef} from 'react'
import { useHistory } from 'react-router-dom';
import {loginUser} from '../models'

export default function SignIn() {
  let history = useHistory()
  if (localStorage.getItem('userId')) {
  history.push('/') 
  }
  const email = useRef('')
  const password = useRef('')

  const LoginUser = async (e) => {
    e.preventDefault()
    const body = {
      email: email.current.value,
      password: password.current.value
    }
    // Handle login logic
    if (!body.email || !body.password) {
      alert('You need to input an email and password')
    } else {
      const user = await loginUser(body.email, body.password)
      console.log(user)
      if (user) {
        localStorage.setItem('userId', user.id)
        localStorage.setItem('username', user.username)
        localStorage.setItem('email', user.email)
        history.push('/')
      } else {
        alert('Invalid email or password')
      }
    }
  }
  return (
    <form className="form-horizontal">
    <div className="form-group">
      <label className="control-label col-sm-4">Email address: </label>
      <input ref={email} type="email" className="form-control mx-md-3 col-sm-4" placeholder="Enter email" />
    </div>
    <div className="form-group">
      <label className="control-label col-sm-4">Password: </label>
      <input ref={password} type="password" className="form-control mx-md-3 col-sm-4" placeholder="Password" />
    </div>
    <div className="form-group">
        <div className="col-sm-5"></div>
        <button onClick={LoginUser}  type="submit" className="btn btn-primary col-sm-2">Signin</button>
      </div>
  </form>
  )
}

SignUp page

In our screens/signup.js file type the following:

import {useRef} from 'react'
import { createUser } from '../models';
import {useHistory} from 'react-router-dom'

export default function SignIn() {
  const history = useHistory()
  if (localStorage.getItem('user')) {
    history.push('/')
  }
  const name= useRef()
  const email = useRef()
  const password = useRef()
  const username = useRef()
  const confirm_password = useRef()
  const LoginUser = async (e) => {
    e.preventDefault()
    const body = {
      email: email.current.value,
      name: name.current.value,
      username: username.current.value,
      password: password.current.value
    }
    if (body.name && body.password && body.email && body.username && body.password === confirm_password.current.value) {
      const user = await createUser(body.name, body.email, body.username, body.password)
      if (!user) {
        alert('Email or username has been chosen')
      } else {
        localStorage.setItem('userId', user.id)
        localStorage.setItem('username', user.username)
        localStorage.setItem('email', user.email)
        history.push('/')
        alert('Account created sucessfully, signing you in...')
      }
    } else if (!name || !email || !username || !password) {
      alert('You didn\'t pass any value')
    } else {
      alert('Password and confirm password fields must be equal')
    }

    console.log(body)
  }

  return (
    <form className="form-horizontal">
      <div className="form-group">
        <label className="control-label col-sm-4">Name: </label>
        <input ref={name} type="text" className="form-control mx-md-3 col-sm-4" placeholder="Enter Name" />
      </div>
      <div className="form-group">
        <label className="control-label col-sm-4">Email address</label>
        <input ref={email} type="email" className="form-control mx-md-3 col-sm-4" placeholder="Enter email" />
      </div>
      <div className="form-group">
        <label className="control-label col-sm-4">Username: </label>
        <input ref={username} type="text" className="form-control mx-md-3 col-sm-4" placeholder="Enter username" />
      </div>
      <div className="form-group">
        <label className="control-label col-sm-4">Password</label>
        <input ref={password} type="password" className="form-control mx-md-3 col-sm-4"  placeholder="Password" />
      </div>
      <div className="form-group">
        <label className="control-label col-sm-4">Confirm Password</label>
        <input ref={confirm_password} type="password" className="form-control mx-md-3 col-sm-4" placeholder="Password" />
      </div>
      <div className="form-group">
        <div className="col-sm-5"></div>
        <button onClick={LoginUser}  type="submit" className="btn btn-primary col-sm-2">Signup</button>
      </div>
  </form>
  )
}

I ensured that the user inputs a username and password before clicking the sign-in component’s submit button. Also, in the signup button, I validated that the user inputs data in all input fields. I validated that the username and email haven’t been used in the data before. I was able to achieve this quickly because of the user_by_email and user_by_username indexes. After signing up and logging in, I stored some data to the localstorage, which was used to check if the user is authenticated. I used the useHistory() hook from react-router-dom to redirect the user back to the home page.

Blog Preview Component

Next Let’s create our BlogPreview component, in your components/BlogPreview.js file type the following:

import {Link} from 'react-router-dom'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { faThumbsDown, faThumbsUp } from '@fortawesome/free-solid-svg-icons'


export default function BlogPreview({id, title, author, avatar, upvote, downvote}) {

  return (
    <div className="col-md-4 col-sm-6 card" style={{maxWidth: '380px', margin:'18px', marginLeft: '50px'}}>
      <img className="card-img-top" height="50%" src={avatar} alt=""/>
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">Post created by {author.username}</p>
        <div style={{margin: '5px'}}>
        <button onClick={() => {alert('View this blog to upvote it')}}>
            <FontAwesomeIcon icon={faThumbsUp} />
        </button> {upvote}
        <span style={{margin: "10px"}}></span>
        <button onClick={() => {alert('View this blog to downvote it')}}>
           <FontAwesomeIcon icon={faThumbsDown} />
        </button>{downvote}
      </div>
        <Link to={`/blogs/${id}`} className="btn btn-primary">Read blog</Link>
      </div>
    </div>
  )
}

This component uses font awesome icons among a couple of things to display the blog. I used the Link component of react-router-dom to link each blog to their respective blog page, which we’ll create soon.

Home page component

In your screen/HomePage.js file type the following:

import { useEffect, useState } from 'react';
import BlogPreview from '../components/BlogPreview'
import {getPosts} from '../models'

export default function HomePage() {
  const [blogs, setBlogs] = useState([])
  useEffect(() => {
    async function fetchBlogs() {
      // You can await here
      let data = await getPosts()
      setBlogs(data)
    }
    fetchBlogs();
  }, [])
  return (
    <div className="">
        <hr/>
      <div className="row">
        {blogs.length > 0 ? blogs.map((blog, idx) => 
            <BlogPreview 
            key={idx}
            id={blog.ref.value.id}
            title={blog.data.title}
            author={blog.data.author}
            avatar={blog.data.avatar}
            upvote={blog.data.upvote}
            downvote={blog.data.downvote}/>
        ): 'No blog has been created yet. Be the first to create'}
      </div>
    </div>
  );
}

In this screen, I used the useState hook of react js to store states. I also used the useEffect hook of react, which will help us render and rerender our DOM component. I also updated the state inside this hook. The [], which is the second parameter passed to useEffectmakes the hook work like componentDidMount, means that the code inside it will run only during the first render. I used the BlogPreview component inside this file, which is what we need to display.

Before updating our App.js file and running what we have, let’s create a 404 page and our single blog page.

404 page

In your screens/NotFound.js type the following:

import React from 'react'

export default function NotFound() {
  return (
    <div>
      <img  width="100%" height="550px" src="https://i2.wp.com/learn.onemonth.com/wp-content/uploads/2017/08/1-10.png?fit=845%2C503&ssl=1" alt=""/>
    </div>
  )
}

This page will be displayed if we go to a page that isn’t defined in our app.

Single Blog Page

In your screens/Blog.js file, type the following:

import { useParams} from 'react-router-dom'
import {useEffect, useState} from 'react'
import {getPost, upvotePost, downvotePost} from '../models'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { faThumbsDown, faThumbsUp } from '@fortawesome/free-solid-svg-icons'

const Blog = () => {
  const {id} = useParams()
  const [blogData, setBlogData] = useState({})

  const handleUpvote = async e => {
    let blog = await upvotePost(blogData.upvote+1, id)
    setBlogData(blog)
  }

  const handleDownvote = async e => {
    let blog = await downvotePost(blogData.downvote+1, id)
    setBlogData(blog)
  }
  useEffect(() => {
    async function fetchBlog() {
      let data = await getPost(id)
      setBlogData(data)
    }
    fetchBlog();
  }, [id, blogData])
  return (
    <div>
      <img src={blogData.avatar} width="100%" height="400px" alt=""/>
      <h1>{blogData.title}</h1>
      <span className="text-muted">{blogData.author && `Post by ${blogData.author.username}`} on {blogData.created__at}</span>
      <hr/>
      <div dangerouslySetInnerHTML={{__html: blogData.body}}></div>
      <hr/>
      <div>
        <button 
          onClick={handleUpvote}>
            <FontAwesomeIcon icon={faThumbsUp} />
        </button> {blogData.upvote}
        <span style={{margin: "10px"}}></span>
        <button 
          onClick={handleDownvote}>
            <FontAwesomeIcon icon={faThumbsDown} />
        </button>{blogData.downvote}
      </div>
    </div>
  )
}

export default Blog

This component uses the getPost function in the models.js file. I used the useParams hook of react-router-dom to get the id in the URL, and I passed the id in the getPost function to get the blog with the given id. The blog post is expected to have the following fields:

title: Title of the blog
body: The blog’s content contains HTML tags since we’ll use CKeditor to create a blog.
avatar: Image URL of the blog. We’ll be storing the image itself in Cloudinary.
upvote: Number of upvotes a blog has.
downvote: Number of downvotes a blog has.
author: This is a JSON object which contains the details of the author. It contains name, email, and username.

App component

In your App.js file, type the following:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomePage from './screens/HomePage'
import SignIn from './screens/SignIn'
import SignUp from './screens/SignUp'
import NotFound from './screens/NotFound'
import Blog from './screens/Blog'
import Navbar from "./components/Navbar"

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/blogs/" component={HomePage} />
        <Route path="/blogs/:id/" component={Blog} />
        <Route exact path="/signin/" component={SignIn} />
        <Route exact path="/signup/" component={SignUp} />
        <Route exact path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

This component is where our application is created. I used React Router. I used Switch, BrowserRouter, and Route to add URL endpoints for components. The Route component is used to create an endpoint for a component. The exact parameter means that the component will match the endpoint with the same URL. The Route component has to be in the Switch component, which means that only one of the components should be displayed at a time. The switch component is inside the BrowserRouter component. I added the Navbar. The component above the Route component, this way, I don’t have to add the Navbar component in all the files in the screens folder.

Testing Our App

Let’s test what we have so far. The create-react-app CLI tool we used to bootstrap our app created some scripts in our package.json file. We need the start command, which runs our app in development mode.

In the terminal, type the following:

npm start

The above command starts the server and opens the app in the browser, and you should see the following:

Click the buttons in the navbar, and you should notice that the URL is changing; this is because of the components we defined in our Routes components in our App.js file.

Test the signup and sign-in pages’ functionality by creating an account, then log out and log in again. If you click the new blogs button while signed, you should see a 404 page; this is because we haven’t defined our create blog component and added a route for it.

Creating a new blog

To create a new blog, I used the react library for CKeditor, which I used for the blog creation. You can always use Markdown or any other text editor. You can check out react-markdown if you’ll be using markdown to reproduce your own. Also, I used Cloudinary to upload images. In this case, the only picture uploaded in the blog is the blog’s avatar.

In your screens/CreateBlog.js file type the following:

import {useState, useRef} from 'react'
import {createPost} from '../models'
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import {useHistory} from 'react-router-dom'
import axios from 'axios';
import {config} from 'dotenv'

config()

export default function CreateBlog() {
  const history = useHistory()
  if (!localStorage.getItem('userId')) {
    alert('You need to be logged in to create a blog!')
    history.push('/')
  }
  const [content, setContent] = useState('<h2>Body of your article goes here...</h2>')
  const tags = useRef('')
  const title = useRef('')
  const avatar = useRef('')


  const handleCreate = async (e) => {
    e.preventDefault()
    if (!title.current.value || !tags.current.value || !avatar.current.value) {
      alert('You need to add title, body and upload the avatar')
    } else {
      const url = await uploadFile(avatar.current.files[0])
      await createPost(title.current.value, content, url, localStorage.getItem('userId'), tags.current.value.split(','))
      alert('Blog post created successfully, signing you in...')
      history.push('/')
    }
  }

  return (
    <form className="form-horizontal">
      <div className="form-group files">
        <label className="control-label col-sm-4" htmlFor="upload">Upload avatar</label>
        <input type="file" className="form-control mx-md-3 col-sm-4" id="" ref={avatar}/>
      </div>
      <div className="form-group">
        <label className="control-label col-sm-4" htmlFor="title">Title</label>
        <input className="form-control mx-md-3 col-sm-4" ref={title} type="text" name="title" id=""/>
      </div>
      <div>
        <label className="control-label col-sm-4" htmlFor="tags">Tags</label>
        <input className="form-control mx-md-3 col-sm-4" ref={tags} type="text"  />
        <div className="col-sm-4"></div>
      </div>
      <br/><br/><br/>
      <div className="form-group">
        <CKEditor
          editor={ ClassicEditor }
          data={content}
          row={100}
          onReady={ editor => { } }
          onChange={ ( event, editor ) => {
              const data = editor.getData();
              setContent(data)
          } }
        />
    </div>
    <div className="form-group">
        <div className="col-sm-5"></div>
        <button onClick={handleCreate}  type="submit" className="btn btn-primary col-sm-2">Submit</button>
      </div>
    </form>
  )
}


const uploadFile = async (file) => {
  const url = `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload`;
  const timeStamp = Date.now()/1000;
  let formData = new FormData()
  formData.append("api_key",process.env.REACT_APP_CLOUDINARY_API_KEY);
  formData.append("file", file);
  formData.append("public_id", "sample_image");
  formData.append("timestamp", timeStamp);
  formData.append("upload_preset", process.env.REACT_APP_PRESET);
  let respData = await axios.post(url, formData)
  return respData.data.secure_url
}

As you might have noticed, I used three extra environmental variables in this component which I got from my Cloudinary dashboard. You can get your cloud name and API from your Cloudinary dashboard. The preset created for us by default can’t be used in an application, so we need to create a new one that has to be whitelisted anywhere. To do so, click on the Settings Icon in your dashboard, then Upload. Scroll down to the upload presets section and create a new one, ensure you change the signing mode to unsigned.

Add the following to your .env file:

REACT_APP_PRESET='your preset'
REACT_APP_CLOUD_NAME='your cloud name.'
REACT_APP_CLOUDINARY_API_KEY='your API key.'

Additionally, I used the CKeditor components to create a text box for writing the blogs’ content.

In your App.js file, add the following just after the last import statement

import CreateBlog from "./screens/CreateBlog";

Also, add the following just before where we declared the route for 404 pages,

<Route exact path="/create/" component={CreateBlog} />

Create a couple of blogs, and now if you go to the home or blog page, you should be able to see something similar to the following.

Next, click on a single blog. You should be able to see something similar to the image below.

The upvote and downvote buttons are also working perfectly. You can click on the upvote and downvote buttons, and you’d notice that the DOM gets updated, and it also updates the data in the fauna database.

Conclusion

This article has walked you through how to build a fully functional blog app with React JS, FaunaDB, CKEditor, and Cloudinary. You can access the code snippet for this app here and the deployed version of the app is here. Should you have any issues, you can contact me via Twitter. Additionally, you can create a profile page so users can easily update their profile, view the blogs they created and as you have seen, the UI of the app isn't good enough, that is because the goal of the tutorial isn't to teach CSS, you can always change the UI of the app.

Building A User Login System With Flask and Fauna

Babatunde Koiki — Tue, 16 Mar 2021 23:24:43 +0000

Introduction

In this article, I will be showing how to build a user login system with Python, Flask, and Fauna. Flask is a Python microframework that is used to build web applications while Fauna is an easy-to-use NoSQL serverless database.

Fauna provides a lot of features to make its database integration process seamless. I have come to love its native support for GraphQL and cloud functions. You can create an account on Fauna here.

App Structure

In this article, we will be building a web application with 4 pages:

Home/Landing Page
Dashboard Page
Sign-in Page
Signup Page

To begin, create a folder and create the following files app.py, templates/dashboard.html, templates/home.html, templates/signin.html, templates/signup.html, .env. Your project structure should look like the following:

Installing Dependencies

Next, you need to install the required dependencies, type the following in your terminal:

pip install flask faunadb python-dotenv
pip freeze > requirements.txt

Creating Our Flask App

To create a simple Flask application for the tutorial, type the code below in the app.py


from flask import Flask

app = Flask(__name__)

@app.route(‘/’)
def home():
 return {
 'Message': 'Welcome to our app'
 }

if __name__ == '__main__':
 app.run()

To run the code above, first set the FLASK_DEBUG variable to true then run the app using the command below:

export FLASK_DEBUG=true # if you are using windows change export to set
flask run

You should get a response similar to the image below in your terminal:

Click on the link and you will see the following in your browser

Yaay! you have built a simple flask app with a few lines of code.

Setting Up Fauna Database

Step 1: Creating Fauna Database

To create a database, go to Fauna's Dashboard, then click on NEW DATABASE and enter the database name in the prompt

Step 2: Creating Fauna Secret Key

We will be using Fauna’s secret key to communicate with our database. To generate a secret key, click on the security button and click on NEW KEY button in the security tab.

Copy your secret key and keep it safe, you won’t be able to see it again.

Step 3: Creating Our Fauna Collection

Click on NEW COLLECTION and enter the collection name in the prompt, in this case, my collection name is user.

Step 4: Creating An Index For Your Collection

Go to the INDEXES tab in the left part of the screen and click on the NEW INDEX button, and enter your details in the prompt, it should look like the one in the image below

Building Our Application

Let’s get started with the real application for this article, our app will demonstrate how to authenticate users in a Flask application.

In your .env file, type the following:

Step 1: Adding Environment Keys

FAUNA_SECRET='your fauna secret'
SECRET_KEY='your application secret key'

Step 2: Importing Dependencies and Defining Home Route

Let’s write the view for the home route, update your app.py file with the code below:

import re
from flask import Flask, flash, redirect, url_for, render_template, request, session
from werkzeug.security import generate_password_hash, check_password_hash
from faunadb import query as q
from faunadb.client import FaunaClient
from faunadb.objects import Ref
from faunadb.errors import BadRequest, NotFound
from dotenv import load_dotenv
import os, secrets

app = Flask(__name__)
app.config['SECRET_KEY']=os.getenv('SECRET_KEY')

client = FaunaClient(secret=os.getenv('FAUNA_SECRET'))

@app.route('/')
def home():
 return render_template('home.html')

Next, we create our home.html file and add the following:

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Fauna-Login</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <!-- Navigation -->
 <nav class="navbar navbar-inverse">
     <div class="container-fluid">
         <div class="navbar-header left">
             <a class="navbar-brand active" href="/">Fauna-Login</a>
         </div>
         <ul class="nav navbar-nav right">
             <li><a href="/signin">SignIn</a></li>
             <li><a href="/signup">Signup</a></li>
         </ul>
     </div>
 </nav>

 <!-- Page Content -->

 <div>
     {% with messages = get_flashed_messages(with_categories=True) %}
         {% if messages %}
             {% for category, message in messages %}
                 <div class="alert alert-{{ category }}"> 
                     {{ message }}
                 </div>
             {% endfor %}
         {% endif %}
     {% endwith %}
 </div>
 <h1>Hello there!</h1>
</body>
</html>

The with block is a feature of jinja which is the Flask template engine. The with block here is used for flashing messages to the user like signup success message, error message by the user, etc. In the server, we will use the flash function in Flask, and if that code block is seen it will display it in the browser because we have added it to our HTML file.

If you refresh the page you should see the image below. Note that the login and register buttons aren’t working yet as we have not defined routes for them yet.

Step 3: Defining Signin and Signup routes

Let’s define our SignIn and SignUp endpoint, add the following code below the home function in the app.py file

@app.route('/signin/', methods=['POST', 'GET'])
def signin():
    if session.get('user_id'):
            flash('You are logged in!', 'warning')
            return redirect(url_for('dashboard'))
    if request.method =='POST':
        # get the user details
        email = request.form['email']
        password = request.form['password']
        # verify if the user details exist
        try:
            user = client.query(
                    q.get(q.match(q.index('user_by_email'), email))
            )
        except NotFound:
            flash('Invalid email or password', category='warning')
        else:
            if check_password_hash(user['data']['password'], password):
                session['user_id'] = user['ref'].id()
                flash('Signed in successfully', 'success')
                return redirect(url_for('dashboard'))
            else:
                flash('Invalid email or password', 'warning')
    return render_template('signin.html')

@app.route('/signup/', methods=['POST', 'GET'])
def signup():
    if session.get('user_id'):
            flash('You are logged in!', 'warning')
            return redirect(url_for('dashboard'))
    if request.method =='POST':
        name = request.form['name']
        email = request.form['email']
        password = request.form['password']
        email_regex = '^[a-z0-9]+[\._]?[a-z0-9]+[@]\w+[.]\w{2,3}$'
        if not re.search(email_regex, email) or not 6 < len(password) < 20:
            flash('Invalid email or password!, password needs to be between 6 and 20 characters', 'warning')
            return render_template('signup.html')
        if password != request.form['confirm_password']:
            flash('password fields not equal', 'warning')
            return render_template('signup.html')
        password = generate_password_hash(password)
        user = {'name': name, 'email': email, 'password': password}
        try:
            # store user data to db
            new_user = client.query(q.create(
                q.collection('user'),
                {'data': user}
            ))
        except BadRequest:
            flash('Email already exists')
        else:
            session['user_id'] = new_user['ref'].id()
            flash('Account created successfully', 'success')
            return redirect(url_for('dashboard'))
    return render_template('signup.html')

A lot is going on here, the signin route takes form data from the signin.html file and processes it. First, I add a methods argument to the route and add POST AND GET, it’s GET by default. Then I checked if a user session is set, I will be explaining this in detail later. Then I also check if the request is sent via a POST request, if it is then I retrieve the user data and use Fauna’s client object to check if a user exists with that email, if no user exists I flash an error message to the user and redirect them back to the signin endpoint using url_for and redirect method in Flask. If the user exists I used the session object in Flask to log the user in. To store a session object all I need to do is

session[‘name’]=value

After storing the session I redirected them to the dashboard page. Also, the signup page is similar except for the fact that the data we retrieved from the browser is used in creating new data. I also confirmed that the email is unique, if it is not unique it will raise an error that I handled. Before dealing with the front-end codes it will be nice to work with all the server-side code, we will define two more endpoints and we will also update our home route.

Step 4: Defining dashboard and signout routes

@app.route('/dashboard/')
def dashboard():
    if not session.get('user_id'):
            flash('You need to be logged in to view this page!', 'warning')
            return redirect(url_for('signin'))
    user = client.query(
        q.get(q.ref(q.collection("user"), session['user_id']))
    )['data']
    return render_template('dashboard.html', current_user=user)

@app.route("/signout/")
def signout():
    if not session.get('user_id'):
        flash('You need to be logged in to do this!', 'warning')
    else:
        session.pop('user_id', None)
        flash('Signed out successfully', 'success')
    return redirect(url_for('home'))

In the dashboard route, I first check if a user_id session is not set which means the request is unauthorized, if this condition is true I redirected back to the signin route. If the session is set, I used the user_id session variable to get the user data and I passed it to the HTML file that’s being rendered.

In the signup route, I first check if the user_id session isn’t set then I flash a message to the user but if the session is set I remove it and in either case, I redirect them back to the home route. I used the session.pop function which takes the name we of the variable I want to remove from the session and I also pass in None

Edit the home route to be like the one below:

app.route('/')
def home():
    if session.get('user_id'):
            flash('You are logged in!', 'warning')
            return redirect(url_for('dashboard'))
    return render_template('home.html')

Before rendering the home.html file I first check if the user_id session is set, if it is then the user is signed in and I redirect back to the dashboard page.

Step 5: Creating the html files

In your signin.html file type the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignIn - Fauna-Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="{{url_for('home')}}">Fauna-Login</a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="{{url_for('signin')}}">SignIn</a></li>
            <li><a href="{{url_for('signup')}}">Signup</a></li>
          </ul>
        </div>
      </nav>
  <!-- Page Content -->
  <div class="container">
    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}"> 
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% endwith %}
  </div>
  <div class="col-md-4"></div>
  <div class="container content-section col-md-4">
    <h1 class="mt-4">Sign In</h1>
    <form action="{{url_for('signin')}}" method="post">
        <div class="form-group">
            <label for="name" class="form-control-label">Email:</label>
            <input class='form-control-lg form-control' type="email" name="email" id="" required>
        </div>

        <div>
            <label width="100" for="name" class="form-control-label">Password:</label>
            <input class='form-control-lg form-control' type="password" name="password" id="" required>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-outline-info" value="Sign In">
        </div>
        <div>Don't have an account? <a href="/signup">Signup</a></div>
    </form>
</div>
</body>
</html>

In your signup.html file type the following

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignUp - Fauna-Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="{{url_for('home')}}">Fauna-Login</a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="{{url_for('signin')}}">SignIn</a></li>
            <li><a href="{{url_for('signup')}}" class="active">Signup</a></li>
          </ul>
        </div>
      </nav>
  <!-- Page Content -->
  <div class="container">
    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}"> 
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% endwith %}
  </div>
  <div class="col-md-4"></div>
  <div class="container content-section col-md-4">
    <h1 class="mt-4">Sign In</h1>
    <form action="{{url_for('signup')}}" method="post">
        <div class="form-group">
            <label for="name" class="form-control-label">Name:</label>
            <input class='form-control-lg form-control' type="text" name="name" id="" required>
        </div>

        <div>
            <label for="email" class="form-control-label">Email:</label>
            <input class='form-control-lg form-control' type="email" name="email" id="" required>
        </div>

        <div>
            <label for="name" class="form-control-label">Password:</label>
            <input class='form-control-lg form-control' type="password" name="password" id="" required>
        </div>

        <div>
            <label for="name" class="form-control-label">Confirm Password:</label>
            <input class='form-control-lg form-control' type="password" name="confirm_password" id="" required>
        </div>
        <div class="form-group">
            <input type="submit" class='btn btn-outline-info' value="Sign Up">
        </div> 
        <div>Have an account? <a href="/signin">Login</a></div>
    </form>
</div>
</body>
</html>

In the action of the form, I used url_for which is a flask function that takes in a view function and returns the endpoint that the view function responds to. Alternatively, I can just pass the endpoint as I did at the end of the form.

In your dashboard.html file type the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{current_user.name}} - Fauna-Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand active" href="#">Fauna-Login</a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="{{url_for('signout')}}">Signout</a></li>
          </ul>
        </div>
      </nav>
  <!-- Page Content -->
  <div>
    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}"> 
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% endwith %}
  </div>
    <h1>Welcome {{current_user.name}}</h1>
</body>
</html>

Testing The Application

Finally, we will be testing the application. First, go to the home route, you should see the following:

Click the signup button and try to sign up with an email and password whose length is not between 6 and 20 characters.

So we can see that our data is being validated before data creation. Next, create user data.

Click the signout button, you get a cool success message and you can signin again.

Click the signin button and try to sign in with the data you created while signing up.

If your data is correct you should be able to sign in successfully.

Database Check

Let’s view our user collection dashboard in Fauna

As you can see, the data is stored in the dashboard correctly. You can also query your data directly in your Fauna dashboard using FQL.

Conclusion

In this article, you have been able to build a web application that logs users in and also logs users out using two interesting technologies, Flask and Fauna. The source code for this project is available on GitHub If you find this article interesting please do share it with your friends and colleagues. You can reach out to me via Twitter if you have any questions.

Building Serverless Applications With FastAPI and FaunaDB

Babatunde Koiki — Wed, 17 Feb 2021 04:58:22 +0000

I have been exploring serverless databases for a while now so I decided to write an article exploring this concept. In this article, we will build a serverless application leveraging a serverless database (Fauna) and FastAPI, a Python framework for building APIs.

The application we would be building is a simple CRUD API with an authentication feature using FastAPI and Fauna.

Serverless Databases

Serverless databases allow developers to focus on the main application. They are always hosted on a different server hence we can deploy our application on Heroku and our database will be on a server like AWS. This makes a lot of work easier. For instance, if I build an application running locally, and for some reason, I have to deploy the application to NameCheap. To use a database on the same server, I would have to use MySQL. This means I have to rewrite the database code even if I am using an ORM because they are two different database types. But with serverless databases like Fauna, I don't have to worry about that.

Fauna is a NoSQL serverless database. One reason why I like Fauna is that it's easy to use and they have a very nice community. They have drivers for Python, JavaScript, Java, etc. If you use MongoDB without using an ODM you'd see that working with data is easier in Fauna.

Our API Structure

To get started create a folder called crud-fastapi-fauna and create a virtual environment inside it then activate. Next, run the command below in your terminal to complete the setup.

$ pip install fastapi uvicorn pyjwt faunadb bcrypt python-dotenv

/users/create/ - HTTP POST - Creating a new user
/users/token/ - HTTP GET - Getting a token for authenticating users
/users/todos/ - HTTP POST - Creating a new todo for the authenticated user
/users/todos/ - HTTP GET - Getting all todos created by the authenticated user
/users/todos/{todo id}/ - HTTP GET - Getting the todo data with the specified id. The authenticated user must be the one that created the todo.
/users/todos/{todo id}/ - HTTP PUT - Updating the todo data whose id is given in the path parameter. The authenticated user must be the one that created the todo.
/users/todos/{todo id}/ - HTTP DELETE - Deleting the todo data whose id is specified as a path parameter. The authenticated user must be the one that created the todo.

Getting Started with Fauna

To use Fauna, you need to create an account first. We also need to create a database and collection. We can do these in two ways. We can either create them directly on the website or use the Python driver to create them in our code. I'll show how to do it using both techniques in this article.

We also need to create an index. If you're from another NoSQL language like MongoDB you should be familiar with this. It's just a way we can search through documents(row) in our collection(table). We can create unique indexes like primary keys in SQL and also non-unique indexes that will return an array of data based on the condition. An index can also be created with both the driver(in this case the Python driver) and also directly on the website.

Creating a database

Navigate to the database section and create a new database. Prepopulating the database with demo data means you want to have sample data. In our case, we don't want that.

Creating Collection

To create a collection, navigate to the collection section in your dashboard and follow the put in the collection name. Similarly, create a todos collection. The most important thing is the name, you can leave other fields as it is.

Creating an Index

An index is what is used to query a collection in NoSQL databases. It can be unique like a primary key in SQL databases or a non-unique index. In this article I'll be creating 4 indexes which are user_by_id, user_by_email, todo_by_id, and todo_by_user_id. The first three have to be unique, but the last one may not be. This is because a user can have more than one todo. To create a new index, navigate to the index section in your dashboard and click “new index”. Note the terms which show the field that we want to index, we use data.id as the field name this is because when creating a new document we wrap it in a dictionary whose key is data.

Creating a secret key in Fauna

A secret key is what is used to communicate to a Fauna database from a Fauna driver. For example, while trying to communicate with Fauna using Python, we need to tell Fauna that this is who we are and this is the database we are trying to connect to, we do this through a secret key. To generate a secret key, navigate to the security section of your dashboard and click the “new key” button. You need to store the key immediately as Fauna auto generates a new key for you every time you click on the new key.

Working with Fauna’s Python Driver

Even though we created our database, collections, indices, and keys from the website we can also create this using code. Let’s see how we can achieve this:

Creating a Database

client.query(q.create_database({"name": "test"}))

We can’t access the database yet and that’s because there’s no data inside it. We need to generate a secret key to access the database. A key can have one of two different roles: server or admin. Let’s create a server key

client.query(
    q.create_key({
        "database": q.database("test"), 
        "role": "server"
    })
)

This returns a dictionary. What we need most is the secret. You can use this to create collections in the database. Note that this is a sub-database of the database we created on the website earlier.

Creating a Collection

server_client = FaunaClient(secret="your server key")
server_client.query(q.create_collection({"name": "test_coll"}))

This creates a collection inside your database

server_client.query(
    q.create_index({
        "name": "id_index", 
        "source": q.collection("test_coll"),
        "terms": [{"field": ["data", "id"]}] 
    })
)

Getting Started with FastAPI

FastAPI is a python framework built on top of another python framework called Starlette. It uses an ASGI server called uvicorn to run, unlike Flask and Django which uses a WSGI server by default hence making FastAPI one of the fastest Python frameworks. One main reason why I love FastAPI a lot is that it auto-generates swagger documentation for us, and documentation and tests are two things developers don't really like writing. This documentation is generated for us due to some validations we did use type hinting. Consider the code snippet below

from fastapi import FastAPI 
from typing import List, Dict 

app = FastAPI() 

@app.get('/users/{user_id}', response_model=List[Dict[str, str]])
def get_user(user_id: str):
    return [
        {'name': 'Babatunde', 'id': user_id}
    ]

We first need to import the FastAPI class from fastAPI and we also need to import the List and Dict class from the typing module which is used for type hinting. There are 4 main decorators of fastAPI that are commonly used which are @app.get, @app.put, @app.post, and @app.delete which are used for HTTP GET, PUT, POST, and DELETE request respectively. These decorators take some parameters some of which are:

path: this is the endpoint that the view function handles the request for.
response_model: this is how the data returned should look like. This is great because we can receive data from the database that contains extra data that we don't want to pass, instead of looping and getting the needed data all I need to just do is use the response model and FastAPI helps in the data filtering. Here I did something very simple. In the later part of the article, I'll be relying on pydantic, which is another built-in python library for advanced type hinting.
status_code: This is the HTTP status the endpoint should return, default is 200(OK).

While defining our functions, we pass parameters which defines path parameters, query parameters, body, authorization data, etc

path parameters: must be of type string or int, and must be enclosed in the path of the decorator.
query parameter: must be of type int, str, or bool. Can also be defined with the Query class of FastAPI
Body parameters: Can be defined either using the Body class or using a class that inherits from pydantic.BaseModel
Header Parameters: Are defined using the Header class of FastAPI

To run the application type:

$ uvicorn main:app --reload

You should see something similar to this

The main:app denotes that uvicorn should run the app object in the main.py file in the current directory and --reload denotes that uvicorn should restart the server if it detects changes in the file. Go to http://127.0.0.1:8000/docs to see the documentation and test the API. You can also use postman for API testing.

As you can see, FastAPI generates swagger documentation for us and we can also see some default schema. If you click on the endpoint, you can test it out.

API Creation

To get started you need to create some files which are main.py, schema.py, models.py, .env and if you'll be committing your files to git you need to create a .gitignore file so your folder structure should be like this:

In your .env file put in your environment variables which are FAUNA_SECRET and SECRET_KEY. Fauna secret is the secret key given to you by Fauna while the secret key is a random key that we used while hashing user passwords.

FAUNA_SECRET='your fauna secret key'
SECRET_KEY='something secure'

In your schema.py file type the following:

'''Schema of all data received and sent back to the user'''
from pydantic import BaseModel, Field
from typing import Optional, List

class DeletedData(BaseModel):
    message: str 

class User(BaseModel):
    '''Base User schema contains name and email'''
    email: str = Field(
        None, title="The email of the user", max_length=300
    )
    fullname: str = Field(
        None, title="The name of the user", max_length=300
    )

class Todo(BaseModel):
    '''
    Schema of data expected when creating a new todo. Contains name and is_completed field
    '''
    name: str = Field(None, title='The name of the todo')
    is_completed: bool = Field(
        False, title='Determines if the todo is completed or not defaults to False'
    )

class UserInput(User):
    '''
    Schema of data expected when creating a new user. Contains name, email, and password
    '''
    password: str = Field(
        None, title="The password of the user", max_length=14, min_length=6
    )

class UserOutput(User):
    '''
    Schema of data returned when a new user is created. Contains name, email, and id
    '''
    id: str = Field(None, title='The unique id of the user', min_length=1)

class TodoWithId(Todo):
 '''Base schema of todo data returned when getting a todo data'''
    id: str 



class UserOutputWithTodo(UserOutput):
    '''
    Schema of data expected when getting all todo or when getting user data. 
    Contains name, email, id, and an array of todos
    '''
    todos: List[TodoWithId] = Field(
        [], title="The todos created by the user"
    )

class TodoOutput(TodoWithId):
    creator: UserOutput

class Token(BaseModel):
    token: str 

class UserSignin(BaseModel):
    email: str = Field(
        None, title="The email of the user", max_length=300
    )
    password: str = Field(
        None, title="The password of the user", max_length=300
    )

We defined some classes that rely on pydantic.BaseModel. These classes will help in data validation when receiving and sending data back to the client and that's all for this file.

Let's talk about the models.py file which is where I interact with Fauna. I love dividing my codes into classes if possible and I'd be doing the same here also. So I'll be creating two classes which are User and Todo. A user object should have full name, email, password, and id fields while a Todo data should have name, is_completed, id, and user_id fields. If you look closely in the schema.py file our schema for Todo and UserInput validates this except that there is no id and user_id there. But TodoOutput and UserOutputWithTodo have those fields except the password field since I don't want to expose the password of the user even though I'll be hashing it before storing it to the database.

In your models.py file type the following:

from faunadb import query as q
from faunadb.client import FaunaClient
from faunadb.objects import Ref
from faunadb.errors import BadRequest, NotFound
from dotenv import load_dotenv
from typing import Dict
import os, secrets

load_dotenv()

client = FaunaClient(secret=os.getenv('FAUNA_SECRET'))
indexes = client.query(q.paginate(q.indexes()))

print(indexes) # Returns an array of all index created for the database.

class User:

    def __init__(self) -> None:
        self.collection = q.collection('users')

    def create_user(self, data) -> Dict[str, str]:
        new_data = client.query(
            q.create(
                self.collection,
                {'data': {data, 'id': secrets.token_hex(12)}}
            )
        ) 
        return new_data['data']

    def get_user(self, id):
        try:
            user = client.query(
                q.get(q.match(q.index('user_by_id'), id))
            )
        except NotFound:
            return None
        return None if user.get('errors') else user['data']

    def get_user_by_email(self, email):
        try:
            user = client.query(
                q.get(q.match(q.index('user_by_email'), email))
            )
        except NotFound:
            return None
        return None if user.get('errors') else user['data']

class Todo:

    def __init__(self) -> None:
        self.collection = q.collection('todos')

    def create_todo(self, user_id, data) -> Dict[str, str]:
        new_todo = client.query(
            q.create(
                self.collection,
                {'data': {data, 'user_id': user_id, 'id': secrets.token_hex(12)}}
            )
        )

        return new_todo['data']

    def get_todo(self, id):
        try:
            todo = client.query(
                q.get(q.match(q.index('todo_by_id'), id))
            )
        except NotFound:
            return None
        return None if todo.get('errors') else todo 

    def get_todos(self, user_id):
        try:
            todos=client.query(q.paginate(q.match(q.index("todo_by_user_id"), user_id)))

            return [
                client.query(
                    q.get(q.ref(q.collection("todos"), todo.id()))
                )['data'] 
                for todo in todos['data']
            ] 
        except NotFound:
            return None 

    def update_todo(self, id, data):
    try:
        return client.query(
            q.update(
                q.ref(q.collection("todos"), id),
                {'data': data}
            )
        )['data']
    except NotFound: 
        return 'Not found'

    def delete_todo(self, id):
        try:
            return client.query(q.delete(q.ref(q.collection("todos"), id)))['data']
        except NotFound:
            return None

Firstly, I imported a bunch of stuff from Fauna.

FaunaClient: This is what we used to authenticate with Fauna by providing our secret key. There are other parameters but in this case, only the secret key is enough. If you have Fauna installed locally you need to specify domain, scheme, and port. The client.query takes in a query object.
Ref: all documents have a Ref object which is where the id generated by Fauna is stored.
NotFound: This is an error that is raised by Fauna if the document or collection is not found. There's also a bad request error that is raised if Fauna can't connect to the database.

We also got the indexes in our optional Fauna database.

The User class has three methods and one attribute.

The attribute collection: uses the query module to the users collection.
The create_user method takes the data passed from the client after being validated and passes it to this function, hence it has a full name, email and password. Then we used the secrets module to generate a unique identifier. The query object, q.create, takes in two parameters which are, the collection, and the data to be created as the document. The client.query method returns a dictionary containing ref and data as keys if no error was raised. The data is what we created and that's why it's what we're returning. And if an error was raised I returned None so in the view function we can send an error message like, “a bad request”.
The get_user takes in an id that we generated ourselves and uses the index we created earlier user_by_id to get the user. We use the q.get to query the index using q.match, which takes in the index object and the value we want to match in this case id. We can always use the id generated by Fauna but that means we have to add extra data after creating the user before returning it. But this will work perfectly well also.
The get_user_by_email takes in an email and uses the user_by_email index we created earlier to find the user.

I also ensured to catch document not found errors so as not to break our application.

The query module has other functions like query.update, query.replace, query.delete which updates, replaces, and deletes the document or whatever we want to work on.

The Todo class has one attribute which is used to define the collection and 5 methods which are create_todo, get_todo, get_todos, update_todo and delete_todo. These methods do something similar to the User class but the get_todos method is worth talking about. We use the index todo_by_user_id, this index is not unique since a user can have many todos. Firstly, I used the query.paginate which is used to return an array while querying then we pass the q.match into it so it can match all data with that user_id. This returns an array of ref objects in which we can use the ref object to get id and then get the todo data itself. Instead of using q.match I used q.ref, q.match is used when we're using an index, and q.ref is used when we're using a ref id. The ref object has an id method that returns the Fauna generated id.

What is remaining is integrating both the schema and models in our application.

Let's go to the main.py file and add the following code.

from dotenv import load_dotenv
from fastapi import FastAPI, HTTPException, status, Header
import models
import bcrypt, os, jwt 

from schema import 

load_dotenv()

app = FastAPI()

@app.post(
    '/users/create/', 
    response_model=UserOutputWithTodo, 
    description='This route is for creating user accounts',
    status_code=status.HTTP_201_CREATED
)
async def create_user(user: UserInput):
    user.password = bcrypt.hashpw(
        user.password.encode('utf-8'), 
        bcrypt.gensalt()
    ).decode('utf-8')

    try:
        user = models.User().create_user(user.dict())
    except Exception as e:
        raise HTTPException(400, detail=str(e))
    return user

We imported bcrypt which is what we'll be using to hash passwords while jwt is what we'll be using to generate an encoded token for authenticating the user.

I passed some parameters into the decorator, we've seen path, response_model, and status code before. The description is used to describe what the endpoint does and FastAPI will use it when describing the endpoint in swagger. Our Response Model is UserOutputWithTodo which is a class that FastAPI will turn to JSON. This class has a full name, email, id, and a todos array fields.

We get the JSON data sent from the client which contains the full name, email, and password. If the client sends invalid data FastAPI sends an error response back to the client. We hashed the password first then passed the user data to the User class in the models.py file. This returns a dictionary containing full name, email, password, and id. We then return the user. Since we've given the default value for todos that's what will be used. To return an error message we raise an HTTPException and pass the status code and the detail of the error.

To test this endpoint, I’ll use the swagger documentation generated for us. Run the server again and go to the documentation

As you can see, it gives us the kind of data we’re to input thanks to FastAPI. Click the try it out button and enter your details

Let's define an endpoint that sends a token that the client will be used for authentication.

@app.post(
    '/users/token/', 
    response_model=Token, 
    description='This route is for creating user accounts'
)
async def get_token(user: UserSignin):
    user_data = models.User().get_user_by_email(user.email)
    if user_data and bcrypt.checkpw(
        user.password.encode('utf-8'), 
        user_data['password'].encode('utf-8')
    ):
        token = jwt.encode({'user': user_data}, key=os.getenv('SECRET_KEY'))
        return {
        'token': token
        }

    header = {'WWW-Authenticate': 'Basic'}
    raise HTTPException(
        status.HTTP_400_BAD_REQUEST, 
        detail='Invalid email or password',
        headers=header
    )

If you test this endpoint, it returns a token if user pass their correct credentials hence it returns an error message.

Let's define a function that helps us authenticate. We can also use a decorator but to make things simple we'll be sticking to functions

We used the bearer form for authentication. If the client doesn't use this format we send a 401 error back to the client

async def authorize(authorization: str):
    if not authorization:
        raise HTTPException(
            status.HTTP_401_UNAUTHORIZED, 
            detail='Token not passed'
        )
    if len(authorization.split(' ')) != 2 or\
            authorization.split(' ')[0] != 'Bearer':
        raise HTTPException(
            status.HTTP_401_UNAUTHORIZED, 
            detail='Invalid Token'
        )
    token = authorization.split(' ')[1]
    return jwt.decode(token, key=os.getenv('SECRET_KEY'), algorithms=[ 'HS256'])['user']

Finally let's write the code that handles creating, getting, updating, and deleting the todos

For each of the following functions, we used the authorize function to get the user making the request.

For the create_todo function, we got the user_id and passed it along with the JSON data passed and send it to the create_todo method of the models. Todo class.

For get_todo, update_todo, and delete_todo we first check if the id of the user making the request is the same as the user_id of the todo to ensure that a user can not work on todo that isn't created by them.

@app.post(
    '/users/todos/',
    response_model=TodoOutput, 
    status_code=status.HTTP_201_CREATED
)
async def create_todo(
    todo: Todo, 
    Authorization: str= Header(
        None, 
        description='Authorization is in form of Bearer &lt;token&gt; where token is given in the /users/token/ endpoint'
    )   
):
    user = await authorize(Authorization)
    try:
        todo = models.Todo().create_todo(user['id'], todo.dict())
    except Exception as e:
        raise HTTPException(400, detail=str(e))
    todo['creator'] = user
    return todo 

@app.get(
    '/users/todos/{todo_id}', 
    response_model=TodoOutput
)
async def get_todo(
    todo_id: str= Field(..., description='Id of the todo'),
    Authorization: str= Header(
        None, 
        description='Authorization is in form of Bearer &lt;token&gt; where token is given in the /users/token/ endpoint'
    )
):
    user = await authorize(Authorization)
    try:
        todo = models.Todo().get_todo(todo_id) 
    except Exception as e:
        raise HTTPException(400, detail=str(e))
    if not todo:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail='No todo with that id'
        )
    todo = todo['data']
    if todo and todo['user_id'] != user['id']:
            raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED)
    todo.update({"creator": user})
    return todo

@app.get(
    '/users/todos/', 
    response_model= UserOutputWithTodo,
    description='Get all Todos'
)
async def get_all_todos( 
    Authorization: str= Header(
        None, 
        description='Authorization is in form of Bearer &lt;token&gt; '\
        'where token is given in the /users/token/ endpoint'
    )
):
    user = await authorize(Authorization)
    # get all todo
    try:
        todos = models.Todo().get_todos(user['id'])
    except Exception as e:
        raise HTTPException(400, detail=str(e))
    if not user:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail='User does not exist'
        )
    # add user data
    todos = [] if not todos else todos
    user.update({'todos': todos})
    return user

@app.put(
    '/users/todos/{todo_id}', 
    response_model=TodoOutput
)
async def update_todo(
    todo_id: str =Field(..., description='Id of the todo'),
    data: Todo = Body(...),
    Authorization: str= Header(
        None, 
        description='Authorization is in form of Bearer &lt;token&gt; where token is given in the /users/token/ endpoint'
    )
):
    user = await authorize(Authorization)
    try:
        todo = models.Todo().get_todo(todo_id 
        if todo['data']['user_id'] != user['id']:
            raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED)
        todo = models.Todo().update_todo(todo['ref'].id(), data.dict())
    except Exception as e:
        raise HTTPException(400, detail=str(e))
    todo.update({"creator": user})
    return todo

@app.delete(
    '/users/todos/{todo_id}', 
    response_model=DeletedData
)
async def delete_todo(
    todo_id: str = Field(..., description='Id of the todo'),
    Authorization: str= Header(
        None, 
        description='Authorization is in form of Bearer &lt;token&gt; where token is given in the /users/token/ endpoint'
    )
):
    user = await authorize(Authorization)
    try:
        todo = models.Todo().get_todo(todo_id)
        if not todo:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail='No todo with that id'
        )
        if todo['data']['user_id'] != user['id']: 
            raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED)
        todo = models.Todo().delete_todo(todo['ref'].value['id'])
    except Exception as e: 
        raise HTTPException(400, detail=str(e))
    return {'message': 'Todo Deleted successsfully'}

Conclusion

In this article, you’ve been able to build a fully functional todo application using two interesting technologies, FastAPI and Fauna. You’ve also learned how to secure your user data by hashing data and finally learned how you can authenticate users in an API. If you like you can deploy this to a hosting platform of your choice and interact with the API from a front end application like React js. The source code for this project is available on GitHub If you find this article interesting please do share with your friends and colleagues. You can reach out to me via Twitter if you have any questions.