Forem: Hrushi M

How To Add A Serverless Authentication Microservice To Your HTML, CSS & Javascript App

Hrushi M — Tue, 14 Feb 2023 17:13:56 +0000

👋 Introduction

About Passwordless Sign-ins

Remembering passwords has become a headache these days. Password-less sign-in is in vogue, and naturally so! It is just so convenient as users needn’t remember their passwords! User experience, user convenience, data & privacy protection and security as some of the important aspects that need to be considered, while developing an authentication system. According to my humble opinion, OTP-based password-less authentication is one of the simplest & safest ways to authenticate users.

About Microservices

A microservice is an independently deployable module of an application that has a scoped & well-defined functionality. User authentication, user profiling, customer support ticketing, payments & subscriptions are a few modules that can be developed as microservices. You can architect your application such that it is composed of several microservices working in tandem with each other. Broadly speaking, the microservice-based architecture makes your application modular and more maintainable, as it scales.

This Tutorial

This tutorial demonstrates how to add microservice-backed passwordless email-otp-based authentication functionality to your HTML, CSS, and Javascript app using SfUserAuth, a low-code web component library.

So brace yourself, get into your developer groove, on your mark, get set and go! 👨‍🔧👩‍🔧

💡 What's New In This Tutorial?

Authentication functionality is critical as your entire application will hinge on it. This tutorial demonstrates the use of the library SfUserAuth, which commoditizes the authentication functionality.

SfUserAuth is a low code solution, which will allow you to add the authentication functionality to your app, even if you are just a junior frontend developer with no knowledge of backend development.

🏆 What Will You Learn At The End Of This Tutorial?

Look at the example below. It is a single-page application developed using purely HTML, CSS and Javascript. It uses the SfUserAuth library for implementing the authentication microservice. Developing this application is the goal of the current tutorial.

Go ahead, open the link in a new tab, and play around with it. To experience the authentication flow, click on the sign-in button.

Open Example In New Tab

⚠ Before You Begin

Please note the pre-requisites of this tutorial:

Familiarity With Frontend Web Development - You need to be familiar with the basic concepts of HTML, CSS & Javascript. You need not be an expert developer here, but basic knowledge is necessary. W3 Schools Roadmap could be a good starting point for novices.

NPM Installation - In this example, we will use an NPM-based web server. To follow this tutorial properly, I will recommend that you have npm installed on your development machine. Once you get the hang of it, you can also try the same method on other web servers, no problem!

AWS Admin Account - You also need access to an AWS admin account. The backend of this tutorial will be hosted on AWS. You don’t need backend coding knowledge, just access to the admin console is enough.

Editor - You will also need a good web editor. I like VS Code. You can use any editor of your choice.

📚 Tech-stack

Frontend - The frontend of this application will be designed in pure HTML, CSS, and Javascript.

Backend - The backend is based on the auto-scalable technologies of AWS, namely, DynamoDB & Lambda Functions. Worry not, backend coding knowledge is not required.

🌲 Software Architecture

The above diagram depicts the architecture of our application. The authentication module has both the frontend and backend components. However, the application treats it as a black box and doesn't care about its internals.

The application API and the application backend are irrelevant to this tutorial, hence the tutorial doesn't concern itself with them. Here, they are only shown for representational and understanding purposes.

🍽 Step 1 - Project Setup

1.1 - Project Directory

Create a new folder on your machine for this task. I called it SfUserAuth-Demo. You can name it as you want.

1.2 - Initialize NPM

npm init

Just accept the default values, and keep pressing ENTER until the initialization completes and the package.json file is generated. Your project will now have only one file, namely package.json.

1.3 - Install the HTTP-server packages

npm install connect serve-static

1.4 - Create the dist/ folder

Create a folder to store all the html files. I called it "dist/".

1.5 - Create index.js

Create index.js, to hold the code for the HTTP server. Paste the code given below in index.js.

var connect = require('connect');
var serveStatic = require('serve-static');

connect()
     .use(serveStatic('./dist'))
     .listen(8080, () => console.log('Server running on 8080...'));

Your folder structure should look something like this:

1.6 - Start the HTTP-server

Start the web server using the below command

node index.js

Browse to http://localhost:8080/ for confirming that the web server is running. A running server will throw an error message similar to the one given below. This is because we haven't yet created index.html in the dist folder.

1.7 - Create dist/index.html

Create an index.html file in the dist folder and initialize it with the following code:

<html>
hello sfnav
</html>

Go back to the browser and refresh it. Confirm that the HTTP server now serves the index.html page.

💀 Step 2 - Create The HTML App Skeleton

The code of the HTML skeleton is given below. Copy and paste it into your dist/index.html.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    <!-- Integration material icons as they are used in sf-nav -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Google fonts integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    <!-- Integration the web components module -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    <!-- Integration lit and sf-nav web components module -->
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
        import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.69/sf-user-auth.js?module';
    </script>
    <style>

      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }

    </style>
  </head>
  <body style="margin: 0px;">
    <div id="nav-container">
        <sf-nav id="sf-nav">
            <!-- Set the brand name -->
            <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
            <!-- Set the brand logo -->
            <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

        </sf-nav>
    </div>

  </body>
</html>

This skeleton code does the following:

It sets up the viewport
It includes fonts, you can use any fonts of your choice
It includes the web component loader script
It includes the Lit library. The navigation component (SfNav) and the authentication component (SfUserAuth), both depend on Lit, hence this inclusion
It includes the material icons package, which is required by the SfNav and SfUserAuth web components
It includes the SfNav and SfUserAuth web component libraries
It includes a style block that - (1) Sets some basic styling to the document body and (2) Ensures that the SfNav component will show up only after it is defined properly
It then includes/renders the SfNav component in the body HTML with a brand name and brand image.

💾 ↺ Save dist/index.html, and reload the browser.

You will see that a bare-bones navigation component has loaded which only contains the brand name and brand image. The point to note is that it contains both the header part and the footer part.

⥣ Step 3 - Configure The Navigation Bar

3.1 - Setup Route Container

Create a page content slot in the sf-nav block as shown below. This container sits between the header and footer and dynamically displays the page content as the user navigates across pages.

<sf-nav>

        <!-- Set the brand name -->
        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        <!-- Set the brand logo -->
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

        <!-- Page Content -->
        <div slot="content">
        </div>

</sf-nav>

3.2 - Setup Parameter Passing

To enable parameter pass-down during routing, include the following Javascript code block in the sf-nav block. This code block:

Listens to the routeChange event from SfNav and updates the routeMap associative array with the new route and its parameters, every time the routeChange event is fired.
Exposes two functions - (1) getCurrentPathname and (2) getCurrentArgs, which can be used to obtain the current location and the current parameters.

<body>
    <sf-nav>
    <!-- Set the brand name -->
            <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
            <!-- Set the brand logo -->
            <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

            <!-- Page Content -->
            <div slot="content">
            </div>
    </sf-nav>
    <script>
        var routeMap = [];

        function getCurrentPathName() {
          return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }
        function getCurrentArgs() {
          return routeMap[getCurrentPathName() + '.html'];
        }

        document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
          routeMap[e.detail.pathName] = e.detail.args;
        })
    </script>
</body>

3.3 - Confirm That Routing Works

At this point, the routing configuration is complete.

💾 ↺ Save dist/index.html, and reload the browser.

You will observe the following:

The header and the Footer are now separated with a content block in between.
SfNav now throws the 'Could not find home.html' message. Don't worry, this is perfectly fine because we haven't yet created the home.html file.

3.4 - Create dist/home.html

Create a new file dist/home.html with the below HTML:

<div class="cContainer">
    <h1>Home Page</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

💾 ↺ Save dist/home.html, and reload the browser.

The home page content will now load.

You will observe that the content loads properly. Let us style it a bit, so that it looks a bit nicer. Add the following styles in the style block of dist/index.html:

<head>
    <style>
        <!-- other styles -->

        .cContainer {
            margin: 10px;
            padding: 20px;
            border: dashed 1px gray;
            background-color: white;
        }
    </style>
</head>

💾 ↺ Save dist/index.html, and reload the browser.

This looks good for now. We can surmise now that routing is working normally. Let us move ahead.

3.5 - Setup Main Menu

SfNav supports two-level menus. Creating it is pretty straightforward. Create an unordered list as shown below and set it to the main menu slot. Some menu items point to internal links (links with hash) and some menu items point to external links (links with http(s)).

In this example, we create and insert the menu dynamically into the navbar. Hence the menu is defined in Javascript as shown:

const menu = `
            <!-- Set the main menu -->
            <ul slot="mainMenu">
                <li><a href="#about">About</a></li>
                <li class="li-solutions">
                    <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                    <ul>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">Products</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">Contact Us</a>
                    <ul>
                        <li><a href="https://instagram.com">Instagram</a></li>
                        <li><a href="https://facebook.com">Facebook</a></li>
                        <li><a href="https://youtube.com">YouTube</a></li>
                    </ul>
                </li>
            </ul>
        `;

To accommodate the dynamic insertion of the menu, we restructure the index.html a little bit. It should look like:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    <!-- Integration material icons as they are used in sf-nav -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Google fonts integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    <!-- Integration the web components module -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    <!-- Integration lit and sf-nav web components module -->
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
        import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.69/sf-user-auth.js?module';
    </script>
    <style>

      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }

      .cContainer {
            margin: 10px;
            padding: 20px;
            border: dashed 1px gray;
            background-color: white;
        }

    </style>
  </head>
  <body style="margin: 0px;">
    <div id="nav-container">
        <sf-nav id="sf-nav">
            <!-- Set the brand name -->
            <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
            <!-- Set the brand logo -->
            <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>


            <!-- Page Content -->
            <div slot="content">
            </div>

            <!-- Call to action -->
            <a slot="cta" href="#auth/signin">Sign In</a>

            <!-- Copyright notice -->
            <p slot="copyright">Copyright 2022 Superflows</p>

            <!-- Set the social media links -->
            <ul slot="socialMedia">
                <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
                <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
                <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
            </ul>

        </sf-nav>
    </div>

    <script>

        //
        // Navigation bar related Javascript
        //

        // Hash map for storing paths & arguments
        var routeMap = [];

        // Menu HTML to be inserted into sf-nav
        const menu = `
            <!-- Set the main menu -->
            <ul slot="mainMenu">
                <li><a href="#about">About</a></li>
                <li class="li-solutions">
                    <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                    <ul>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">Products</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">Contact Us</a>
                    <ul>
                        <li><a href="https://instagram.com">Instagram</a></li>
                        <li><a href="https://facebook.com">Facebook</a></li>
                        <li><a href="https://youtube.com">YouTube</a></li>
                    </ul>
                </li>
            </ul>
        `;

        // What's the current path?
        function getCurrentPathName() {
            return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }

        // What are the current arguments?
        function getCurrentArgs() {
            return routeMap[getCurrentPathName() + '.html'];
        }

        // Initiate navigation bar listeners
        function initiateListeners() {
            document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
                routeMap[e.detail.pathName] = e.detail.args;
            })
        }

        // 
        // Handling the authentication
        // 

        // Initiate the menu (first load)
        function insertSfNavMenu() {
            const currentInnerHTML = document.getElementsByTagName('sf-nav')[0].innerHTML;
            const newInnerHTML = currentInnerHTML + menu;
            document.getElementById('nav-container').innerHTML = '<sf-nav>'  + newInnerHTML + '</sf-nav>';
            initiateListeners();

        }

        function initPage() {

            insertSfNavMenu();

        }

        initPage();

    </script>
  </body>
</html>

💾 ↺ Save dist/index.html, and reload the browser.

If you click on any menu items with internal links such as services, products, you will observe that SfNav throws the file not found message. This is because we haven't yet created these files.

3.6 - Setup Social Media Links

Social media links can be configured using an unordered list as well. Below is an example:

<body>
    <sf-nav>

        <!-- Set the social media links -->
        <ul slot="socialMedia">
            <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
            <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
            <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
        </ul>

    </sf-nav>
</body>

💾 ↺ Save dist/index.html, and reload the browser.

3.7 - Copyright Notice

The copyright notice can be configured in the footer as follows:

<body>
    <sf-nav>

        <!-- Copyright notice -->
        <p slot="copyright">Copyright 2022 Superflows</p>

    </sf-nav>
</body>

💾 ↺ Save dist/notification.html, and reload the browser.

The copyright notice will be displayed in the footer.

3.8 - Setup Call To Action Button

To initiate the authentication flow, we need a call to action button on the navigation bar. In SfNav, it can be configured as follows:

<body>
    <sf-nav>

        <!-- Call to action -->
        <a slot="cta" href="#auth">Sign In</a>

     </sf-nav>
</body>

💾 ↺ Save dist/notification.html, and reload the browser.

The call to action button will be displayed in the header.

3.9 - Handle Search

Search functionality is available by default. Just subscribe to the searchClick event to capture the event when the user types something in the search box and presses Enter.

<script>
document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('search clicked ' + JSON.stringify(e.detail));})
</script>

3.10 - Review dist/index.html

After the modifications in the previous steps, the dist/index.html should look like the following:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    <!-- Integration material icons as they are used in sf-nav -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Google fonts integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    <!-- Integration the web components module -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    <!-- Integration lit and sf-nav web components module -->
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
        import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.69/sf-user-auth.js?module';
    </script>
    <style>

      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }

      .cContainer {
            margin: 10px;
            padding: 20px;
            border: dashed 1px gray;
            background-color: white;
        }

    </style>
  </head>
  <body style="margin: 0px;">
    <div id="nav-container">
        <sf-nav id="sf-nav">
            <!-- Set the brand name -->
            <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
            <!-- Set the brand logo -->
            <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>


            <!-- Page Content -->
            <div slot="content">
            </div>

            <!-- Call to action -->
            <a slot="cta" href="#auth/signin">Sign In</a>

            <!-- Copyright notice -->
            <p slot="copyright">Copyright 2022 Superflows</p>

            <!-- Set the social media links -->
            <ul slot="socialMedia">
                <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
                <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
                <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
            </ul>

        </sf-nav>
    </div>

    <script>

        //
        // Navigation bar related Javascript
        //

        // Hash map for storing paths & arguments
        var routeMap = [];

        // Menu HTML to be inserted into sf-nav
        const menu = `
            <!-- Set the main menu -->
            <ul slot="mainMenu">
                <li><a href="#about">About</a></li>
                <li class="li-solutions">
                    <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                    <ul>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">Products</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">Contact Us</a>
                    <ul>
                        <li><a href="https://instagram.com">Instagram</a></li>
                        <li><a href="https://facebook.com">Facebook</a></li>
                        <li><a href="https://youtube.com">YouTube</a></li>
                    </ul>
                </li>
            </ul>
        `;

        // What's the current path?
        function getCurrentPathName() {
            return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }

        // What are the current arguments?
        function getCurrentArgs() {
            return routeMap[getCurrentPathName() + '.html'];
        }

        // Initiate navigation bar listeners
        function initiateListeners() {
            document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('hurray ' + JSON.stringify(e.detail));})
            document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
                routeMap[e.detail.pathName] = e.detail.args;
            })
        }

        // Initiate the menu (first load)
        function insertSfNavMenu() {
            const currentInnerHTML = document.getElementsByTagName('sf-nav')[0].innerHTML;
            const newInnerHTML = currentInnerHTML + menu;
            document.getElementById('nav-container').innerHTML = '<sf-nav>'  + newInnerHTML + '</sf-nav>';
            initiateListeners();

        }

        function initPage() {

            insertSfNavMenu();

        }

        initPage();

    </script>
  </body>
</html>

🧃 Step 4 - Create The Authentication Flow Container Page

In the above section, we have created the call to action button as follows:

<!-- Call to action -->
<a slot="cta" href="#auth">Sign In</a>

This means, clicking on the sign-in button should load the auth page. Go ahead and click it.

Page not found error will be shown because we haven't yet created that page. So let us create the dist/auth.html page then with the code given below:

<div class="cContainer">
    <h1>Auth Page</h1>
    <p>This is the container page for the authentication flow</p>
</div>

💾 ↺ Save dist/auth.html, and reload the browser.

The auth page content will be loaded now.

Your folder structure should look something like this:

At this point, we are done with the initial setup of our frontend. Time to set up our backend now.

🔑 Step 5 - Create AWS Credentials

5.1 - Sign In To AWS Admin Account

5.2 - Add User > Details

Click on Add Users. In the Specify user details step write the name as SfUserAuthDemo. Let the enable console access option remain unchecked. Do not select it.

Click Next.

5.3 - Add User > Permissions

On the set permission page, choose the 'Attach policies directly' option. Permissions will then drop down below. From the list of permissions, search and attach the following permissions one by one:

AmazonAPIGatewayAdministrator
AmazonAPIGatewayInvokeFullAccess
AmazonDynamoDBFullAccess
AmazonS3FullAccess
AmazonSESFullAccess
IAMFullAccess
AWSLambda_FullAccess

Do not set the permissions boundary. Leave it untouched.

Click Next.

5.4 - Add User > Review & Create

Review and confirm that you have attached the policies properly.

Click Create User.

The user should get created successfully as shown in the image below:

5.5 - Create User Credentials

Click on the user. The user information would load. Then click on the 'Security Credentials' tab.

Since we haven't created any access keys yet, it will show 'No access keys'. Go ahead and click on the 'Create access key' button.

In step 1, choose the 'Command Line Interface (CLI)' option and check the 'I understand' checkbox.

Click Next.

In step 2, insert the text 'Access key to setup the backend for SfUserAuthDemo' in the description field.

Click on Create access key.

In step 3, retrieve your access key. Save your access key and secret in a secure location.

At this point, we have completed creating the credentials. Now let us use those credentials and set up the cloud shell.

🖥 Step 6 - Initialize The AWS Cloud Shell

Go to Cloud Shell on AWS. A browser-based shell console will open. Type the aws configure command to configure the cloud shell.

aws configure

When prompted, copy and paste the access key id and the access key secret, which you just created in the previous step.
Use any aws region of your choice. In case you are unsure, please look up the region from here.

⬇ Step 7 - Clone The Backend

Clone the backend repository into the cloud shell as shown below. You can also find the source code here.

[cloudshell-user@ip-aa-bb-cc-dd ~]$ git clone https://github.com/superflows-dev/sf-user-auth-backend.git

It should look something like this:

🔧 Step 8 - Configure The Backend Deployment Script (Test Mode)

After the clone is successful, go to the source directory.

[cloudshell-user@ip-aa-bb-cc-dd ~]$ cd sf-user-auth-backend/

Open the config file 'aws.config.sh' using vim.

[cloudshell-user@ip-aa-bb-cc-dd sf-user-auth-backend]$ vim aws.config.sh

The initial part of the script contains the 'script config section'. That needs to be configured properly. It will look something like this:

###########
# Script Config
###########

adminemail=admin@abc.com
correspondenceemail=hello@abc.com
awsregion=us-east-1
awsaccount=121212121212
apistage=test
weborigin=http://localhost:8000
appname=MyAppName
tablename=T_SF_User_Auth_test
rolename=R_SF_User_Auth_test
policyname=P_SF_User_Auth_test
functionname=F_SF_User_Auth_test
api=API_SF_User_Auth_test

###########
# Script Config Ends
###########

Following is the explanation of all the parameters in the script config section:

adminemail - It is the first user of the microservice and is considered as the administrator. Its record in the database has an admin flag.

correspondenceemail - This email address is used for communication purposes for example sending a one-time password (OTP).

Please note that a verification link will be sent to this email address, so ensure you have access to its inbox.

awsregion - This is the same region, which you have chosen in Step 6 of this tutorial.

awsaccount - This is the unique 12-digit number that identifies your aws account. You can obtain this number by clicking on your aws account name dropdown in the top right corner of the aws console.

apistage - The default stage is test. You can change it to prod and run the script again to create a separate production stage. But first, ensure that the test stage is configured and running properly. When you are in development mode, use the test stage.

weborigin - This is the web origin, where your frontend website will be deployed. For example, when you are developing on your local machine, it will be on localhost. In our current tutorial, as seen in Step 1.6, our frontend project is running on http://localhost:8080, so we will set our WebOrigin to http://localhost:8080. But when you move to production, WebOrigin should be the URL, where the frontend will be deployed.

appname - Name of your application.

tablename - This is the DynamoDB table that stores the data. You can maintain the default nomenclature, which is T_SF_User_Auth_<stage>

rolename - This is the name of the role that gets created as a part of the deployment process. You can maintain the default nomenclature, which is R_SF_User_Auth_<stage>

policyname - This is the name of the policy that gets created as a part of the deployment process. You can maintain the default nomenclature, which is P_SF_User_Auth_<stage>

functionname - This is the name of the lambda function that gets created as a part of the deployment process. You can maintain the default nomenclature, which is F_SF_User_Auth_<stage>

api - This is the name of the API that gets created as a part of the deployment process. You can maintain the default nomenclature, which is API_SF_User_Auth_<stage>

To configure, set the :

adminemail > email address, which you want to set as admin
correspondenceemail > email address, which will be used for correspondence, verification required
awsregion > region of your choice
awsaccount > your aws account id
weborigin > url where frontend is deployed (mostly localhost if developing on local machine)
appname > name of your application

Leave the rest untouched. Close the vim editor.

▶️ Step 9 - Run The Backend Deployment Script (Test Mode)

Run the backend deployment script as follows:

[cloudshell-user@ip-aa-bb-cc-dd sf-user-auth-backend]$ bash aws.config.sh

The script will run, the output will be something like this:

Hello there! I will be guiding you today to complete the aws configuration. There are a few steps involved, but you needn't worry, I will do all the heavy lifting for you 😀. In between though, I will need some inputs from you and will need you to follow my instructions. Just stay with me and I think you'll be good!

=========================
Step 1: SES Configuration
=========================

>> Correspondence email: suxxxxxxxxxx@gmail.com

💬 Email identity suxxxxxxxxxx@gmail.com creation SUCCESSFUL  ✓ : "EMAIL_ADDRESS"

⏳ Checking the status of Email identity suxxxxxxxxxx@gmail.com

💬 SES: Email identity suxxxxxxxxxx@gmail.com not yet ready for sending  ⚠  emails

>> Instruction
💬 Verification email has been sent to suxxxxxxxxxx@gmail.com, verify it

>> Next Steps
💬 Do what the instruction says, then come back here and run me again

Exiting for now...

In the first execution, the script adds the correspondence email in aws and triggers the verification email. Go to the inbox of your correspondence email. You will have received an email, which will look something like this:

Click on the verification link. AWS will verify it and forward you to the success page.

After the correspondence email is verified successfully, run the backend deployment script again:

[cloudshell-user@ip-aa-bb-cc-dd sf-user-auth-backend]$ bash aws.config.sh

The script will run and deploy the backend. For the sake of brevity, I am not posting the entire output of the script here. If the backend deployment is successful, the last few lines of the output will look something like this:


⏳ Deploying API Gateway function

💬 Auth deployment creation SUCCESSFUL  ✓ : "2asdwp"
Script Ended...

☑ Step 10 - Double-check The Backend Deployment (Test Mode)

10.1 - Check API Gateway

Go to API Gateway in the AWS console. You will see the API 'API_SF_User_Auth_test' created.

Click on it. Confirm that you are seeing 6 resources - refresh, resend, signin, signup, validate & verify. It should look something like this:

10.2 - Check IAM

Go to IAM > Access Management > Policies in the AWS console. You will see the policy 'P_SF_User_Auth_test' created.

Go to IAM > Access Management > Roles in the AWS console. You will see the role 'R_SF_User_Auth_test' created.

10.3 - Check Lambda Function

Go to Lambda Functions in the AWS console. You will see the function 'F_SF_User_Auth_test' created.

10.4 - Check DynamoDB

Go to the DynamoDB in the AWS console. Click on Tables. You will see the table 'T_SF_User_Auth_test' created.

Click on the table 'T_SF_User_Auth_test'. Then click on Explore Items. You will see that one record with the admin email that you provided, is created and its admin flag is set to true.

Arriving at this point, we can conclude that the backend has been set up and configured properly. It is now time to go back and work on the frontend.

🚪 Step 11 - Create The Authentication Frontend

11.1 - Update dist/auth.html with template

Update dist/auth.html with the following code. This piece of code:

Creates a container div
Includes the SfUserAuth component (which is already imported in dist/index.html)

<div class="cContainer">
    <sf-user-auth id="sf_auth" appName="Superflows" apiId="<api-id>" logo="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png">
        <div slot="privacy">
            <h1>Privacy</h1>
            <p>Privacy policy goes here
        </div>
        <div slot="terms">
            <h1>Terms</h1>
            <p>Terms & Conditions go here
        </div>
    </sf-user-auth>
</div>
<script>
    document.querySelector('#sf_auth').onArgs = getCurrentArgs;
</script>

💾 ↺ Save dist/auth.html, and reload the browser.

Click on the Sign In Button in the navigation bar. You will be redirected to the Sign In page of the authentication microservice. This indicates that the SfUserAuth component has been integrated properly in the frontend.

11.2 - Handle Sign In And Sign Out Events

SfUserAuth triggers the following events:

accessTokenReceived - after successful sign-in, this event is triggered. The payload of this event contains the access token, which can be used for further operations.
signedOut - after successful sign-out

It is the responsibility of the enclosing HTML app to subscribe to these events and do the needful handling.

When the SfUserAuth module triggers the accessTokenReceived event, the access token obtained from its payload should be stored in a memory variable. It should never be stored in permanent storage such as cookies, or local storage. If the access token expires, control should be transferred back to the SfUserAuth component. It maintains a refresh token internally and issues a new access token using it.

After every hard refresh, it is the responsibility of the HTML app to transfer the control to the SfUserAuth module and obtain the access token. If the access token is obtained successfully, sign-in is valid and the navigation bar should be updated by showing the profile image and the profile menu. If the access token is expired and cannot be refreshed even by the refresh token, it declines to provide the access token to the HTML app. It triggers the signedOut event instead. Should such a scenario arise, the HTML app should implement its sign-out protocol and update its navigation bar and hide the profile section.

Modified dist/index.html:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    <!-- Integration material icons as they are used in sf-nav -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Google fonts integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    <!-- Integration the web components module -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    <!-- Integration lit and sf-nav web components module -->
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
        import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.69/sf-user-auth.js?module';
    </script>
    <style>

      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }

      .cContainer {
            margin: 10px;
            padding: 20px;
            border: dashed 1px gray;
            background-color: white;
        }

    </style>
  </head>
  <body style="margin: 0px;">
    <div id="nav-container">
        <sf-nav id="sf-nav">
            <!-- Set the brand name -->
            <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
            <!-- Set the brand logo -->
            <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>


            <!-- Page Content -->
            <div slot="content">
            </div>

            <!-- Call to action -->
            <a slot="cta" href="#auth/signin">Sign In</a>

            <!-- Copyright notice -->
            <p slot="copyright">Copyright 2022 Superflows</p>

            <!-- Set the social media links -->
            <ul slot="socialMedia">
                <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
                <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
                <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
            </ul>

        </sf-nav>
    </div>

    <script>

        //
        // Navigation bar related Javascript
        //

        // Hash map for storing paths & arguments
        var routeMap = [];

        // Menu HTML to be inserted into sf-nav
        const menu = `
            <!-- Set the main menu -->
            <ul slot="mainMenu">
                <li><a href="#about">About</a></li>
                <li class="li-solutions">
                    <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                    <ul>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">Products</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">Contact Us</a>
                    <ul>
                        <li><a href="https://instagram.com">Instagram</a></li>
                        <li><a href="https://facebook.com">Facebook</a></li>
                        <li><a href="https://youtube.com">YouTube</a></li>
                    </ul>
                </li>
            </ul>
        `;

        // Profile menu HTML to be inserted into sf-nav
        const profileMenu = `
            <ul id="profile-menu" slot="profileMenu">
                <li>
                    <a href="#auth/signout">Sign Out</a>
                </li>
            </ul>
        `;

        // Profile image HTML to be inserted into sf-nav
        const profileImg = `
            <img id="profile-img" alt="profile" slot="profilePicture" src="https://superflows-images.s3.ap-south-1.amazonaws.com/user.png" />
        `;

        // What's the current path?
        function getCurrentPathName() {
            return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }

        // What are the current arguments?
        function getCurrentArgs() {
            return routeMap[getCurrentPathName() + '.html'];
        }

        // Initiate navigation bar listeners
        function initiateListeners() {
            document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('hurray ' + JSON.stringify(e.detail));})
            document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
                routeMap[e.detail.pathName] = e.detail.args;
            })
        }

        // 
        // Handling the authentication
        // 

        // Initiate the menu (first load)
        function insertSfNavMenu() {
            const currentInnerHTML = document.getElementsByTagName('sf-nav')[0].innerHTML;
            const newInnerHTML = currentInnerHTML + menu;
            document.getElementById('nav-container').innerHTML = '<sf-nav>'  + newInnerHTML + '</sf-nav>';
            initiateListeners();

        }

        // Update the navigation bar after sign in successful
        function insertSignInSfNavMenu() {

            window.location.hash='#home';

            setTimeout(() => {
                const currentInnerHTML = document.getElementsByTagName('sf-nav')[0].innerHTML;
                console.log(currentInnerHTML);
                const newInnerHTML = currentInnerHTML + (currentInnerHTML.indexOf('profilePicture') < 0 ? profileImg : "") + menu + profileMenu;
                document.getElementById('nav-container').innerHTML = '<sf-nav>'  + newInnerHTML + '</sf-nav>';
                initiateListeners();    
            }, 500);

        }

        // Update the navigation bar after sign out successful
        function insertSignOutSfNavMenu() {

            window.location.hash='#home';

            setTimeout(() => {

                if(document.getElementById('profile-img') != null) {
                    document.getElementById('profile-img').outerHTML = '';
                    const currentInnerHTML = document.getElementsByTagName('sf-nav')[0].innerHTML;
                    const newInnerHTML = currentInnerHTML + menu;
                    document.getElementById('nav-container').innerHTML = '<sf-nav>'  + newInnerHTML + '</sf-nav>';
                    initiateListeners();
                }

            }, 500);

        }

        function initPage() {

            insertSfNavMenu();
            window.location.hash = '#auth';

        }

        initPage();

    </script>
  </body>
</html>

Modified dist/auth.html

<div class="cContainer">
    <sf-user-auth id="sf_auth" appName="Superflows" apiId="bdbdff3oa9" logo="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png">
        <div slot="privacy">
            <h1>Privacy</h1>
            <p>Privacy policy goes here
        </div>
        <div slot="terms">
            <h1>Terms</h1>
            <p>Terms & Conditions go here
        </div>
    </sf-user-auth>
</div>
<script>

    var accessToken;

    document.querySelector('#sf_auth').onArgs = getCurrentArgs;
    document.getElementsByTagName('sf-user-auth')[0].addEventListener('accessTokenReceived', (e) => {
        accessToken = e.detail.accessToken.token;
        insertSignInSfNavMenu();
        //console.log('setting hash');

    })
    document.getElementsByTagName('sf-user-auth')[0].addEventListener('signedOut', (e) => {
        insertSignOutSfNavMenu();
    })
</script>

11.3 - Connect The Backend To The Frontend

We still haven't connected the backend to the frontend. Go to AWS API Gateway and note the API ID of 'API_SF_User_Auth_test'.

Copy this API ID and paste it into the apiId property of the sf-user-auth component.

This connects the SfUserAuth component, the frontend of the microservice to the API Gateway, which is the backend of the microservice.

11.4 - Sanity Check

Reload the browser.

Click on the sign-in button in the navigation bar. The sign-in page of the auth module will load. Enter any random email address in the email input and submit. Since that email does not exist in the database, 'Account does not exist!' error will be thrown. If this error is thrown, you can safely assume that the frontend-backend connection has been done properly and the microservice is ready to be used in test mode.

Something like this should be shown:

📧 Step 12 - Receiving OTPs During Testing

AWS's Simple Email Service (SES) is used for sending one-time passwords via emails. SES works in two modes - (1) Sandbox (used for testing) and (2) Production. In the sandbox mode, SES only delivers emails to verified email addresses. So all those email addresses, which you'll be using for receiving OTPs during testing, need to be manually added into SES and then subsequently verified as well.

Go to AWS > SES. Something like this should show up:

Click on the Left sidebar> Configuration > Verified identities.

A list of verified emails would show up. It will most probably contain one verified identity, your correspondence email address, which you verified in Step 9.

Click on 'Create identity'.

The Create identity page will open up. Choose 'Email address' as the option and enter the email address on which, you wish to receive the OTP, during testing.

Then click the 'Create identity' button. Post this, an email will be sent to the email address with a verification link. Click on it and complete the verification process.

Repeat this process for all the other email addresses, you wish to use during testing.

🧍 Step 13 - Test The Sign-Up Step

You are already on the sign-in page at the end of Step 11. Let us start by creating a new account. Click on the Sign-Up link at the bottom. It will take you to the Sign Up page.

Fill up the sign-up form. While filling up, you will notice that the client-side and server-side error handling has already been implemented.

Tip

Please use the email address, you verified in step 12 for testing the sign-up flow. Since your AWS SES is in development mode at the moment, it is capable of delivering emails to only verified identities.

You can also try using the admin email address, you provided in Step 8. It will throw an error as it already exists in the database.

Press submit. If all goes well, a new account for that email address will be created in the backend. A one-time password will be emailed and the user will be taken to the OTP page.

🔑 Step 14 - Test The OTP Page

The OTP page will look something like this:

The OTP email will look something like this:

Enter the OTP and press submit. If the entered OTP is valid and correct, the home page will be loaded. Pay particular attention to the navigation bar, where the profile section has been added.

🔑 Step 15 - Test The Sign-Out Flow

Click on the profile picture dropdown. You will see the sign-out option as a part of the profile menu:

Click on Sign Out and confirm that it indeed signs out.

⚙ Step 16 - SfUserAuth Microservice APIs

The authentication microservice provides 6 API endpoints:

signin - triggers and email with OTP if email already exists
signup - if the email doesn't exist, create an account and then trigger an email with OTP
verify - verifies the OTP, returns the refresh token if successful
validate - validates the access token
refresh - generates a new access token from the refresh token
resend - resends the OTP on email

Click this link to understand the API documentation.

🏊 Step 17 - A Deeper Dive

To understand the finer transactions of the SfUserAuth microservice, please study the sequence diagram given below.

The diagram details the happy flow of the sign-in functionality. From sign-in initiation to the reception of the access token.

Step 18 - Authenticating with SfUserAuth From Your Application Backend

After you receive the access token, you should store it in your main memory and use it in your application APIs.
Treat the SfUserAuth microservice as your authentication service.
With every API request to your application backend, send the email and the accessToken.
For API requests that need authentication, your application backend can extract the email and the access token from the requests and then authenticate them with the SfUserAuth microservice backend directly, by using the /validate API endpoint. The API documentation is given here.

🏭 Step 19 - Moving To Production

Firstly, congratulations on reaching this step! 🏆

Moving to production now is easier than you can imagine!

19.1 - Deploy The Production Backend

Go to step 8. Change the backend deployment script as follows:

###########
# Script Config
###########

adminemail=<your admin email from production>
correspondenceemail=<your correspondence email from production>
awsregion=<your aws region for production>
awsaccount=<your aws account>
apistage=prod
weborigin=<your frontend deployment url for production>
appname=<your app name for production>
tablename=T_SF_User_Auth_prod
rolename=R_SF_User_Auth_prod
policyname=P_SF_User_Auth_prod
functionname=F_SF_User_Auth_prod
api=API_SF_User_Auth_prod

###########
# Script Config Ends
###########

Complete steps 8, 9 and 10. Your production backend will be ready. You will have a new API ID for production.

At this step, you will essentially have two parallel deployments. The first deployment is your test deployment and the second deployment will be your production deployment.

19.2 - Connect The Production Frontend To The Production Backend

In your production-code/dist/auth.html, just replace the apiId of the SfUserAuth component with the production API ID, you received at the end of step 18.1.

<sf-user-auth id="sf_auth" appName="Superflows" apiId="<production-api-id>" logo="<app-logo>">
        <div slot="privacy">
            <h1>Privacy</h1>
            <p>Privacy policy goes here
        </div>
        <div slot="terms">
            <h1>Terms</h1>
            <p>Terms & Conditions go here
        </div>
    </sf-user-auth>

19.3 - Switch AWS SES To Production

As depicted in Step 12, the AWS SES service, which is used for sending emails, is by default in sandbox mode. This means that you can send emails to only verified identities.

Once you move to production, you will need unrestricted email sending. To enable that, go to AWS > SES, click on 'Request Production Access' and complete the steps to enable production access.

Congratulations! You are in production. 🍺 Cheers!

Conclusion

This helps you set up the authentication microservice on an 'auto-scalable' and 'serverless' AWS backend.
Backend coding know-how is not required. Even a single junior frontend developer can make things happen.

Resources

Adding some resources below for your convenience.

How To Implement A Single Page Modular App Architecture Using Pure HTML, CSS, Javascript

Hrushi M — Fri, 03 Feb 2023 14:39:34 +0000

🏆 What will you learn in this tutorial?

Single page application fetches and loads the main UI skeleton into the browser only once, during the first fetch. And thereafter, loads the subsequent UI modules dynamically without re-fetching as the user interacts with the app.

Look at the example given below. It is a simple single-page application developed using purely HTML, CSS and Javascript. In this tutorial, you are going to learn how to implement it.

Open Example In New Tab

💡 What's New In This Tutorial?

Front-end frameworks such as React, Angular, Vue, etc. exist today that enable the development of single-page applications. But the development of single-page applications using purely HTML, CSS and Javascript is still not very straightforward.

In this tutorial, you will learn about SfNav, a web component, which allows you to architect HTML applications in a modular fashion. It paves the way for developers to choose just HTML, CSS and Javascript for writing complex apps with a scalable, maintainable and testable codebase.

⚠ Before You Begin

The following are the pre-requisites for this tutorial:

Familiarity with Web Development - You need to be familiar with the basic concepts of HTML, CSS & Javascript. You need not be an expert developer, but basic knowledge is necessary. W3 Schools Roadmap could be a good starting point for this.

NPM Installation - In this example, we will use an NPM-based web server. So to follow this tutorial properly, I will recommend that you have npm installed on your development machine. Once you get the hang of it, you can also try the same method on other web servers, no problem!

Editor - You will also need a good web editor. I like VS Code. You can use any editor of your choice.

🍽 Step 1 - Project Setup

1.1 Project Directory

Create a new folder on your machine for this task. I called it SfNav-Demo. You can name it as you want.

1.2 Initialize NPM

npm init

Just accept the default values, and keep pressing ENTER until the initialization completes and the package.json file is generated. Your project will now have only one file, namely package.json.

1.2 Create the dist/ folder

Create a folder to store all the html files. I called it "dist/".

1.3 Install the HTTP-server packages

npm install connect serve-static

1.4 Create index.js

Create index.js, to hold the code for the HTTP-server. Paste the code given below in index.js.

var connect = require('connect');
var serveStatic = require('serve-static');

connect()
     .use(serveStatic('./dist'))
     .listen(8080, () => console.log('Server running on 8080...'));

Your folder structure should look like this:

1.5 Start the HTTP-server

Start the web server using the below command

node index.js

1.6 Create dist/index.html

Create index.html file in the dist folder and initialize it with the following code:

<html>
hello sfnav
</html>

Go back to the browser and refresh it. Confirm that the HTTP-server now serves the index.html page.

At this point, the basic project setup is complete. Let us move on to the next steps.

💀 Step 2 - Create The HTML App Skeleton

The code of the HTML skeleton is given below. Copy and paste it into your dist/index.html.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    <!-- Integration material icons as they are used in sf-nav -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Google fonts integration -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    <!-- Integration the web components module -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    <!-- Integration lit and sf-nav web components module -->
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
    </script>
    <style>

      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }

    </style>
  </head>
  <body style="margin: 0px;">
    <sf-nav>

      <!-- Set the brand name -->
      <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
      <!-- Set the brand logo -->
      <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

    </sf-nav>
  </body>
</html>

This skeleton code does the following:

It sets up the viewport
It includes the material icons package, which is required by the SfNav web component
It includes fonts, although you can use any fonts of your choice
It includes the web component loader script
It includes the Lit library. SfNav component depends on Lit, hence this inclusion is necessary
It includes the SfNav web component library
It includes a style block that - (1) Sets some basic styling to the document body and (2) Ensures that the SfNav component will show up only after it is defined properly
It then includes/renders the SfNav component in the body HTML with a brand name and brand image.

💾 ↺ Save dist/index.html, and reload the browser.

You will see that a bare-bones navigation component has loaded which only contains the brand name and brand image. The point to note is that it contains both the header part and the footer part.

⥣ Step 3 - Setup Routing

3.1 Understanding Links

SfNav recognizes routes that are prefixed with hash. For example, in the file dist/index.html, the brand name and the brand image are linked to #home, which essentially means that the component home.html will be loaded if the user clicks on either of the brand name and the brand image links.

3.2 Setup Route Container

Create a page content slot in the sf-nav block as shown below. This container sits between the header and footer and dynamically displays the page content as the user navigates across pages.

<sf-nav>

        <!-- Set the brand name -->
        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        <!-- Set the brand logo -->
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

        <!-- Page Content -->
        <div slot="content">
        </div>

</sf-nav>

3.3 Setup Parameter Passing

To enable parameter pass-down during routing, include the following Javascript code block in the sf-nav block. This code block:

Listens to the routeChange event from SfNav and updates the routeMap associative array with the new route and its parameters, every time the routeChange event is fired.
Exposes two functions - (1) getCurrentPathname and (2) getCurrentArgs, which can be used to obtain the current location and the current parameters.

<body>
    <sf-nav>
<!-- Set the brand name -->
        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        <!-- Set the brand logo -->
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
        <!-- Page Content -->
        <div slot="content">
        </div>
    </sf-nav>

    <script>
        var routeMap = [];

        function getCurrentPathName() {
          return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }
        function getCurrentArgs() {
          return routeMap[getCurrentPathName() + '.html'];
        }

        document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
          routeMap[e.detail.pathName] = e.detail.args;
        })
    </script>

</body>

3.4 Confirm That Routing Works

At this point, the routing configuration is complete.

💾 ↺ Save dist/index.html, and reload the browser.

You will observe the following:

The header and the Footer are now separated with a content block in between.
SfNav now throws the 'Could not find home.html' message. Don't worry, this is perfectly fine because we haven't yet created the home.html file.

3.5 Create dist/home.html

Create a new file dist/home.html with the below HTML:

<div class="cContainer">
    <h1>Home Page</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

💾 ↺ Save dist/home.html, and reload the browser.

The home page content will now load.

You will observe that the content loads properly. Let us style it a bit, so that it looks a bit nicer. Add the following styles in the style block of dist/index.html:

<head>
    <style>
        <!-- other styles -->

        .cContainer {
            margin: 10px;
            padding: 20px;
            border: dash 1px gray;
        }
    </style>
</head>

💾 ↺ Save dist/index.html, and reload the browser.

This looks good for now. We can surmise now that routing is working normally. Let us move ahead.

🍔 Step 4 - Setup Main Menu

<body>
    <sf-nav>
        <!-- Set the main menu -->
        <ul slot="mainMenu">
            <li><a href="#about">About</a></li>
            <li class="li-solutions">
                <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                <ul>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Contact Us</a>
                <ul>
                    <li><a href="https://instagram.com">Instagram</a></li>
                    <li><a href="https://facebook.com">Facebook</a></li>
                    <li><a href="https://youtube.com">YouTube</a></li>
                </ul>
            </li>
        </ul>
    </sf-nav>
</body>

💾 ↺ Save dist/index.html, and reload the browser.

If you click on any menu items with internal links such as services, products, you will observe that SfNav throws the file not found message. This is because we haven't yet created these files.

📝 Quick Task

Go ahead and create services.html and products.html with any content of your choice and observe how it is rendered. Drop your observations in the comments section!

🔎 Step 5 - Setup Search

Search functionality is available by default. Just subscribe to the searchClick event to capture the event when the user types something in the search box and presses Enter.

<script>
document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('search clicked ' + JSON.stringify(e.detail));})
</script>

🦜 Step 6 - Setup Social Media Links

Social media links can be configured using an unordered list as well. Below is an example:

<body>
    <sf-nav>

        <!-- Set the social media links -->
        <ul slot="socialMedia">
            <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
            <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
            <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
        </ul>

    </sf-nav>
</body>

💾 ↺ Save dist/index.html, and reload the browser.

🔔 Step 7 - Setup Notifications

7.1 HTML Configuration

The notifications section has three parts - (1) Unread notifications, (2) Read notifications and (3) View-all link. Configuration is shown below:

<body>
    <sf-nav>

        <!-- Set the notifications -->
        <ul slot="unreadNotifications">
            <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>
        <ul slot="readNotifications">
            <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>

    </sf-nav>
</body>

💾 ↺ Save dist/index.html, and reload the browser.

If you try clicking on any notification, you will see the file not found message. This is fine because we haven't yet created dist/notification.html. Shall we do that now?

7.2 Create dist/notification.html

Create a new file dist/notification.html. Copy and paste the HTML code given below into it.

<div class="cContainer">
    <h1>Notification Page</h1>
    <h2></h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script>
    document.getElementsByClassName('cContainer')[0].children[1].innerHTML = 'Arguments: ' + JSON.stringify(getCurrentArgs())
</script>

💾 ↺ Save dist/notification.html, and reload the browser.

Go ahead, and try clicking on any of the notifications. You will observe the following:

The notification page will render.
The URL parameters or arguments such as #notification/1 or #notification/2 will be passed down to the notification component and rendered as well.

Quick Note

This is essentially routing at work where the parameters from the browser address bar are fed to the notification component.

© Step 8 - Copyright Notice

<body>
    <sf-nav>

        <!-- Copyright notice -->
        <p slot="copyright">Copyright 2022 Superflows</p>

    </sf-nav>
</body>

💾 ↺ Save dist/notification.html, and reload the browser.

The copyright notice will be displayed in the footer.

🕺 Step 9 - Setup Call To Action Button

Most navbars have a call to action button. In SfNav, it can be configured as follows:

<a slot="cta" href="#login">Sign In</a>

💾 ↺ Save dist/notification.html, and reload the browser.

The call to action button will be displayed in the header.

👨👩 Step 10 - Setup User Profile

The user profile section contains two parts - (1) The profile picture toggle and (2) The profile menu. Both parts can be configured as follows:

<body>
    <sf-nav>

        <!-- Profile picture -->
        <img alt="profile" slot="profilePicture" src="https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg" />

        <!-- Set the profile menu -->
        <ul slot="profileMenu">
            <li><a href="#settings">My Profile</a></li>
            <li>
                <a href="javascript:void(0);">Settings</a>
                <ul>
                    <li><a href="#settings_data">Data & Privacy</a></li>
                    <li><a href="#settings_notifications">Notifications</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Support</a>
                <ul>
                    <li><a href="#ticket">Create Ticket</a></li>
                    <li><a href="#chat">Chat With Us</a></li>
                </ul>
            </li>
            <li><a href="#signout">Sign Out</a></li>
        </ul>

    </sf-nav>
</body>

💾 ↺ Save dist/notification.html, and reload the browser.

🔴🟢🔵 Step 11 - Theme The User Interface

Let us now modify the colours, to make the UI more attractive and customizable to your needs. For the sake of this tutorial, we have used some colours, but you are free to choose any colours.

Add the below-given styles to the style block of dist/index.html.

<style>

    sf-nav {
        --nav-background-color: rgb(4, 135, 205);
        --nav-color: #fff;
        --notif-background-color: rgb(4, 135, 205);
        --notif-color: #fff;
        --menu-background-color: rgb(49, 161, 222);
        --menu-color: #fff;
        --footer-background-color: rgb(167, 147, 60);
        --footer-color: #fff;
    }

</style>

💾 ↺ Save dist/notification.html, and reload the browser.

Conclusion

That is it then! I have shown you how to create a single-page web application with a modular code architecture using SfNav, a web component provided by Superflows. If you have any questions, do not hesitate to drop a comment below and I would be happy to answer.

Please find a video of the same tutorial below:

Resources

Documentation

Read

Demo Project

View Demo

YouTube Channel

View Channel

Join The Community

Join Now

What I learnt in 10 years as an entrepreneur

Hrushi M — Thu, 08 Dec 2022 10:48:40 +0000

Past 11 years at MeGo changed my life. After coming back to India from US in search of becoming an entrepreneur, I definitely found more than what I was expecting. Now, when I am moving on from MeGo to start a new journey, I thought I could pen down some of my learnings here.

I found that the journey of entrepreneurship is not as romantic as they say. But it is definitely more fulfilling and more rewarding than what I had imagined!

You find support in places, people and situations you never expect. You also experience let-downs and betrayals from corners, which you thought were your safe places. But the thing I learnt is you should believe in yourself and keep powering through.

I found that failure is the norm, at least in the initial few years, but it is also a ladder, to success. Continuous struggle pulls you down, you suffer, but if you keep trying, it keeps making you stronger.

I found that the journey of an entrepreneur is a continuously changing one and also quite exploratory. There is absolutely no room for any comfort zone. I learnt that the best way to manage the uncertainty, is to make friends with it, embrace it.

I had thought that entrepreneurship is about taking big risks. But I found that it is more important to know when to take the right risks and when not to take the wrong risks.

I had thought that as an entrepreneur, you being the leader, can shape the life of so many people, your employees. It is true no doubt, but it is only half the story. Your employees, subordinates and colleagues also shape your life, as an entrepreneur. They shape your life when they work exceedingly hard for you, day-in day-out, to solve difficult problems for you; when they stand with the company during tougher times; when they reject better offers from outside to keep working with you; all because they believe in something and that they have seen that something in you.

"Entrepreneurship is about passion, not money", was what I had read, heard, but what I found and experienced was there is really no passion without money. May not be true in very early stages, but steady and predictable cashflow is the most important thing after a startup starts hiring regularly. But later in my journey, I felt that money is just a tool. A very crucial tool, no doubt, but that's about it. More important for an entrepreneur is the driving force, or passion, something, which makes you push just that one bit harder than everyone else, everyday. Money comes and goes, passion stays with you as long as you believe!

What kind of entrepreneur are you? Are you good at spotting problems? Good at designing creative solutions? Good at managing people? Good at engineering / technical / scientific aspects? Good at selling? Good at administration? Good at jugaad? I found that in the entrepreneurial journey, at some point in time, one needs to find an answer to this question. As the company grows, people change, customers change, work changes and roles change. It is important that the entrepreneur keeps assuming the right role at the right time in the company. Being mindful of one's limitations is also extremely important, I found out. If not, unrealistic decisions are taken leading to disastrous consequences. Limitations could come from any aspect of life - one's professional skills & capabilities, geographic location, situations in personal & family life, anything. Being an entrepreneur is also about being in tune with one's life.

Lastly, I also found that entrepreneurship, or running your business, is only one part of your life. It need not be an all-consuming thing. I'd even go to the extent of saying that making it a life-consuming thing is not sustainable, at all! It is extremely important to make time for your family & friends, to go on vacations, to eat well, to exercise everyday and to sleep well. Hard-work doesn't guarantee entrepreneurial success, smart work does. For staying smart one needs to stay fresh, and of course stay alive!

How to Add an Announcement Banner to your React Navbar

Hrushi M — Sat, 03 Dec 2022 08:01:25 +0000

Introduction

This article shows you how to add an announcement banner to your react navbar. It shows you how to show / hide the banner, how to customize the texts, how to listen to handle callbacks, how to do further styling and how to inject your own components.

Prerequisites

This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customised your menu, have added the search input, have configured the sign in button, have understood how to insert user profile information into the navbar, have seen how to add a back button to the navbar and have also understood how to add notifications to it. This tutorial takes it forward from there.

Step 1 - Display the Banner Section

By default banner is not visible. To show it, set the showBanner prop to true. You will see that a default banner is now visible. It has four customizable elements - (1) container, (2) text message, (3) call-to-action button and (4) dismiss button.

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true}/>
        </div>
    );
}

It renders as follows:

Step 2 - Customize the Banner Text Message

To change the banner text, set the intended string value to the bannerText property. For mobile screens, a separate (optional) prop bannerTextMobile has also been provided, which you can use as well!

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} bannerText={"30% OFF On Select Products 💰"} bannerTextMobile={"30% OFF 💰"} />
        </div>
    );
}

It renders as follows:

Step 3 - Customize the Call-to-action Button

To change the text of the call-to-action button, set the intended string value to the bannerCta property. For mobile screens, a separate (optional) prop bannerCtaMobile has also been provided, which you can use as well!

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} bannerText={"30% Summer Discount 💰"} bannerTextMobile={"30% OFF 💰"} bannerCta={"Buy Now"} bannerCtaMobile={"Buy"} />
        </div>
    );
}

It renders as follows:

Step 4- Handle the Call-to-action Callback

You can subscribe to the onBannerCtaPressed prop to listen to get a callback after the user clicks on the call-to-action button. As follows:

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} showBanner={true} bannerText={"30% Summer Discount 💰"} bannerTextMobile={"30% OFF 💰"} bannerCta={"Buy Now"} bannerCtaMobile={"Buy"} onBannerCtaPressed={() => {alert('clicked on cta');}} />
        </div>
    );
}

Step 5 - Show / Hide the Dismiss Button

By default, the dismiss button is visible. When the user clicks on it, the banner gets dismissed (hidden). You can also choose to make the banner permanent, by hiding the dismiss button. Set the bannerEnableDismiss prop to false.

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} bannerEnableDismiss={false} />
        </div>
    );
}

It renders as follows:

Step 5 - Advanced Customization

If you need full control over the look and feel of the banner section, you can utilize inline css. Just use any of the banner related style properties. Showing an example below:

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} showBanner={true} bannerText={"30% Summer Discount 💰"} bannerTextMobile={"30% OFF 💰"} bannerCta={"Buy Now"} bannerCtaMobile={"Buy"} stylesBannerContainer={{backgroundColor: 'black', paddingTop: '10px', paddingBottom: '10px'}} stylesBannerCta={{backgroundColor: 'white', color: 'black', fontSize: '120%'}} stylesBannerText={{fontSize: '120%'}} />
        </div>
    );
}

It renders as follows:

Step 6 - Inject Your Custom Component

You can also replace the existing banner with your own custom component. Simply assign your custom component to the bannerComponent prop. You can also set an optional custom component differently for mobiles, use the bannerComponentMobile prop. An example is shown below:

function Apps(props) {

    return (
        <div>
            <SfNav showBanner={true} bannerComponent={<div style={{backgroundColor: 'black', height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white'}}><div>We will be down for maintenance tomorrow 13:00 - 13:30 hrs</div><img src="https://www.route66sodas.com/wp-content/uploads/2019/01/Alert.gif" style={{width: '30px', height: '30px', marginBottom: '5px', marginLeft: '10px'}}/></div>} bannerComponentMobile={<div style={{backgroundColor: 'black', height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white'}}><div>Maintenance tomorrow 13:00 hrs</div><img src="https://www.route66sodas.com/wp-content/uploads/2019/01/Alert.gif" style={{width: '30px', height: '30px', marginBottom: '5px', marginLeft: '10px'}}/></div>} />
        </div>
    );
}

It renders as follows:

Reference Links

Documentation

This link

Demo Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

Conclusion

You have already seen how to get started with the navigation bar, how to insert brand information into it, how to customise the menu and now, how to configure the search input, how to use the sign in button, how to insert profile information into it, how to add a back button, how to add notifications to it and now, how to add an announcement banner.

How to Add Notifications to your React Navigation bar

Hrushi M — Thu, 24 Nov 2022 11:31:59 +0000

Introduction

This article shows you how to add notifications your react navbar. It shows you how to show / hide the notifications feature, how to set recent notifications, how to change the bell icon, how to listen to callbacks and how to do further styling.

Prerequisites

This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customised your menu, have added the search input, have configured the sign in button, have understood how to insert user profile information into the navbar and have seen how to add a back button to the navbar. This tutorial takes it forward from there.

Step 1 - Display the Notification Section

By default notifications are visible. To show them, set the showNotification prop to true. You will see that the notification bell is now visible. Go ahead, click on it! A notification list will drop down. This is the default list, you can of course change it.

function Apps(props) {

    return (
        <div>
            <SfNav />
            <br />
            <SfNav showNotification={true}/>
        </div>
    );
}

It renders as follows:

Step 2 - Customize the Notification List

The notification list can be customized by passing a json array to the notificationList prop. Look at the example below.

function Apps(props) {

    return (
        <div>
            <SfNav showNotification={true} notificationList={[
                {id: 1, title: "New Follower!", description: 'Ram Joshi has started following you', timestampReceived: "2 days ago", read: false},
                {id: 2, title: "Richa reacted to your comment", description: 'Thanks I feel the same', timestampReceived: "5 days ago", read: true}]} />
        </div>
    );
}

It renders as follows:

Step 3 - Change the Bell Icon

The default bell icon is from the unicode character set. You can use any icon and icon library of your choice. To change the bell icon, pass your icon object to the notificationIcon prop.

import {Bell} from 'react-bootstrap-icons';

function Apps(props) {

    return (
        <div>
            <SfNav showNotification={true} notificationIcon={<Bell style={{marginTop: '5px'}}/>} />
        </div>
    );
}

It renders as follows:

New Notification Indication

If the notification list contains an unread notification, a red badge notification indicator will be shown on the notification icon. If all the notifications are read, it is not shown.

Step 4 - Listen to the Notification Click Callback

Subscribe to the onNotificationClicked prop to listen to the notification click events.

function Apps(props) {

    return (
        <div>
            <SfNav showNotification={true} onNotificationClicked={(value) => {alert('Clicked on notification: ' + value.title)}} />
        </div>
    );
}

Step 5 - Listen to the View All Click Callback

Subscribe to the onViewAllClicked prop to listen to the view all button press event.

function Apps(props) {

    return (
        <div>
            <SfNav showNotification={true} onViewAllNotificationsClicked={() => {alert('On View All Clicked')}} />
        </div>
    );
}

Step 6 - Styling

If you are interested in obtaining complete control over the look and feel, you already have it. You can completely override the base css properties of the notification elements according to your requirements. Showing you an example below.

function Apps(props) {

    return (
        <div>
            <SfNav 
                showNotification={true} 
                onViewAllNotificationsClicked={() => {alert('On View All Clicked')}} 
                notificationList={[
                    {id: 1, title: "New Follower!", description: 'Ram Joshi has started following you', timestampReceived: "2 days ago", read: false},
                    {id: 2, title: "Richa reacted to your comment", description: 'Thanks I feel the same', timestampReceived: "5 days ago", read: true}]}
                stylesNotificationIcon={{backgroundColor: '#ddd', color: 'black', height: '30px', width: '30px', justifyContent: 'center', borderRadius: '15px'}}
                stylesNotificationUnRead={{backgroundColor: 'black'}}
                stylesNotificationViewAll={{color: 'black'}}
                notificationIcon={<Bell style={{marginTop: '5px'}} />}  />
        </div>
    );
}

It renders as follows:

Reference Links

Documentation

This link

Example Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

Conclusion

This article shows you how to show the notifications section, customize the icon & notification list, listen to callbacks and how to style it.

How to Add a Back Button to your React Navbar

Hrushi M — Wed, 16 Nov 2022 05:23:42 +0000

Introduction

This article shows you how to add a back button to your react navbar. It shows you how to show / hide the back button, how to change its icon, how to handle the callback and then how to do further styling.

Prerequisites

This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customised your menu, have added the search input, have configured the sign in button and have also understood how to insert user profile information into the navbar. This tutorial takes it forward from there.

Step 1 - Display the Back Button

By default, the menu button is shown and the back button is not shown. To show the back button, set the showBack prop to true. Please note that after the back button is displayed, the menu button is not shown. Only one of these two buttons can be shown at one time. Usually the back button on the navbar will be required on the inner screens, where the menu, search and sign in button may also not be required. You can remove them as well.

function Apps(props) {

    return (
        <div>
            <div>
                <SfNav 
                  showBack={true} 
                  menu={[]} 
                  showSearch={false} 
                  showSignIn={false} 
                />
            </div>
        </div>
    );
}

It renders as follows:

Step 2 - Change the Icon

You can change the back icon by passing your own icon object to the backIcon prop. This example uses an icon from the React Bootstrap icon library. You can use any other icon library as well.

import {ArrowLeft} from 'react-bootstrap-icons'

function Apps(props) {

    return (
        <div>
            <div>
                <SfNav 
                  showBack={true} 
                  menu={[]} 
                  showSearch={false} 
                  showSignIn={false} 
                  backIcon={<ArrowLeft style={{paddingTop: '5px'}} />}
                />
            </div>
        </div>
    );
}

It renders as follows:

Step 3 - Handle the Button Press Callback

You can receive a callback after user presses the back button, after subscribing to the onBackPressed prop.

function Apps(props) {

    return (
        <div>
            <div>
                <SfNav 
                  showBack={true} 
                  onBackPressed={() => {alert('back pressed');}} 
                  menu={[]} '    
                  showSearch={false} 
                  showSignIn={false} 
                />
            </div>
        </div>
    );
}

Step 4 - Styling

If you are interested in obtaining complete control over the look and feel, you already have it. You can completely override the base css properties of the back icon. An example is show below:

function Apps(props) {

    return (
        <div>
            <div>
                <SfNav 
                  showBack={true} 
                  onBackPressed={() => {alert('back pressed');}} 
                  menu={[]} 
                  showSearch={false} 
                  showSignIn={false} 
                  stylesBack={{backgroundColor: 'black', color: 'white', padding: '0px', width: '20px', height: '20px', textAlign: 'center', lineHeight: '1.1', borderRadius: '10px', marginRight: '10px'}} 
                  />
            </div>
        </div>
    );
}

It renders as follows:

Reference Links

Documentation

This link

Example Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

Conclusion

This article shows you how to add back button into your react navigation bar, how to change the back icon, how to handle its callback and how to style it.

How to Insert User Profile Info into your React Navbar

Hrushi M — Wed, 09 Nov 2022 10:15:29 +0000

Introduction

This article shows you how to insert the profile information of any user into the react navigation bar, so as to make it sign-in aware. It shows you how to insert and configure the profile picture & menu, how to reuse the sign in button, how to handle callbacks and then it will discuss the styling.

Prerequisites

This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customised your menu, have added the search input and have also configured the sign in button. This tutorial takes it forward from there.

Step 1 - Insert the Profile Picture

To show the profile picture, set the showProfile prop to true and set the profile picture url string to the profilePicture prop.

return (
        <div>
                <SfNav showProfile={true} profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' />
        </div>
);

It renders as follows:

Step 2 - Populate the Profile Menu

Profile menu can be populated by passing the requisite json array object to the profileMenu prop. I am showing an example here. You can look at how the json array object has been composed.

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                />
        </div>
);

It renders as follows:

Step 3 - Extend the Functionality: Use Profile Preamble

The navigation bar provides you a container, just above the profile menu, where you can insert your own custom developed component. It is called the profile preamble. How to use it, is totally up to your imagination. In the example shown below, it provides some profile context to the user.

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                />
        </div>
);

It renders as follows:

Step 4 - Extend the Functionality: Use Profile Component

The navigation bar provides you a second container, just below the profile menu, where you can insert another custom developed component. It is called the profile component. How to use it, is totally up to your imagination. In the example shown below, it show a sign out button.

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                  profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
                />
        </div>
);

It renders as follows:

Step 5 - Hide or Re-use the Sign In Button

User profile information is displayed usually only for the signed in user. In such a scenario, the sign in button is not necessary. You can either hide it or re-use it. The following example, re-uses it as a subscription button.

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                  signInCaption="Subscribe"
                />
        </div>
);

It renders as follows:

Step 6 - Handle callbacks

To listen to the click event on the profile menu, subscribe to the onMenuClicked prop as shown. To listen to the click event on the subscribe (re-used sign in) button, subscribe to the onSignInPressed prop as shown below:

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                  profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
                  signInCaption="Subscribe"
                  onMenuClicked={(value)=>{alert(value)}}
                  onSignInPressed={()=>{alert('Subscribe pressed!')}}
                />
        </div>
);

Step 7 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                  profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
                  signInCaption="Subscribe"
                  onMenuClicked={(value)=>{alert(value)}}
                  onSignInPressed={()=>{alert('Subscribe pressed!')}}
                  stylesProfilePictureContainer={
                        {backgroundColor: 'black', padding: '2px', color: 'white', borderRadius: '5px'}
                      } 
                      stylesProfilePreamble={
                        {backgroundColor: 'white', color: 'black'}} stylesProfileComponent={{backgroundColor: 'white', color: 'black'}
                      } 
                      stylesMenu={
                        {backgroundColor: 'black', color: 'white', paddingTop: '3px', paddingBottom: '3px', paddingLeft: '10px', paddingRight: '10px', borderRadius: '5px'}
                      } 
                      stylesSubMenu={
                        {backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', border: 'solid 1px gray'}
                      }
                      stylesMenuMobile={
                        {backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
                      }
                      stylesMenuMobileSelected={
                        {backgroundColor: 'white', color: 'black', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
                      }
                      stylesSubMenuMobile={
                        {backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
                      }
                />
        </div>
);

It renders as follows:

Reference Links

Documentation

This link

Example Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

Conclusion

This article shows you how to insert profile information into your react navigation bar, how to customize the profile menu, how to extend the functionality by adding your own custom components and how to then style the profile section.

How to Add a Sign In Button to your React Navbar

Hrushi M — Tue, 08 Nov 2022 09:33:55 +0000

Introduction

This article shows you how to implement the sign in button in the react navigation bar. It shows you how to configure the sign in button input, show / hide it, set its caption, listen to the callback and then how to style it.

Prerequisites

Step 1 - Show / Hide the Sign In Button

The navigation bar comes with an in-built sign in button, which is visible by default. To explicitly show it, set the showSignIn prop to true, as shown:

return (
        <div>
                <SfNav showSignIn={true}/>
        </div>
);

It renders as follows:

To hide it, set the showSignIn prop to false, as shown:

return (
        <div>
                <SfNav showSignIn={false}/>
        </div>
);

It renders as follows:

Step 2 - Set the Sign In Button Caption

To change the sign in button caption, set the signInCaption prop to the appropriate string value, as shown:

return (
        <div>
                <SfNav signInCaption="Log In" />
        </div>
);

It renders as follows:

Step 3 - Handle the Callback

The navigation bar returns a callback if the user presses the sign in button. You can subscribe to this callback by subscribing to the onSignInPressed prop, as shown:

return (
        <div>
              <SfNav onSignInPressed={() => {alert('Sign In Pressed!')}}/>
        </div>
);

Step 4 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:

return (
        <div>
              <SfNav 
                  stylesSignIn={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
              />
        </div>
);

It renders as follows:

Reference Links

Documentation

This link

Example Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

Conclusion

This article shows you how to configure the search input. How to show / hide it, how to change the caption, how to add an icon, how to handle callback and how to customise and style it.

How to Implement Search Functionality in Your React Navbar

Hrushi M — Mon, 07 Nov 2022 05:13:06 +0000

Introduction

This article shows you how to implement the search functionality in the react navigation bar. It shows you how to configure the search input, listen to the user data entry callback and then how to style it.

Prerequisites

Step 1 - Show / Hide the Search Input

To show the search input, set the showSearch prop to true, as shown:

return (
        <div>
                <SfNav showSearch={true}/>
        </div>
);

It renders as follows:

To hide the search input, set the showSearch prop to false, as shown:

return (
        <div>
                <SfNav showSearch={false} />
        </div>
);

It renders as follows:

Step 2 - Set the Search Input Caption

To change the search caption, set the searchCaption prop to the appropriate string value, as shown:

return (
        <div>
                <SfNav searchCaption="Find" />
        </div>
);

It renders as follows:

Step 3 - Set the Search Input Icon

You can also add an icon to the search input. Simply set the searchIcon prop to the icon object. The icon object can be taken from any library. In the example below, I have used the bootstrap icons library:

To change the search caption, set the searchCaption prop to the appropriate string value, as shown:

npm install react-bootstrap-icons

import {Search} from 'react-bootstrap-icons';

return (
        <div>
                <SfNav searchIcon={<Search />} />
        </div>
);

It renders as follows:

Step 4 - Handle the Callback

The navigation bar returns a callback if the user enters some text in the search input and presses enter. You can subscribe to this callback by subscribing to the onSearchPressed prop, as shown:

return (
        <div>
              <SfNav onSearchPressed={(value) => {alert(value)}}/>
        </div>
);

Step 5 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:

return (
        <div>
              <SfNav 
                  stylesSearchContainer={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
                  stylesSearchInput={{backgroundColor: '#444', borderRadius: '10px', color: '#efefef', paddingTop: '5px', paddingBottom: '5px'}}
              />
        </div>
);

It renders as follows:

Reference Links

Documentation

This link

Code

This link

Previous Tutorials of Navbar

Video Tutorial

Conclusion

This article shows you how to configure the search input. How to show / hide it, how to change the caption, how to add an icon, how to handle callback and how to customise and style it.

How to Customize the Menu of Your React Navbar

Hrushi M — Sat, 05 Nov 2022 11:42:25 +0000

Introduction

This article shows you how to set the main menu of the react navigation bar. It shows you how to configure the menu and then how to style it.

Prerequisites

This article assumes that you have gone through the steps of the previous tutorial, installed the Superflows library, have the default navigation bar up and running and then have added your brand information. This tutorial takes it forward from there.

Step 1 - Customise the Menu

Setting the menu is pretty straight forward. Compose the requisite json object and set it to the menu prop. I am showing an example here.


return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}/>
  </div>
);

It renders as follows:

Step 2 - Handle the callback

The navbar provides a callback after any of the menus or submenus are clicked. Subscribe to it to receive the callback events. As shown below:

return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
      onMenuClicked={(value) => {alert(value)}}
    />
  </div>
);

Step 3 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:


return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
      onMenuClicked={(value) => {alert(value)}}
      stylesMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px'}} 
      stylesSubMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', border: 'solid 1px gray'}}
      stylesMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
      stylesMenuMobileSelected={{backgroundColor: 'white', color: 'black', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
      stylesSubMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
                />
  </div>
);

It renders as follows:

Reference Links

Video Tutorial

Conclusion

This article shows you how to configure the main menu using a json object. Further how to handle menu click callbacks and lastly, how to customise and style it.

How To Customize The React Navbar With Your Brand Info

Hrushi M — Fri, 04 Nov 2022 06:47:32 +0000

Introduction

Inserting your brand information in the navigation bar helps build your brand recall throughout your website. This article shows you how to do it in your React project.

Prerequisites

This article assumes that you have gone through the steps of the previous tutorial, installed the Superflows library and have the default navigation bar up and running. This tutorial takes it forward from there.

Brand Info

Brand information consists of mainly two things:

Brand name
Brand logo

Either of these or both of these, depending on your design requirements and guidelines, need to be inserted into the navigation bar.

Step 1 - Set Brand Name

Brand name can be set by passing a string to the brand prop. As show below:


return (
  <div>
    <SfNav brand="Your Brand"/>
  </div>
);

It renders as follows:

Step 2 - Set Brand Logo

Brand logo can be set by passing the url string of the logo to the brandLogo prop. As show below:


return (
  <div>
    <SfNav brandLogo="https://superflows.dev/img/superflows_gray_transparent_200.png"/>
  </div>
);

It renders as follows:

Needless to say, you can also show both, as follows:

return (
  <div>
    <SfNav brand="Your Brand" brandLogo="https://superflows.dev/img/superflows_gray_transparent_200.png"/>
  </div>
);

Step 3 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:

return (
  <div>
    <SfNav 
      brand="Your Brand"
      brandLogo="https://superflows.dev/img/superflows_gray_transparent_200.png" 
      stylesBrand={{
                        color: 'black',
                        textShadow: '1px 2px 2px gray'
                    }}
      stylesBrandLogo={{
                        backgroundColor: 'white', 
                        borderRadius: '10px', 
                        paddingRight: '0px', 
                        marginRight: '10px', 
                        border: 'solid 1px black'
    }}/>
  </div>
);

It renders as follows:

Reference Links

Video Tutorial

Conclusion

This article shows you how to insert your brand information in your React navigation bar. It also shows you how you can tweak the look and feel of the brand information to suit your needs and designs.

How To Get Started with a Navigation bar in Your React Project in 2 mins

Hrushi M — Thu, 03 Nov 2022 05:09:40 +0000

What is a navigation bar?

Navigation bar is arguably the most important component of your website or web app. It anchors the users to your website. It allows them to effortlessly traverse through the website. It also contextualises the application to the user, mentions the subscription status, next action to be taken, etc.

This article shows you how to add a navigation bar to your React project in 2 minutes.

Prerequisites

I am assuming that the reader could be a React beginner. But familiarity with basic React concepts is necessary. If you are an absolute novice at React, this tutorial, could help you get started with React. Post which, come back to this article.

Step 1 - Install the Superflows navigation bar library

Superflows is a React library that provides reusable and customisable components. In this article, we use the navigation bar provided by Superflows.

Install it as follows:

npm install --save react-sf-themes
npm install --save react-sf-building-blocks

Step 2 - Import and Usage

After installation is successful, import and use the navigation bar component, called SfNav, in your project as shown below.

import { SfNav } from 'react-sf-building-blocks';

return (
    <div>
      <SfNav stylesContainerDesktop={{ fontFamily: 'Georgia' }} />
      {/* Your Code */}
    </div>
  );

It will render as follows:

Video Tutorial

Reference Links

Conclusion

This article gets you started with a navigation bar in your React project. It shows you how to integrate the Superflows library and setup the default navigation bar.

Forem: Hrushi M

How To Add A Serverless Authentication Microservice To Your HTML, CSS & Javascript App

👋 Introduction

About Passwordless Sign-ins

About Microservices

This Tutorial

💡 What's New In This Tutorial?

🏆 What Will You Learn At The End Of This Tutorial?

⚠ Before You Begin

📚 Tech-stack

🌲 Software Architecture

🍽 Step 1 - Project Setup

1.1 - Project Directory

1.2 - Initialize NPM

1.3 - Install the HTTP-server packages

1.4 - Create the dist/ folder

1.5 - Create index.js

1.6 - Start the HTTP-server

1.7 - Create dist/index.html

💀 Step 2 - Create The HTML App Skeleton

⥣ Step 3 - Configure The Navigation Bar

3.1 - Setup Route Container

3.2 - Setup Parameter Passing

3.3 - Confirm That Routing Works

3.4 - Create dist/home.html

3.5 - Setup Main Menu

3.6 - Setup Social Media Links

3.7 - Copyright Notice

3.8 - Setup Call To Action Button

3.9 - Handle Search

3.10 - Review dist/index.html

🧃 Step 4 - Create The Authentication Flow Container Page

🔑 Step 5 - Create AWS Credentials

5.1 - Sign In To AWS Admin Account

5.2 - Add User > Details

5.3 - Add User > Permissions

5.4 - Add User > Review & Create

5.5 - Create User Credentials

🖥 Step 6 - Initialize The AWS Cloud Shell

⬇ Step 7 - Clone The Backend

🔧 Step 8 - Configure The Backend Deployment Script (Test Mode)

▶️ Step 9 - Run The Backend Deployment Script (Test Mode)

☑ Step 10 - Double-check The Backend Deployment (Test Mode)

10.1 - Check API Gateway

10.2 - Check IAM

10.3 - Check Lambda Function

10.4 - Check DynamoDB

🚪 Step 11 - Create The Authentication Frontend

11.1 - Update dist/auth.html with template

11.2 - Handle Sign In And Sign Out Events

11.3 - Connect The Backend To The Frontend

11.4 - Sanity Check

📧 Step 12 - Receiving OTPs During Testing

🧍 Step 13 - Test The Sign-Up Step

🔑 Step 14 - Test The OTP Page

🔑 Step 15 - Test The Sign-Out Flow

⚙ Step 16 - SfUserAuth Microservice APIs

🏊 Step 17 - A Deeper Dive

Step 18 - Authenticating with SfUserAuth From Your Application Backend

🏭 Step 19 - Moving To Production

19.1 - Deploy The Production Backend

19.2 - Connect The Production Frontend To The Production Backend

19.3 - Switch AWS SES To Production

Conclusion

Resources

SfUserAuth Frontend Code Repository

SfUserAuth Backend Code Repository

SfUserAuth API Documentation

SfUserNav NPM Library

SfUserAuth NPM Library

AWS Regions Directory

Join The Community

YouTube Channel

Documentation

How To Implement A Single Page Modular App Architecture Using Pure HTML, CSS, Javascript

🏆 What will you learn in this tutorial?

💡 What's New In This Tutorial?

⚠ Before You Begin

🍽 Step 1 - Project Setup

1.1 Project Directory