DEV Community: Victory Tuduo

Build a Game Streaming Platform with Next.js, Pusher and Dolby.io

Victory Tuduo — Sat, 03 Jun 2023 11:55:40 +0000

For this article idea, I plan on developing and styling the user interface with Next.js, then adding the stream functionality with Dolby.io. The idea is to show how easily integrable Dolby.io streaming services can be included in web applications. For this piece on "Building a game streaming platform with Next.js and Dolby.io", the article will feature the following sections: a chat interface, and a user and streamer sharing features.

Introduction

Game streaming platforms have generated a lot of popularity in recent years, with millions of application users tuning in to various platforms to watch their favorite games. This stems from the fact that the gaming industry has created a lot of popular franchises, and many people love to stream gameplay in search of tips and tricks and hints and watch their favorite gamers play and compete online.
Nowadays, a lot of popular platforms such as YouTube, Twitch, and TikTok allow users to stream live gameplay, and interact with streams and other viewers, from virtually anywhere in the world. As an added perk, there are also options for gamers to monetize their gaming skills and build up an online presence.
In this article, we will present an idea of game streaming platforms and their benefits, and also create a web application for such a purpose, making use of Next.js and Dolby.io a powerful cloud-based audio and video real-time communication service.

Overview of Game Streaming Platforms

A game streaming platform, as its name implies, is an online platform that allows users to create live transmission of a screen (usually containing gameplay) to a live audience. This industry has become quite popular in recent years and can serve as a lucrative job for professional gamers.
Below are the benefits game streaming platforms can provide to their users:

Entertainment: With a wide range of games streamed on a platform, from casual games to online multiplayer, role-playing, open-world games, etc. users can find game walkthroughs, watch their favorite gamers play games at challenging difficulties, or even sit back and enjoy watching highly-competitive multiplayer gameplays. This piques interest in games and provides entertainment for viewers.
Monetization: To encourage gamers to participate, game streaming platforms usually have a reward-based system where streamers earn a set amount of money on meeting certain criteria such as getting a particular number of streams of followers (this is dependent on the streaming platform). Popular streamers can further develop their skills and also gain advertisement and sponsorship deals. Some platforms also allow viewers to provide incentives to streamers in the form of donations.
Community development: Game streaming platforms help to develop communities with fans of the same game. It provides an environment where users can interact around shared interests. These platforms are also easily accessible to users around the globe as long as one has a connection to the internet.

What is Dolby.io

According to its Docs, Dolby.io is a Streaming is a cutting-edge real-time streaming solution that offers exceptional performance with ultra-low latency, professional-grade audio, and video quality, robust scalability for large audiences, and secure end-to-end encryption. Powered by WebRTC streaming technology, these APIs are specifically designed to prioritize latency and deliver superior quality for a wide range of applications including REMI production, sports broadcasting, music streaming, live events, remote post-production, gaming, and immersive virtual experiences.

Dolby.io Streaming provides comprehensive support for popular tools and platforms such as OBS (Open Broadcaster Software), Unreal Engine plugins, and Unity plugins, as well as software development kits (SDKs) for all major client environments. Dolby.io provides various tools and services for audio processing, noise reduction, voice enhancement, spatial audio, and more, allowing developers to create engaging and immersive experiences across a wide range of applications such as communication platforms, streaming services, gaming, and virtual reality.

Developing the interface with Next.js

In this section, we will build the general user interface for the game streaming platform. This web application will feature the following:

A login form for viewers and streamers
The video-sharing interface
A chat panel

To build this application, we will use Next.js and TailwindCSS for the user interface, and power the chat application with Pusher. The entirety of the streaming audio and video functions will be handled using Dolby.io. For the purpose of this tutorial, we will create a simple Next.js application with TypeScript and TailwindCSS enabled. To create a Next app you can check this guide.

Creating the Login Form
To better organize our files, we will create a components folder at the root of our project directory. In this folder, we will create and store components that make up the web application. In the components folder, create a new file login-form.tsx and enter the following code in it:

    import React, { useState } from "react";
    import Link from "next/link";
    const LoginForm = () => {
      const [username, setUsername] = useState("Anonymous user");
      const [role, setRole] = useState("viewer");
      return (
        <div className="login">
          {/* this will be the component for the login page */}
          <h1 className="login__header">
            Welcome to my game streaming application
          </h1>
          <form className="login__form">
            <label className="login__form__label">Username</label>
            <input
              className="login__form__input"
              type="text"
              placeholder="Username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
            <label className="login__form__label">Role</label>
            <select
              className="login__form__select"
              value={role}
              onChange={(e) => setRole(e.target.value)}
            >
              <option value="viewer">Viewer</option>
              <option value="streamer">Streamer</option>
            </select>
            <Link
              className="login__form__button"
              href={{
                pathname: "/game-streaming",
                query: { name: username, role: role },
              }}
            >
              <button>Login</button>
            </Link>
          </form>
        </div>
      );
    };
    export default LoginForm;

In the code block above, we have created a login page with an input field for username and a select field for the roles of viewer/streamer. We also used useState to set the values for these fields and will route to the main application page using next-link when the login button is clicked.

To style this page, add the following to the global.css file:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    *, body{
      @apply m-0 p-0;
    }
    /* Login Page components */
    .login{
      @apply flex flex-col items-center justify-center h-screen;
    }
    .login__header{
      @apply text-3xl font-bold text-center mb-12;
    }
    .login__form{
      @apply flex flex-col items-center justify-center w-1/3;
    }
    .login__form__label{
      @apply w-full text-left text-gray-700;
    }
    .login__form__input, .login__form__select{
      @apply w-full px-4 py-2 mt-2 mb-8 border border-gray-300 rounded-md;
    }
    .login__form__button{
      @apply w-full px-4 py-2 mt-14 text-white text-center bg-blue-500 rounded-md;
    }
    .login__form__button:hover{
      @apply bg-blue-600;
    }
    /* End of Login styles */

Finally, to display this component at the index of our application, replace the code block in index.tsx with the following:

    import LoginForm from '@/components/login-form'

    export default function Home() {
      return (
        <>
         <LoginForm/> 
        </>
      )
    }

To run the application, open up the CLI and enter npm run dev. The results in the browser will be similar to the image below:

Creating the Video Sharing Interface
For this interface, we will create a new page in the pages directory and name it game-streaming.tsx. On this page, we will have the streaming window and the chat panel. Back in the components directory, create two new components video-interface.tsx and chat-window.tsx.

In video-interface.tsx, we will have the following lines of code:

    import React from "react";
    const VideoInterface = () => {
      return (
        <div className="video-interface">
          {/* This componnent will house the stream sharing and also display information regarding it */}
          <div className="video-interface__view-area">
            {/* view area */}
            <div className="video-interface__view-area__viewers">
              {/* number of viewers */}
              <p>500 Watching</p>
            </div>
          </div>
          <div className="video-interface__stream-info">
            {/* stream info */}
            <div className="video-interface__stream-info__streamer">
              {/* streamer name */}
              <p className="video-interface__stream-info__streamer__name">
                Streamer Name
              </p>
              {/* status */}
              <p className="video-interface__stream-info__streamer__status">Live</p>
            </div>
            <div className="video-interface__stream-info__stream">
              {/* game name */}
              <p className="video-interface__stream-info__stream__game-name">
                The last of Us
              </p>
              {/* reactions */}
              <div className="video-interface__stream-info__stream__actions">
                <button className="video-interface__stream-info__stream__actions__exit">
                  Exit
                </button>
                <button className="video-interface__stream-info__stream__actions__share">
                  Share
                </button>
              </div>
            </div>
          </div>
        </div>
      );
    };
    export default VideoInterface;

in the code block above, we have a component for the video-sharing interface, which displays the stream, the total number of viewers, the title of the stream and the name of the streamer, and finally the reaction buttons.

To style this component, add the following styles to global.css:

    /* Game Streaming window styles */
    .game-streaming {
      @apply flex p-6 gap-12 items-center w-full bg-gray-900 justify-center h-screen;
    }
    /* video interface style */
    .video-interface {
      @apply relative w-[65%] h-[90%] rounded-2xl shadow-2xl;
    }
    /* view area */
    .video-interface__view-area {
      @apply relative w-full h-[70%] rounded-t-2xl  shadow-md;
    }
    /* number of viewers */
    .video-interface__view-area__viewers {
      @apply absolute top-4 left-5 px-5 py-3 z-10 bg-slate-400/20 opacity-50 rounded-xl text-white font-medium text-xs;
    }
    /* stream info */
    .video-interface__stream-info {
      @apply relative w-full h-[30%] pt-3 pl-6 rounded-b-2xl bg-gray-700 text-white;
    }
    /* streamer details */
    .video-interface__stream-info__streamer {
      @apply flex gap-4 items-center;
    }

    /* streamer name */
    .video-interface__stream-info__streamer__name{
      @apply text-lg font-semibold;
    }
    /* streamer status */
    .video-interface__stream-info__streamer__status{
      @apply text-sm py-2 px-6 text-blue-400 font-bold bg-white rounded-xl;
    }
    /* stream description */
    .video-interface__stream-info__stream{
      @apply text-gray-200 mt-8 flex gap-6 flex-col;
    }
    .video-interface__stream-info__stream__game-name{
      @apply text-4xl font-bold;
    }
    /* stream actions */
    .video-interface__stream-info__stream__actions{
      @apply flex justify-end pr-24 gap-4 items-center;
    }
    /* stream actions button */
    .video-interface__stream-info__stream__actions__exit{
      @apply text-sm py-2 px-4 text-blue-400 font-bold bg-white rounded-xl;
    }
    .video-interface__stream-info__stream__actions__share{
      @apply font-semibold;
    }

Finally, we can add the video-interface and chat-window component in the game-streaming.tsx page:

    import React from "react";
    import ChatWindow from "@/components/chat-window";
    import VideoInterface from "@/components/video-interface";
    import { useRouter } from "next/router";
    const GameStream = () => {
      const router = useRouter();
      const { name, role } = router.query;
      return (
        <div className="game-streaming">
          {/* Game Streaming Platform */}
          {/* Video Interface */}
          <VideoInterface />
          {/* Chat Panel */}
          <ChatWindow username={name} role={role} />
        </div>
      );
    };
    export default GameStream;

Creating a Chat Panel

The chat panel is an essential part of a game streaming platform as it lets viewers ask questions, make requests to the streamer or interact with one another. The chat panel we will build for this tutorial will leverage Pusher and will feature chat names and their messages. Also to make communication easy, there will be style differences between sent and received messages.

To get started, first, create a new user account on Pusher or if you are an existing user, you can sign in to your account. Once logged in, create a new project and on the dashboard, click on api keys. Here, we will use the copy-to-clipboard feature to obtain the authorization credentials we will be using in our application.
In the root directory of your project, create a new file .env.local to store the credentials as environmental variables. Paste the credentials in this file and save it.

    # Server creds
    app_id = "your app id"
    key = "your app key"
    secret = "your app secret"
    cluster = "your cluster"
    # public keys
    NEXT_PUBLIC_APP_ID="your app id"
    NEXT_PUBLIC_CLUSTER="your cluster"

To make use of Pusher in our application, we also need to install the necessary dependencies. This can be installed with the following command in the CLI:

    npm install axios pusher pusher-js

Once the installation is complete, we will create an instance of pusher to be used in our application. In the project root directory, create a new folder lib and in it, create a file pusher.tsx:

    import Pusher from "pusher";

    const pusher = new Pusher({
      appId: process.env.app_id as string,
      key: process.env.key as string,
      secret: process.env.secret as string,
      cluster: process.env.cluster as string,
      useTLS: true,
    });

    export { pusher };

Next, we will define API routes to communicate with Pusher from our application. We will do this in two forms:

First, a route to authenticate users. For this, in the api directory, create a folder auth, and within it pushapi.tsx. In this file enter the following:

    import { NextApiRequest, NextApiResponse } from "next";
    import { pusher } from "../../../lib/pusher";
    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse
    ) {
      const { socket_id, username, channel_name } = req.body;
      //    unique random user id
      const rand_string = Math.random().toString(36).slice(2);
      //   capture user data
      const presenceData = {
        user_id: rand_string,
        user_info: {
          username,
        },
      };

      // authenticate user
      try {
        const auth = pusher.authenticate(socket_id, channel_name, presenceData);
        res.send(auth);
      } catch (err) {
        console.log(err);
        res.status(403).send("Forbidden");
      }
    }

Note that the code block above takes in socket_id , username, and channelname from the body of requests, and assigns numbers along with the username to return unique values, and finally the response is returned.

Next, we will create a route to allow communications between authenticated users and Pusher. In the api directory, create a file index.tsx. Open this file in the code:

    import { pusher } from "@/lib/pusher";
    import { NextApiRequest, NextApiResponse } from "next";
    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse
    ) {
      const { message, username } = req.body;

      // here presence-chat is the chat room, and chat-message is the event called when the chat is to be updated
      await pusher.trigger("presence-chat", "chat-message", {
        message,
        username,
      });
      res.status(200).json({ message: "Message sent" });
    }

This API route is responsible for taking in messages sent via the chat interfaces, along with the user names, and returns data responses to update the chat.

With the API routes for our application set up, we can build the client-side interface for the chat window. To do this, add the following code to chat-window.tsx:

    import React, { useState, useEffect } from "react";
    import Pusher from "pusher-js";
    import axios from "axios";
    // define type of data passed to the component
    type ChatWindowProps = {
      username: string | string[] | undefined;
      role: string | string[] | undefined;
    };
    const ChatWindow = ({ username, role }: ChatWindowProps) => {
      //   pusher
      const pusher = new Pusher(process.env.NEXT_PUBLIC_APP_ID as string, {
        cluster: process.env.NEXT_PUBLIC_CLUSTER as string,
        // authentication API endpoint
        authEndpoint: "/api/auth/pushapi",
        auth: {
          params: {
            username,
          },
        },
      });
      // chat array to store messages
      const [chat, setChat] = useState<{ username: string; message: string }[]>([]);
      // message field input
      const [message, setMessage] = useState("");
      // online users  count
      const [onlineUsersCount, setOnlineUsersCount] = useState(0);
      // online users
      const [usersOnline, setUsersOnline] = useState<
        { username: string; message: string }[]
      >([]);
      // subscribe users to the channel
      useEffect(() => {
        let mounted = true;
        if (mounted) {
          // name of chat room defined in the API
          const channel = pusher.subscribe("presence-chat");
          // bind user to channel
          channel.bind("pusher:subscription_succeeded", (members: any) => {
            setOnlineUsersCount(members.count);
          });
          channel.bind("pusher:subscription_error", (err: any) => {
            console.log(err);
          });
          // when new users enter chat
          channel.bind("pusher:member_added", (members: any) => {
            setOnlineUsersCount(members.count);
            // notify when new users join chat
            setUsersOnline((prev: { username: any; message: any }[]) => [
              ...prev,
              { username: members.info.username, message: "joined the chat" },
            ]);
            // to add to previous state
            setOnlineUsersCount(onlineUsersCount + 1);
          });
          channel.bind("chat-message", (data: any) => {
            const { message, username } = data;
            // update chat array and add to previous state
            setChat((prev: { username: any; message: any }[]) => [
              ...prev,
              { username, message },
            ]);
          });
        }
        return () => {
          pusher.unsubscribe("presence-chat");
          mounted = false;
        };
      }, []);
      // send message
      const sendMessage = async (e: any) => {
        e.preventDefault();
        // message API route at /api/index.tsx
        await axios.post("/api", {
          message,
          username,
        });
        setMessage("");
      };
      return (
        <div className="chat-window">
          {/* welcome user */}
          <div className="chat-window__welcome">
            <h1 className="chat-window__welcome__count">
              There are {onlineUsersCount} online
            </h1>
            <div className="welcome-cont">
              {usersOnline.map((user, id) => {
                // return number of users online and notify when new members join
                return (
                  <div key={id} className="chat-window__welcome__welcome-users">
                    <div className="welcome-users">
                      {" "}
                      <span className="welcome-users__user">
                        {user.username}
                      </span>{" "}
                      just joined the chat
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="chat-window__chat-container">
            {/* display chat messages */}
            <div className="chat-window__chat-container__messages">
              {chat.map((chat: any, id: any) => {
                {
                  /* display chat messages */
                }
                if (chat.username === username) {
                  return (
                    <div
                      key={id}
                      className="chat-window__message chat-window__message--right"
                    >
                      <p>me: {chat.message}</p>
                    </div>
                  );
                } else {
                  return (
                    <div
                      key={id}
                      className="chat-window__message chat-window__message--left"
                    >
                      <p>
                        {chat.username}: {chat.message}
                      </p>
                    </div>
                  );
                }
              })}
            </div>
            {/* send messages */}
            <form className="chat-window__form" onSubmit={sendMessage}>
              <input
                className="chat-window__form__input"
                type="text"
                placeholder="Type your message here"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
              />
              <button className="chat-window__form__button">Send</button>
            </form>
          </div>
        </div>
      );
    };
    export default ChatWindow;

In the code block above, we have a chat interface built with Pusher. We can style this interface by adding the following styles to the global.css file:

    .chat-window {
      @apply w-[30%] relative h-[90%] rounded-xl shadow-2xl;
    }
    .chat-window__welcome {
      @apply relative bg-slate-700 backdrop-blur-2xl px-3 py-2 rounded-md top-0 flex pl-4 items-end w-full flex-col;
    }
    .chat-window__welcome__count {
      @apply font-medium text-purple-600 absolute uppercase top-[-50px];
    }
    .chat-window__welcome__welcome-users {
      @apply text-white font-bold;
    }
    .welcome-cont {
      @apply max-h-32 min-h-[4rem] overflow-y-scroll;
    }
    .chat-window__chat-container {
      @apply mt-24 px-4 h-3/5;
    }
    .chat-window__message--right {
      @apply flex justify-end mb-3;
    }
    .chat-window__message--right p {
      @apply p-2 rounded-lg bg-blue-500 text-white;
    }
    .chat-window__message--left {
      @apply flex justify-start mb-3;
    }
    .chat-window__message--left p {
      @apply p-2 rounded-lg bg-gray-200 text-gray-700;
    }
    .chat-window__chat-container__messages {
      @apply w-full h-[300px] relative overflow-y-scroll;
    }
    .chat-window__form {
      @apply w-full flex mt-24 justify-center items-center gap-5;
    }
    .chat-window__form__input {
      @apply w-[800px] px-3 py-2 outline-none border-none;
    }
    .chat-window__form__button {
      @apply rounded-md px-5 py-3 bg-blue-500 text-white;
    }

At this moment, we can run the application, log in and make use of the chat interface:

Integrating Dolby.io Streaming Services

In this section, we will add the video streaming functionality within the space provided on the user interface and share it via the Dolby.io cloud-streaming feature. To handle conference room creation and screen sharing, we will require the Voxeet SDK. This can be installed as follows:

    npm i @voxeet/voxeet-web-sdk

For the conference room, we will also require the role and username props from the Login component. We can pass these props to the VideoInterface component from the pages/game-streaming.tsx file as shown below:

    //...
    <VideoInterface role={role as string} username = {name as string} />

Then in `components/video-interface.tsx`, we can access and make use of these props:

    //...
    type UserProps = {
      username: string | undefined;
      role: string | undefined;
    };
    const VideoInterface = ({ username, role }: UserProps) => {
    //...

For the screen-sharing feature, we will have a Ref VideoRef to store this, we will also have userRole, name , and conferenceName variables.

    //...
    const videoRef = useRef<HTMLVideoElement>(null);
    // default role is streamer
    const userRole = role ? role : "Streamer";
    // Set the name of the current logged in user
    const [name, setName] = useState<string>("");
    // name of the conference
    const conferenceName = "gaming-room";

To make use of the Dolby.io service, we will require an access token from the “communications & media” section of the dashboard. Copy the access token and add it to your .env.local file:

    NEXT_PUBLIC_CLIENT_ACCESS_TOKEN= "your access token"

In components/video-interface.tsx we can access this key and create a conference as follows:

    useEffect(() => {
      const main = async () => {
        // Generate a client access token from the Dolby.io dashboard and insert into access_token variable
        let access_token = process.env.NEXT_PUBLIC_CLIENT_ACCESS_TOKEN as string;
        VoxeetSDK.initializeToken(access_token, (isExpired: any) => {
          return new Promise((resolve, reject) => {
            if (isExpired) {
              reject("The access token has expired.");
            } else {
              resolve(access_token);
            }
          });
        });
        try {
          // Open the session
          await VoxeetSDK.session.open({ name: username });
          setName(username as string);
          /*
           * 1. Create a conference room with an the defined conference name
           * 2. Join the conference with user defined name
           */
          VoxeetSDK.conference
            .create({ alias: conferenceName })
            .then((conference) => VoxeetSDK.conference.join(conference, {}))
            .catch((err) => console.error(err));
            // manage participants
        } catch (e) {
          alert("Something went wrong : " + e);
        }
      };
      main();
    }, []);

The code block above checks if the access token is valid and then creates a session using the username and conferenceName. To handle screen sharing and display the shared media, add the following lines of code:

    const sharingScreen = async () => {
      if (userRole.toLowerCase() === "streamer") {
        // if user is a streamer, they can start screen sharing. If a screen is already been shared it will alert the user
        VoxeetSDK.conference
          .startScreenShare()
          .then(() => {
            console.log("Screen sharing started");
            displayStream(videoRef.current as HTMLVideoElement);
          })
          .catch((err) => console.error(err));
      } else {
        // if user is a viewer, they will be alerted that they won't be able to share their screen
        alert("welcome viewer");
        displayStream(videoRef.current as HTMLVideoElement);
      }
    };
    const displayStream = (videoElement: HTMLVideoElement) => {
      // dis play the stream
      VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
        if (stream.type === "ScreenShare") {
          videoElement.srcObject = stream;
          videoRef.current?.play();
        }
        if (stream.getVideoTracks().length > 0) {
          videoElement.srcObject = stream;
          videoRef.current?.play();
        }
      });
    };

To run the sharingScreen function, we will add an onClick event handler to the share button:

    <button
      className="video-interface__stream-info__stream__actions__share"
      onClick={() => sharingScreen()}
    >
      Share
    </button>

To exit the stream, we can add an onClick() event handler to the exit button and a function to perform this functionality:

    <button
      className="video-interface__stream-info__stream__actions__exit"
      onClick={() => EndSharing()}
    >
      Exit
    </button>

Then, create the EndSharing() function:

    const EndSharing = () => {
      VoxeetSDK.conference
        .stopScreenShare()
        .then(() => {
          console.log("Screen sharing ended");
        })
        .catch((err) => console.error(err));
    };

Testing the Application

To run the application, open up the CLI in the project directory, key in npm run dev in the terminal, and press the enter button to execute the command. If we join the stream from two alternate windows, we can make use of the chat window and also stream application windows as shown in the GIF below:

Note that the GIF seems choppy due to its length and low framerate. The original stream works perfectly.
We can also use Voxeet to display the number of participants:

    // state to manage participants
    const [participants, setParticipants] = useState<any[]>([]);
    // ...
    // In the main() function, after a user joins the conference, we can add the user to the participants list
    // Listen to participant events
    VoxeetSDK.conference.on("participantAdded", (participant) => {
      setParticipants((prevParticipants) => [
        ...prevParticipants,
        participant,
      ]);
    });

And finally, we can display the total number of watching viewers:

    //...
    <div className="video-interface__view-area__viewers">
      {/* number of viewers */}
      <p>
        {participants.length} Watching, you are logged in as {name}
      </p>
    </div>

We can also set the streamer name from the name prop passed to the component:

    //...
    {/* streamer name */}
    <p className="video-interface__stream-info__streamer__name">
      {name}
    </p>

Conclusion

Congratulations on making it to the end of this article 🎉 . In this article, we built a streaming application with a chat interface to enhance participant communications. For this feature, we made use of Dolby.io; a real-time streaming provider with low latency and support for large audiences.
To further improve this project, you can allow streamers to enter access tokens, room, and game names, and create a unique URL with this data to be shared with viewers to participate in the stream.

What is DevOps? A Quick Guide to Understanding Developer Operations

Victory Tuduo — Fri, 21 Apr 2023 07:06:11 +0000

Originally published on: https://www.victory-tuduo.dev/blog/a-quick-guide-to-devops

As a web developer, I have always been intrigued by what processes drive successful project ideas from start to fruition. If you’ve ever been on a personal or team collaboration idea, you may have faced issues such as slow-paced development, conflicts with interests and code contributions, incohesive results as a result of poor team communication, etc.

All these issues at different levels of complexities in your project development, can hamper your progress and put it on the 🐌 slow track. How can we best automate these processes, and scale applications easier and faster while still building high-performing software that can handle user server load, incorporate new features, and also detect and fix bugs without breaking everything 💭?
Well, luckily for us, this is no longer rocket science; this brings us to the practice of Developer Operations which will be covered in this article.

What is DevOps?

The scope of DevOps is quite broad and can be defined in different ways. DevOps at a glance can be seen as an intersection of the activities involved in development and operations. It is an approach to the activities of software development that uses a series of practices to effectively manage collaboration and communication between members of your development & operations team, to create a streamlined software development process.
DevOps aims to create fast-paced software delivery with high-quality code, quick responses to consumer requirements, produce software that can run effectively in different environments with no server downtime, and an automated CI/CD process for feature improvements and bug fixes.

NOTE
The concept of SDLC (Software Development Life Cycle and CI/CD will be properly introduced in the next section.

DevOps can also be defined as a combination of practices, cultural philosophy, communication techniques, and tools, with the aim of boosting an organization’s capability to build, test and deliver high-performing software, with automated improvement processes to better meet customers' ever-growing desires.
Awesome isn’t it? With DevOps you can spend more time on innovation and improvements as your team will have streamlined processes for different stages of both the pre-development and post-deployment stages. No more annoying roadblocks caused by ineffective communication and development cycles. 🥳

Why DevOps?

In the introductory paragraph of this article, we mentioned some issues that may arise during the software development process and hinted at “Developer Operations” being a means to tackle these issues. In this section, we will discuss the Software Development Life Cycle (SDLC), the challenges DevOps aims to solve and how it tackles them, and finally, the process of CI/CD.

What is SDLC?
Software Development Life Cycle is a representation of the stages involved in the development of software applications, from the conception of the idea to the development and delivery of the software and possible maintenance/updates.
A diagrammatic representation of an SDLC in a DevOps scenario can be seen below:

With DevOps, there’s an endless cycle 🔄 of improvements made to the software. It aims at automating this process while allowing for flexibility, quality assurance, and faster release cycles.

Challenges DevOps Aims to Solve
In a typical release process, some challenges may occur that hamper development. DevOps makes use of tools and behavioral approaches to solve these issues.

Miscommunication: Poor communication between members of the team will both slowdown application development and produce faulty software. Bad communication can occur in the following scenarios: improper guides/documentation and clear-cut checklists dictating the features currently being developed and the next steps in the development cycle. DevOps provides sensitization on the benefits of good communication and provides a streamlined process to effectively manage collaboration between team members.
Continuous adaptation to ever-changing landscape (tools and new technologies): To ensure optimal development cycles, DevOps practices involve establishing a standard toolset for application development and ensuring developers make use of best practices when contributing.
Resistance to change: Some team members might find it hard to adapt to new practices, handle feature improvements and make use of the toolsets. With DevOps, training, workshops, and cultural training can be undertaken to make team members more flexible. Also, rotations and incentives can be incorporated to encourage team members to perform better, and with rotation practices, employees are not left drained/stressed out as issues can be delegated to the right set of people seamlessly.

CI/CD
CI/CD (Continuous Integration/Continuous Deployment) is a set of practices and methodologies incorporated in DevOps to automate the software development process, ensure continuous software delivery, and streamline testing, maintenance, and deployment of the application.

Continuous Integration is the practice of frequently shipping new changes/fixes to the software repository, building and testing the code to ensure smooth integration and stable/reliable software.
Continuous Deployment is the process of creating an automated software delivery process for newer versions of the software to the production environment. This is carried out after the software has been properly tested during Continuous Integration thereby ensuring quality assurance of the deployed software.
CI/CD uses practices such as software versioning, building and testing automation, and deployment pipelines. A CI/CD cycle will consist of a continuous sequence of planning, coding, building, continuous testing, release, deployment, and monitoring operations (getting feedback, shipping features, and improvements).

In essence, the practice of Developer Operations helps to ensure the following:

Faster-paced software delivery.
Better problem remediation system.
Ensure software development follows best practices and software is of high quality.
Improved communication and collaboration networks.
Provides more opportunities for development and innovation, and reduces time spent on fixing and maintaining software.

Opportunities in DevOps

DevOps initially started as simply a set of practices in software development, but over time has evolved into a separate role filled by an employee with the job of a DevOps engineer. The DevOps engineering role may be part of development, operations, or maybe a separate role of its own. The opportunities available in the DevOps space include the following:

DevOps engineer: These set of people are responsible for designing, implementing, and overseeing the practices associated with DevOps within the organization. They are software developers, with a key understanding of the tools and operations necessary to build automated pipelines for effective software delivery.
Developer Advocacy: While this role is not limited to DevOps, its activities are close to the practices and culture of DevOps. Developer advocates are charged with the responsibilities of working hand-in-hand with the development teams to ensure effective communication and ensure guidance/support when building and deploying software.
Developer advocacy also involves creating technical content such as tutorials, use cases, and sample codes for a particular product/technology to educate developers. They also carry out the task of promoting these contents on technical communities and social media platforms to better inform the public on the capabilities of the product, and in doing so make the product easily understandable, while also informing to-be users of its existence.
The roles of developer advocates may differ from one organization to another, but in essence, a developer advocate possesses good communication skills, a strong technical background, and a passion for working with development teams and promoting content.
Kubernetes Engineer: The Kubernetes engineer role is concerned with managing and deploying the software in a container-based environment. Kubernetes is an open-source platform that is used to create an automated deployment, scaling, and management system for orchestrated containerized applications.
Engineers in this role are responsible for designing and implementing Kubernetes clusters, configuring and managing containerized applications, and automating deployment and scaling processes. They also monitor and troubleshoot issues related to Kubernetes and the underlying infrastructure.
A Kubernetes engineer may also work closely with developers and operations teams to ensure that containerized applications are optimized for Kubernetes deployment and that DevOps practices are integrated into the development process.
Release Manager: As the name implies, developers in this role are responsible for handling software versioning; coordinating and managing the release of software updates, patches, and new features to the deployed application. They also work together with the development and operations teams to ensure the software is shipped timely with the desired features and no issues in production.
Cloud Architect: Cloud architects are responsible for developing and managing cloud-based implementations of the software, which are secure, scalable, and cost-effective. They work with the developer and operations team to ensure the software is optimized for deployment on the cloud environment.
Automation Engineer: Automation engineers are tasked with the process of creating, maintaining, and testing automated scripts for automatic software testing, deployment, and maintenance.

Conclusion

Congratulations on making it to the end of this article. With this, you now have a basic understanding of the role of Developer Operations and its benefits to the software delivery process.

NOTE
For further study, check out the following resources:
Evolution of DevOps
Understanding the CI/CD pipeline
Automation in DevOps

Uploading Videos to YouTube with Amazon S3

Victory Tuduo — Mon, 07 Nov 2022 09:58:09 +0000

What is Amazon S3

Amazon S3 (Amazon Simple Storage Service) is an object storage service that can store and manage different forms of data. S3 stores these data as object within “buckets”. Files that can be stored include videos, audio, images, and text. This data can be accessed and utilized whenever needed. Amazon S3 is easy to set up, implement and has cost-management features; it provides cheaper storage capabilities.

Connecting to S3

To get started with Amazon S3, you will need an Amazon Web Services account. In your browser, log in to AWS if you already have an account, otherwise, create a new user account.

Bucket and Folder setup
A bucket in AWS is a container for storing data objects. in your AWS account, you can have numerous buckets and also store lots of data in each bucket. To create a bucket, a bucket name and an AWS region are required. After which we can upload objects to be stored in the created bucket. Objects to be stored are assigned a unique key identifier for ease of access.
To create a bucket, navigate to the services section of your dashboard and enter “S3” in the search bar:

On the new page that opens up, click on the “Create bucket” button. In the form on the next page, enter the name and region of your bucket, uncheck “block all public access”, and finally, click on the “Create bucket” button at the bottom of the page.

Restricting Access

There are different ways to secure data uploaded on AWS S3. Some of this methods are:

User access can be restricted to particular IAM users. This can be done by writing IAM user policies. This steps involves writing scripts in a console that define how particular IAM users can access a bucket and also additional permissions for adding, updating or deleting objects from the bucket.
Writing bucket policies to define access permissions to your bucket and the object stored in it. Only the owner of the bucket can define a policy for it. Policies created apply to all objects in the bucket. Bucket policies allows the owner grant permissions, or allow or block access to a bucket under various conditions.
Blocking public access for buckets that should not be available to public users.

Uploading Files from PC to Amazon

To upload files to your bucket, on the AWS S3 page, click on your created bucket from the list of buckets at the bottom of the page.

Next, click on the “Upload” button to add videos from your PC to your bucket. On the new page, click on “add File” to upload single files, or click on “add Folder” to add an entire folder to your bucket.

Navigate through your system directory and add the desired file(s). When you add a file(s), the file name and size will be displayed:

Click on the “Upload” button to add the file to AWS S3. There’s a new page with a progress bar that shows the process of the file getting uploaded. After a successful upload, it shows upload succeeded on the screen:

To view the uploaded video in a the browser, click on the uploaded video and navigate to the “permissions” tab. If you get a bucket owner prompt similar to the below image:

You can switch access control to ACL by clicking on the “bucket owner enforced” link and setting object ownership to ACLs enabled on the new page. With that done, we can now make the video public with ACL. To do this, click on object actions and select “make public with ACL” at the bottom:

Finally, click on the “Make public” button on the next page. With this done, you can access the video with the object URL from the properties section.

Connecting Amazon S3 to YouTube

There are different web platforms that offer services to connect AWS S3 to YouTube. An example of such platform is Zapier. To make use of Zapier, create a new user account on the website. Next, connect your Amazon S3 account to Zapier:

Click on the “Connect” button. An access key id and secret key are required to connect the AWS account to Zapier. If you don’t have one, on your dashboard click on “account”, then click on “security credentials”:

On the new page that opens up, select “access key” and click on “Create new access key”. A new key will be created for you. You can either download the key, or copy and store this key somewhere as it would only be displayed once. Copy and paste the access key and secret key in the required fields to connect the AWS account to Zapier. When this is done the account gets linked to Zapier and we can continue to the next step:

The next step is to connect the YouTube account that will be linked to the AWS S3 bucket with Zapier:

Click on the “Connect” button to sign in and allow Zapier access to your YouTube. Click on the “Next” button when this is done.
There is a new page where we define the fields we want Zapier to edit:

The required fields are selected by default. Click on the “Next” button to continue. Leave the other fields blank. And finally turn on Zap in the last section.

To handle creating and adding new files from a bucket on S3 to YouTube, we will create a new zap for this. Click on the “Create Zap” button on the navigation menu. Select Amazon S3 from the list of events and click on “Continue”:

Select your account and in the next section, select the bucket you wish to link to YouTube:

Next, set the trigger event to new or updated file and click on “Continue”:

For the action to be executed, select YouTube:

And for the event, select “Upload Video” and choose the YouTube account in the next section. For the “set up action” section we will use the file in the S3 bucket to fill the fields. Set the Privacy Status field to unlisted

Finally, click on publish zap, and turn on the zap:

When all this steps are completed, if we add a new video the the bucket on S3:

The zap executes and uploads the video to the YouTube channel. We can view the zap detail log to see this:

The uploaded video shows up on the YouTube channel:

Conclusion

In this tutorial, we learned how we can create a bucket on AWS S3, upload videos to the bucket and connect the bucket to YouTube for automatic deployments.

2022 Opportunities Tech outlook

Victory Tuduo — Fri, 31 Dec 2021 00:51:23 +0000

Introduction

With 2021 gradually rolling away with just less than 24 hours to go, 2022 is right before us. This year may have been a good year for some in tech, possibly landing a gig, building a cool app or simply advancing knowledge to be able to be a better developer in the field of choice. With 2022 close by, some people may be looking to venture into the tech industry and are wondering: where to start? Where can I fit in? Probably there may be some looking to do something not actually coding related but is still cool and profiting.

Goals

At the end of this tutorial readers will be aware of some opportunities present in the tech industry and will be able to pick a place to fit in come 2022.

What is Tech?

Amazing how one word could mean lots of different things when defined from different perspectives. A simple definition of Tech in relation to it as a career is that tech relates to a field that makes use of tools and set of skills or knowledge geared towards creating products or services that satisfy a particular need.

Would the tech industry be beneficial as a career path? The answer is pretty much a big YES! While tech jobs are really interesting to get into, statistics also show steady increases in demand in the tech sector and well grossing pay for various tech fields. Best tech jobs are projected to pay even more than the average median wage of $34,750. Here's a list of some tech jobs and their pay gotten from zdnet.com, The 10 fastest-growing salaries by occupation also included:

Technical support engineer ($68,651, +8.2%)
Cloud engineer ($136,479, +6.3%)
Business analyst ($97,633 +5.3%)
Web developer ($81,550, +4.9%)
Data engineer ($118,621, +4.7%
Cybersecurity engineer ($134,340, +4.3%)
Data architect ($133,064, +3.2%)

Some fields in the Tech Industry

With tech covering a wide range of skill sets, there are a lot of fields one can get into depending on interest or goal of venturing into tech.

Web Developers

This set of people are concerned with building scalable web applications. These applications may vary in terms of usage. Web development over recent years has been growing more popular and there's always an increasing demand for people in this field. If you have no problems with learning programming languages or writing codes and have always been fascinated about web pages and wondered how you can make one, well guess you just found your choice field :). Being such a broad field, web development is further divided into two parts, namely: front-end and back-end web development. The former deals with designing the user interface of the website probably in accordance to design specifications while the later deals with developing the applications back-end which may consist of the app's data management, provide authentication for users and much more. These are primarily things that occur but are not directly visible to the user.

Web Designers

Interested in the web but don't enjoy writing code? Well, these guys are responsible for everything users see on a site. They design the workflow of websites which are then designed by the developers. These design cover choices of fonts, animations and the application layout.

Software Developers

These guys write and ship large amount of codes which in turn developsp software used on a daily basis by individuals or companies. They develop applications, system softwares, operating systems among others.

Web Page Builders

They develop web applications, but what makes them different from the web developers mentioned earlier? Unlike web developers, these set of people make use of Content Management Systems (such as WordPress) – basically just using pre-existing tools to create a website without having to hard program.

UX / UI designer

UX focuses on the overall feel of a product and how customers interact using the application, while UI is focused on how the product is laid out. This covers the design of the product while maintaining consistency specified by the UX. UI designs can be on web sites, system applications layouts e.t.c

Technical writer

This set of people are concerned with authoring manuals or technical specifications on various topics which will be beneficial to their readers.

Game Engineer

Interested in the field of gaming? Here are some choices you can choose from in tech:

Game designer – works on developing the game concept – characters, setting, storyline, levels, animations. Basically the general idea behind the game
Game developer – has the technical skills required to turn the game idea into reality, by converting the sketches and storyline into a playable product
Game tester – the most fun job of them all – working to test the games thoroughly to uncover potential bugs and give insight on areas where the game can be further improved before being released to the public

project manager

Organizes and manages a team of professionals while taking the job of building a product or service. Make sure team members meet their quotas, resources are well managed and product is shipped timely.

Graphics Designer

Makes use of computer graphics software to create beautiful illustrations, design logos, fliers, UIs among others. A field that's easy to fall in love with if you have an apt for pretty designs.

3d Modelling and Animations

Concerned with creating character and environmental models for use in animations, games or other purposes. Makes use of animation software to create nice moving motion pictures or animations.

Tech recruiter

Identify potential job candidates for IT positions, reviews and submits these information to hiring managers for consideration.

Cloud Engineer

This set of people comprises of IT professionals responsible for any technological duties associated with cloud computing. These include design, planning, management, maintenance and support.

Cybersecurity engineer

People in this category are concerned with internet security and prevention of cyber crimes. They are sometimes called information security engineers. They identify threats and vulnerabilities in systems and software then use their skills to develop and implement high-tech solutions to defend against hacking, malware and ransomware, insider threats e.t.c

Conclusion

There are a lot of fields in the tech industry which would be a good fit for your choice of skill sets or interest, finding the right one to indulge in is the first step in taking a tech career.

Storing Images as Blob

Victory Tuduo — Thu, 11 Nov 2021 12:51:13 +0000

Introduction

When images are fetched from API's we simply get the images via URLs and anytime we need to re-use the image, we have to send another fetch request. This can be pretty annoying to keep repeating, as an alternative we can convert the image we get from our URL into a blob consisting of a base64 encoded form which we can use directly in the src attribute.

Goals

In this tutorial, users will learn how to convert images to blob, and store them in a blob format. These images will be fetched from an API and will be displayed in a React App.

Setting Up

For our React application, we simply have a single page that displays the image received from the API and the image received from the base64 format side-by-side. Pretty cool, 😎 right? Let's dive in.

Creating our App

We will be using ReactJs for this project. To set up React, we use the following command in the CLI:


 bash
npx create-react-app images

This creates a project folder named images which we will be using for our application. You can open this folder in your code editor. Your app structure should be similar to the tree diagram below:


 bash
┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo192.png
 ┃ ┣ 📜logo512.png
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.js
 ┃ ┣ 📜App.test.js
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.js
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜reportWebVitals.js
 ┃ ┗ 📜setupTests.js
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜yarn.lock

We will be making use of the App.js file to create our image viewing page and we will add some styles to it in the App.css file to give our webpage a better appearance.

Creating our Image view page

To start, we will clear up most of the boiler-codes that came in our App.js file until we have the structure below:


 js
import "./App.css";
import react from "react";

function App() {
  return (
    <div className="App">
    </div>
  );
}
export default App;

For our app, we will need a search bar to get an image that will be displayed. We will start by building this first:


 js
 <div className="App">
      <input type="search" placeholder="Find Image" />
      <button type="submit">Find</button>
    </div>

So here, we have the search input tag to search for our image and a button to submit it. To view our app in our browser, we run the npm start command in the CLI. Navigate to the localhost URL in your browser and you'll get a result similar to the image below:

Looks rather bland right? Let's liven things up with some styles. We can add these styles in the App.css file:


 css
.App {
  text-align: center;
  font-family: monospace;
  padding-top: 8px;
}
input {
  padding: 8px 4px;
  border: 1px solid #e8e8e8;
  margin: 8px;
}
button {
  padding: 8px 15px;
  text-transform: uppercase;
  font-weight: bolder;
  background: rgb(54, 54, 255);
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

Now, in our browser we have the following result:

Looks much better. Next up, we will fetch and display our image from the Unsplash API.

Creating Unsplash account

Unsplash API provides us with a means to get high quality images from Unsplash which we can put to different uses. To create a user account, navigate to the Unsplash page and click on the "Register as a developer" button. Fill in your details in the form on the next page and create your user account. Click on "Create a new application" and you'll be prompted to accept some "terms and agreements" then finally create a new application.

finally, we will need the access credentials at the bottom of our next page. copy this key and save it in your App.js file


 js
const key = "your access key";

For the purpose of this tutorial, we will hard-code our access key. Normally, it's better to store this key in a .env file or use a secret management app service like Doppler to store your keys.

Fetching images from Unsplash

Now that we have our access key, we can fetch our image with the Unsplash API. we will be using axios to make our request. We can install axios in CLI with the following command



npm install axios

With that set up, let’s get our image. We will import this module into our App.js file and make our request



...
import axios from "axios";
function App(){
    ...
    const link = "https://api.unsplash.com/search/photos";
  axios
    .get(link, {
      params: {
        client_id: key,
        query: "hp",
      },
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {});
}

Above, we have set up our fetch request. The link variable contains our URL to fetch images. Our axios request makes use of our key in the link's parameter and searches for the query "hp". Once we get a response, the response will be logged in our console. Below is an example of what the response looks like

The response consists of an array of ten images. We are steadily making progress and are almost done with our image view page, we just need to get the URl for one of the images from our response. First, we will need a variable to store this URL and use it in our application.



const [image, setImage] = react.useState("");

Then we can set setImage to the value of the first URL from our response.



... 
query: "hp",
      },
    })
.then(function (response) {
      setImage(response.data.results[0].urls.regular);
...

With this, we can create a img tag in our app and set the src attribute to image



<img src={image} alt="" />

One more thing, we need to set our search query to the input from our search bar rather than the "hp" string. To do this, we will create a state variable to contain the value of our input field, then we will place our fetch request in a function that will be called when we click the "Find" button.



const [query, setQuery] = react.useState("");
...
<input
        type="search"
        placeholder="Find Image"
        onChange={(e) => {
          setQuery(e.target.value);
        }}
      />

Then, for our Find button



<button type="submit" onClick={() => handleSubmit()}>
    ...

and the handleSubmit() function



function handleSubmit() {
    axios
      .get(link, {
        params: {
          client_id: key,
          query: query,
        },
...rest of the code

Here, we have added the search query from our input field to the params for our fetch request. now when we click on the "Find" button we have an image based on our search.

We can arrange the order the page is displayed through our App.js stylesheet.



.App {
...
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Converting Image to Blob

We have come to the main focus of our application; converting the image from our URL to Base64 format. To be able to convert an image to base64 format, first the image has to be of type "blob". Blob is short for "Binary Large Object" and is a data type that can store binary data.

To convert our images to data URL we will need to use File Reader



...
setImage(response.data.results[0].urls.regular);
getDataBlob(image); 
        async function getDataBlob(url) {
          var res = await fetch(url);
          var blob = await res.blob();
          var base64img = await parseURI(blob);
          console.log(base64img);
        }
async function parseURI(d) {
          var reader = new FileReader();
          reader.readAsDataURL(d);
          return new Promise((res, rej) => {
            reader.onload = (e) => {
              res(e.target.result);
            };
          });
        }

Above, we have two async functions for our image conversion. The getDataBlob function takes in the URL from our response, when res is returned it converts it to type blob. Then, to get the binary data of the image, we use the FileReader function. When we check in our console, we see a long string of characters that make up the binary data of our image. To use this data, we will store it in a variable and add it in the src attribute of another img tag.



  const [newimg, setNewimg] = react.useState("");

Then instead of console.logging "base64img", we can set this value to setNewimg.



setNewimg(base64img);

Finally, we can create another img tag to use the src "newimg"



<img src={image} alt="image 1" />
<img src={newimg} alt="image 2" />

Above are our two img tags. The former uses the response from our API, while the latter uses the blob data URL as their respective sources.

Here is an example of what your output looks like

Conclusion

Hurray! we have come to the end of this tutorial. In this tutorial we learned how to fetch images from the Unsplash API, convert them to type blob and get the data URL for use in our application.

Managing Firebase App Credentials with Doppler

Victory Tuduo — Wed, 06 Oct 2021 12:00:58 +0000

While .env files are a common method for defining configs and secrets, it gives rise to security risks and the issue of manual management of .env files across different environments can be an uphill task. In this article, we will introduce a better way of managing and securing secrets using Doppler.

Goals

In this article, we will be using a music application linked to Firebase as a case study. The app makes use of its credentials to access and use Firebase services. We will cover how to set up a Doppler project and migrate our Firebase app credentials from the .env file to Doppler.

What is Secret Management?

Secret management refers to the methods and tools used to organize, manage and secure digital authentication credentials. These credentials could be API keys, SSH keys or even encryption keys used to authorize users to provide access to applications or services.

What is Doppler?

Doppler is an amazing service with tools to manage and secure your digital credentials. It makes secret management easier for the programmer, provides a simple interface in the form of a dashboard to access stored secrets thereby boosting productivity.
The Doppler CLI provided by Doppler is an interactive tool in addition to the dashboard, to easily manage secrets in the CLI. It allows multiple workspaces to access the same secret if stored in the same directory.

Why choose Doppler?

Doppler supports different integrations such as Firebase, Docker, and Heroku, among others, making it an all-round choice for secret management. Previously, programmers hardcoded their configuration credentials within a .env file. This file is a configuration file used to store variables that will be used in an application environment. This method though is associated with security risks of credentials and can be a headache to keep hardcoding credentials whenever needed, thus the need for a secret management service. Doppler makes all this easier for the programmer, eliminates the need for hardcoding credentials and provides security features for our secrets.

Doppler Setup

In this article, we will be looking at a music application built on firebase and how to manage the credentials for this application. This application makes use of the firebase credentials to access the firebase cloud storage and database.
The app is integrated with the Algolia service to render data stored in Firebase to the application in real-time. This third-party service requires firebase app credentials to function, hence the need to manage our application's secrets.

App Structure

     ┣ 📂pages
     ┃ ┣ 📂api
     ┃ ┃ ┗ 📜hello.js
     ┃ ┣ 📜index.js
     ┃ ┣ 📜library.js
     ┃ ┗ 📜_app.js
     ┣ 📂public
     ┃ ┣ 📂images
     ┃ ┃ ┣ 📜img1.jpg
     ┃ ┃ ┗ 📜img2.jpg
     ┃ ┣ 📂songs
     ┃ ┃ ┣ 📜Måneskin - Beggin ( Testo)_2.mp3
     ┃ ┃ ┗ 📜Young Dumb & Broke Khalid .mp3
     ┃ ┣ 📜favicon.ico
     ┃ ┗ 📜vercel.svg
     ┣ 📂styles
     ┃ ┣ 📜arrangement.module.css
     ┃ ┣ 📜globals.css
     ┃ ┣ 📜Home.module.css
     ┃ ┣ 📜layout.module.css
     ┃ ┣ 📜library.module.css
     ┃ ┣ 📜nav.module.css
     ┃ ┣ 📜player.module.css
     ┃ ┗ 📜search.module.css
     ┣ 📜.env
     ┣ 📜.eslintrc.json
     ┣ 📜.firebaserc
     ┣ 📜.gitignore
     ┣ 📜firebase.js
     ┣ 📜firebase.json
     ┣ 📜next.config.js
     ┣ 📜package-lock.json
     ┣ 📜package.json
     ┣ 📜README.md
     ┣ 📜yarn-error.log
     ┗ 📜yarn.lock

Here, we have the layout of our music application. Our focus is on our secret file: the .env file containing our firebase app credentials. In this file, we have:

    apiKey=BCzdSeAsRHUqMkC2SK6gEaXSX-GbJXgP5oyIoAQ
      authDomain=music-application-9d266.firebaseapp.com
      databaseURL=https://music-application-9d266-default-rtdb.firebaseio.com
      projectId=music-application-9d266
      storageBucket=music-application-9d266.appspot.com
      messagingSenderId=275317796075
      appId=1:677357796075:web:f01db248b63683x8f3b4ae
      measurementId=H-WL7BLDDZ3D

Creating a Doppler Project

To set up Doppler, we first need to create a user account, create a workspace then we create a project for our application.

After this you will get a project page similar to the image below:

Click on the “+” icon to create a new project and enter the name of the project.

After creating a project, you get an interface with three options: development, staging and production. These interfaces help us manage our app secrets in different stages of development.

Doppler CLI

Now, we will set up the Doppler CLI to manage our secrets via the command line. The Doppler installation guide provides different commands for installing Doppler CLI in different shells. I will be making use of the Windows OS CLI commands. To do this, we must first install the Scoop Package Manager, then use this to install the Doppler CLI. In Powershell, enter the following:

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Select yes in the prompt that appears, then enter:

    iwr -useb get.scoop.sh | iex

Now we can install the CLI with the following script:

    # Add Doppler's scoop repo
    scoop bucket add doppler https://github.com/DopplerHQ/scoop-doppler.git

    # Install latest doppler cli
    scoop install doppler

After running the above commands, you can verify the installation by entering the following in the CLI:

    doppler --version

To set up the project on our local machine with Doppler, enter the following into the CLI:

    doppler login

This command opens up a browser window requesting for authentication. Login and enter the auth code provided by the CLI to complete the set up.

Secret management with Doppler

We can now migrate our app credentials from our .env file to Doppler. To do this, navigate to the project we created earlier on Doppler. Under development, click on dev.

Click on the import secrets option, then copy your app credentials into the provided space and click on import secret.

After this, we get a page displaying the added secrets:

Now to set up Firebase to fetch our app credentials from Doppler when we deploy our app, edit your package.json file as shown below:

      "name": "functions",
      "description": "Firebase app credentials",
      "scripts": {
        "lint": "eslint .",
        "serve": "doppler run -- firebase emulators:start --only functions",
        "shell": "doppler run -- firebase functions:shell",
        "start": "npm run shell",
        "deploy": "npm run update_config && firebase deploy --only functions",
        "update_config": "firebase functions:config:unset env && firebase functions:config:set env=\"$(doppler secrets download --config prd --no-file --silent)\"",
        "logs": "firebase functions:log"
      },
      .........
    }

Fill out the required fields and the next time you run firebase deploy in CLI to deploy your app to Firebase, the app credentials will be fetched from Doppler.

Conclusion

We have come to the end of this tutorial. In this tutorial, we learned the concept of secret management, how to set up a doppler project, and how to migrate our application credentials from a native .env file to Doppler and make use of these credentials whenever we deploy our application.

A Quick Guide to Understanding React Router

Victory Tuduo — Thu, 23 Sep 2021 15:41:25 +0000

Why react router?

When building single page applications on the web with multiple views it is a better practice to use display different pages using router and help your user navigate through them rather than having to refresh the whole web page every time your user switches between pages.
Here we’ll go over a React library for routing between pages: The React Router.

Prerequisites

To be able to fully grasp this tutorial it is expected you have:

Basic knowledge of JavaScript, Reactjs and React Hooks.
You have a version of Node.js installed.
Access to Package managers such as npm/yarn/npx.

Getting Started

STEP 1: Install React Router
First step to using React Router will be installing the appropriate package.
There are basically three (3) different packages: React Router, React Router DOM and React Router Native.
The React Router is the core dependency use for the other two packages listed above. React Router DOM is for building web applications while React Router Native is for mobile applications built with React Native.
We install React Router DOM from our command line by writing:

using npm

npm install react-router-dom

using yarn

yarn add react-router-dom

SETTING UP REACT ROUTER

After installation is complete we need to set up the router for use within our react project. We do this with a component called BrowserRouter. Browser Router keeps track of routes history in the react app.To import we write:

Import {BrowserRouter, Route} from ‘react-router-dom’;

Note that its also a practice to add an alias as Router when importing the BrowserRouter. It can be written as:

Import {BrowserRouter as Router, Route} from ‘react-router-dom’;

To provide routes within our application we import the Route component and then wrap our application within routes:

function App(){
        return (
            <Router>
            {/* routes go in here*/}
            </Router/>
            );
}
export default App;

This way we declare individual routes within our application.
You cannot access any router specific data that is declared outside the router. To do that we use history data.

USING THE ROUTE COMPONENT

To use the routes we declare them with two props for every route: path and component.

function About() {
  return (
    <div>
      <p>this is an about page.</p>
    </div>
  );
}
export default About;

We can then import this into our App and use a route:

function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

The path props tells us what path our route is located.
The component prop contains the component for the declared path. Numerous routes can be declared within the router. Alternatively we can also write a route without the component prop:

<Router>
      <Route path="/about">
        <About />
      </Route>
    </Router>

You can display a component in every of the routes by adding the component within the Router:

function App() {
  return (
    <Router>
      <Contact />
      <Route path="/Home" component={Home} />
        <Route path="/about" component={About} />
    </Router>
  );
}

function Contact() {
  // visible on every page
  return <>This is a contact</>
}

At this point we notice that when we have more than one route within our router we see all the contents for all the routes when we visit each route component
We solve this using the Switch Component:

import { BrowserRouter, Switch, Route } from "react-router-dom";

We then wrap our Routes within the Switch:

<Router>
      <Contact />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>

The Switch component is used to check the child routes and display only the one which the URL matches the current path.

CREATING NAVIGATION

We can navigate through our routes with the help of a Link component:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

We then write the Link with a prop To which contains the path to the component to be rendered:

<Link to=”/about”>
  //here we can add an item link an anchor tag, button or nav item to perform navigation on click
</Link>

PAGE NOT FOUND (404)

Using routes we can also create a custom 404 page in the event that a user navigates to a path that doesn’t exist within the application. To do that we create a Route with a path of *:

//other code as before  
<Route path="*" component={NotFound} />

Any time the user navigates to a path that does not exist they will be navigated to the NotFound component.

USE HISTORY HOOK

React Router DOM provides us with a component called use History which allows us to return information associated with our component such as the path associated with our current component.

import { useHistory } from "react-router-dom";
function About() {
  const history = useHistory();

  console.log(history.location.pathname); // will return '/about'

  return (
    <>
     <h1>current path: {history.location.pathname}</h1>
    </>
  );
}

PASSING DATA BETWEEN ROUTES

We can pass a value from one page to another page routed to within our path by adding it within our Route by adding it as a parameter:

 <Route path = "/Result/:id" component={Result} />

If we wish to pass a variable such as an item name from within the Result Component referenced above we can add it within our Link.

<Link to={`/Result/${thevaraible}`}

We can then access the information from the path on the routed page from the link by referencing it as a params:

const Results =({match : { params }) =>{
    return( <h1>{params.id}</h1>)
}

CONCLUSION

The purpose of this blog was to give you a quick insight on how to implement React router for use within your React app. With this you should be able to make use of the react router DOM to build web applications.

How to Implement Role-Based User Authentication in React Apps

Victory Tuduo — Thu, 23 Sep 2021 09:50:54 +0000

In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of privileges are assigned to them. You can achieve this with authentication. Through authentication, we validate user-specific credentials to determine if the user is genuine and then assign a specific role, which could be a simple client or administrator access, for example.

User authentication is usually carried out by using a trusted third-party customer identity and access management (CIAM) software. This tutorial uses LoginRadius API to carry out user authentication and role assignment in a React application.

Prerequisites

You should know React to be able to follow this tutorial. Also, you should have the node package manager or yarn installed on your PC.

Overview

First, you need to install the LoginRadius React SDK. You can then configure it to provide authentication and role assignment for use within your React application.

Introduction

What is LoginRadius?

According to its docs, "LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website".

LoginRadius has features to add different login authentication options, including email, phone, and social network logins, such as Google and Facebook. It also provides security on these data. Some security features it offers include:

Accessing the Admin Console: Generally, this is where we can control authentication factors regarding our apps.
Using API Secret: A unique generated key to access our API.
Multi-Factor Authentication: This features covers two-factor authentication.
SSL Verification

LoginRadius comes with different SDKs to support different frameworks. One of them is the LoginRadius ReactJS SDK, which allows you to add authentication within your React app.

Getting Started

Creating a LoginRadius Account

First, you need to create a LoginRadius account with a Developer Pro plan selected instead of the free plan. This is to be able to access role management features, which are only available in the Developer Pro plan.

You'll get a page requesting you to create a new application. Click on "create a new application". After which, a page comes up where you should enter the name of your app and the URL to your app. Here, Input any name and URL of your choice.

Auth Page (IDX)

LoginRadius allows you to create a custom login page (an auth page that you can customize from the dashboard), which you can then preview. This is a page provided by LoginRadius that you can easily customize to contain different form contents. Features like user log in, signup, email, and password have been pre-implemented on this page. You'll be using this page for registration and authentication with your react application. To learn more on how to customize this page to contain more form contents, refer to customizing Auth Page.

To be able to use user roles within your app, you first have to set up these roles and their respective privileges from the dashboard. In this tutorial, you'll set up two roles, namely Admin and Client.

To set up roles, navigate to your dashboard, click on "user management".

Click on "manage roles" and click on "add roles". A popup opens in which you add the role name. And in the permission tab, add what permissions that role should have.

This tutorial has added a "client" role with a permission called "view" and an "admin" role with permissions: "view, edit, delete". Enable "set as default" for the client role to automatically assign the client role to any user in our app by default.

Integrate LoginRadius into ReactJS

Creating a React application

To build your application, you'll be using the command-line interface (CLI) with create-react-app

For node users:

npx create-react-app {project name}

Alternatively, if you're using yarn, write:

yarn add create-react-app {project name}

Next, cd into the directory with the command below:

cd {project name}

Configuring LoginRadius for React

Next, you'll install the LoginRadius React dependency using the CLI:

For node users:

npm install loginradius-react

yarn:

yarn add loginradius-react

To use the react-router components, you need to install react-router-dom using CLI. Run the following code to achieve this:

For node:

npm install react-router-dom

yarn:

yarn add react-router-dom

Setup a .env file in the root directory with the following details:

REACT_APP_LR_APP_NAME={app name}
REACT_APP_API_KEY={your app key}
REACT_APP_SECRET={your secret key}

You can find the keys required above in your dashboard within user configuration: API key and secret.

Building our Login Components

The Auth Page(IDX) is a web page created for you that reflects the configurations you create in our dashboard. You'll utilize this page as the login and signup page within your app and set up routes to route users to a different page based on their roles.

Go to the index.js file and add:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { LRAuthProvider } from "loginradius-react";

ReactDOM.render(
<React.StrictMode>
  <LRAuthProvider
    appName={process.env.REACT_APP_LR_APP_NAME || ""}
    apiKey={process.env.REACT_APP_API_KEY || ""}
    redirectUri={window.location.origin}
  >
    <App />
  </LRAuthProvider>
</React.StrictMode>,
document.getElementById("root")
);

In the above code, you made imports for required modules, set up your LRAuthProvider component with parameters appname and apikeys from your .env file, and also created your redirect URI. In this case, it is equal to your current window.location.origin, which is the URL of the webpage -- in this case, it is our localhost.

Localhosts are whitelisted by default. If you're building your app using a hosted site, you have to whitelist the URL in your dashboard. The entry component in the code is set to the App component.

In the App.js component, add the following code:

import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Auth from "./Landing";
import CallAPI from './Return';

function App() {
return (
 <Router>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <div>{"Application home"}</div>
            <Auth />
          </Route>
          <Route path="/login">
          <CallAPI />
          </Route>
        </Switch>
      </div>
    </Router>
);
}

export default App;

Here, you've set up your routes using Browser routes, Switch, and Route components imported from the react-router-dom module. The path to your home page is blank ("/"). It displays the text Application home. It runs an Auth component that was earlier imported. A second route is made for a second page with a path of "/login" that runs the CallAPI component on the new page.

You'll then create a page that will serve as the landing page for your site. To do this, create a Landing.js file in your src folder and input the following code:

import { useLRAuth } from "loginradius-react";

 const Auth = () => {

 const {isAuthenticated,loginWithRedirect,logout } =  useLRAuth();
   if (isAuthenticated) {
     return (
       <div>
         <button onClick={() => logout()}>
           Log out
         </button>
       </div>
     );
   } else {

     return <button onClick={() => loginWithRedirect("/login")}>Login/Register</button>;

   }
 }; 

 export default Auth;

In the code written above, you've used loginWithRedirect, loginWithPopup, and logout authentication methods from the useLRAuth hook in your components to set up the authentication flow within your React application. You can also get access to the authentication state using isAuthenticated. The isAuthenticated method is used to check if the user is already logged into the app; it true, it returns true and displays a log out button that is connected to a logout function. Else, it returns false and displays a Login/Register button, which when clicked is set up to redirect to the path /login. The loginWithRedirect() and logout() methods use the Auth Page (IDX), where registration and login functionality is already implemented to perform these tasks.

You can style the button to make it easier to see by adding the following code within your App.css file:

//for our login button on our landing page 
button{
  background-color: #2d56da;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
}
//for the output in our login route which we will cover later
span{
  font-size: 24px;
  height: 80vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Using the LoginRadius API

As an additional feature, you can use the LoginRadius React SDK to access the API to get parameters that are assigned upon logging in using the login form. You can use this method to check if a user is a client or administrator. Whenever a user creates an account using the form, the user is assigned a unique user-id called Uid, which you can view in your dashboard under "manage users". You can reference this user-id to determine your users’ roles. To do this, you need to fetch and return the Uid of the current user. The fetch request for the user role requires the Uid and your app secret key as parameters within the URL.

In your src folder, create a file name return.js, and populate it with the following code:

import React, { useEffect, useState } from "react";
import { useLRAuth, withAuthenticationRequired } from "loginradius-react";

const CallAPI = () => {

  const [resp, setResp] = useState(null);
    const { user } = useLRAuth();
    const uid = user["Uid"];


  useEffect(() => {
    (async () => {
      try {
        const response = await fetch(
          `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,
          {}
        );
        setResp(await response.json());
      } catch (e) {
        console.error(e);
      }
    })();
  });

  if (!resp) {
    return <div>Loading...</div>;
  }

  return <span>{JSON.stringify(resp, null, 2)}</span>;
};

export default withAuthenticationRequired(CallAPI, {
  onRedirecting: () => <div>Loading...</div>,
});

Here, within your CallAPI component, you've used usestate hook to create two states resp and setResp to check if you have received a response from the API. A constant user was made to use the LAuth method to get the current user data, and then the next line gets the id of the current user. The useeffect React hook that runs after the render contains an asynchronous function is used to fetch the role of the current user uid. It returns the data and outputs it in JSON form, which value is given to SetResp. Else, it throws an error if the fetch request fails.

Since it is an asynchronous function, the code below it runs while fetching and awaiting a response. resp is false during this time while waiting for the result of the asynchronous function. Therefore, it outputs "Loading..." on the screen until the async returns the data that it then outputs.

The last code block: export is simply used to show "Loading..." on the screen during redirecting.

Running the code

You can run the present code by cd into your parent directory and running:

npm start

When it successfully starts the server, you would have a similar page as follows:

This is the landing page you've built in the Auth component and is your / path in your routes within App.js. If you click on the "login/register" button, you'll be redirected to your custom Auth Page (IDX) provided by LoginRadius, where you can create a user account and login. You can manage the users who have accounts from your dashboard in "manage users".

After logging in with your user, you'll get redirected to the /login route that then runs the CallAPI component and gives you a result similar to the following:

This is the current role of the user. Any user would have the role of client assigned since you've set to assign the client role by default to all our users from your dashboard during the creation of roles.

Managing User Authentication and Data

User Authentication

In the above section, you've created a user account with different parameters for the email and password. Upon creation of an account, you get directed to the login page, where you can sign in using the credentials of the created account. Authentication was carried out on the parameters in the input field by the LoginRadius API set up in the Auth Page.

Your user authentication is carried out by the API. This checks the input details against the registered user details. If any input not matching this is put in the form, you'll get an alert "user does not exist" upon clicking the login button. Upon logging in, your app key and secret are sent by your app to the authentication server. Upon authentication, the server responds with an access token and authorizes the user. To view this token, you can create a new file called Token.js and insert the following code into it:

import React, { useEffect, useState } from "react";
import { useLRAuth, withAuthenticationRequired } from "loginradius-react";

const CallAPI = () => {
  const { getAccessTokenSilently } = useLRAuth();
  const [resp, setResp] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const token = await getAccessTokenSilently();
        const response = await fetch(
        `https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}&apiKey=${process.env.REACT_APP_API_KEY}`,
          {}
        );
        setResp(await response.json());
      } catch (e) {
        console.error(e);
      }
    })();
  }, [getAccessTokenSilently]);

  if (!resp) {
    return <div>Loading...</div>;
  }

  return (
    <span>{JSON.stringify(resp, null, 2)}</span>
  );
};

export default withAuthenticationRequired(CallAPI, {
    onRedirecting: () => <div>Loading...</div>, 
    });

The code above runs a fetch request for the access token and displays it when the data is returned. To view the output of this code, import the newly created file into your App.js file. Since the name of the function component in the code is still CallAPI, you don't need to edit the component called in the login route. You just need to comment out the former import for the component from your return.js file as shown below:

import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Auth from "./Landing";
// import Login from "./Login";
import React from 'react';
// import CallAPI from './Return';
 import CallAPI from './Token';

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <div>{"Application home"}</div>
            <Auth />
          </Route>
          <Route path="/login">
            <CallAPI />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
export default App;

You then need to run the code by starting the server using the npm start command. Upon starting the server, when you log in, you'll have your user token displayed on the screen. Your output will be similar to the following:

Here, you can see the access token and its details. You can then return your code to the previous CallAPI component imported from Return.js.

User Data

You can view and manage user accounts from the dashboard. You can find the panel for this under "User management":

Manage users:

Here, you can view the account information of your users, search for a particular user details using the email, Uid, or phone number as the query in the search box. Also, the panel provides an option to reset the password of a user, block users, and delete users as the above image shows. You can create new users by clicking on the "add user" button and filling in the details of the new user.

Viewing User Permissions

To view all roles and permissions for your app, change the URL in the fetch request to https://api.loginradius.com/identity/v2/manage/role, keeping the rest of the URL the same. That is, it still contains your appkey and appsecret parameters.

Reload your page, and you'll have an output similar as follows:

Adding a Role to the Current User

To add the Admin role to the current user, create objects for this by adding the following code within the parenthesis after your fetch URL:

method: "PUT",
     headers: {
      'Content-Type': 'application/json',
     },
     body: JSON.stringify({
      roles: ["Admin"],
     }),

This adds the Admin role to the current logged-in user since it is the Uid that is within our URL. fetch uses a GET request by default. Since you're making a change to the URL, you're using a PUT method instead. You'll get a result similar to as follows:

The user has both client and admin roles because you've added client roles by default to all our users.

Assigning Client and Admin roles

To assign specific roles to different people, first you should uncheck the set as default in the "manage roles" section of your dashboard. You can then run an if block to check if the users’ logged-in emails are equal to a particular set of emails and then perform the assignment of admin roles to them; else, assign the client roles instead. Modify your return.js file as below:

import React, { useState } from "react";
import { useLRAuth, withAuthenticationRequired } from "loginradius-react";

const CallAPI = () => {

  const [resp, setResp] = useState(null);
  const { user } = useLRAuth();
  const uid = user["Uid"];
  var response;
  const email = user["Email"];
  var emailmain = email[0].Value;


  (async () => {
    if (emailmain.toLowerCase() === "admin@example.com"){
      try {


        response = await fetch(
          `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,
          {
            method: "PUT",
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              roles: ["Admin"],
            }),
          }
        );
        setResp(await response.json());
      } catch (e) {
        console.error(e);
      }
    }
    else {
       try {
         response = await fetch(
           `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,
           {
             method: "PUT",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify({
               roles: ["Client"],
             }),
           }
         );
         setResp(await response.json());
       } catch (e) {
         console.error(e);
       }
    }
  })();


  if (!resp) {
    return <div>Loading...</div>;
  }

   return <span>
    Welcome user : {uid}<br/>
    Email : {emailmain}<br/>
    {JSON.stringify(resp, null, 2)}
  </span>;
};

export default withAuthenticationRequired(CallAPI, {
  onRedirecting: () => <div>Loading...</div>,
});

In the code above, you've created a const email that returned an array containing the user email. To get the email specifically, you've created another variable emailmain which gets the value at a particular array position containing the user email.

The async request block has now been modified to check if the user email being used for logging in is equivalent to a particular email which you've declared. Alternatively, you can have your emails pulled from a database and assign the admin roles to the ones you want. The else block assigns a client role to emails that do not meet the first criteria. When you create a new account with an email similar to what I have in the if block, that is admin@example.com; when rerouted to the /login path, you'll discover that the role of admin was assigned while any other email will have the client role assigned upon login. The return statement returns the user id of the logged-in user, the email, and then the role in a JSON format. The output would be similar to the following:

Conclusion

This tutorial covered:

Setting up LoginRadius with a React app
Using the setup to authenticate users and assigning specific roles with different privileges

These privileges can be used to give users certain permissions as to what they can do on your website.

LoginRadius is a great tool and is easy to implement if you want to implement authentication in your application.

A working version of the code used in this tutorial is available on Github.