DEV Community: Gabi Dombrowski

How to Build a Secure React and Fastify API App

Gabi Dombrowski — Thu, 22 Dec 2022 19:48:59 +0000

The National Aeronautics and Space Administration (NASA) is an independent agency of the US federal government, responsible for space exploration and research, with field facilities across the United States. In this tutorial, we'll set up an app to keep track of what NASA facilities we've visited and which ones we still want to check out.

Our app will be a monorepo with Okta authentication, using React for the frontend and Fastify for the backend. Fastify is a highly performant web framework with low overhead that we'll connect to a PostgreSQL database. We'll also use Lerna to manage the frontend and backend apps in a monorepo.

Prerequisites

Create React App currently requires Node >= 14.0.0 and npm >= 5.6. The latest required versions can be found at https://reactjs.org/docs/create-a-new-react-app.html. This tutorial was created using Node v18.8.1 and npm v8.11.0.

A Docker installation is required as well.

Set up OAuth2 and OpenID Connect (OIDC)

We'll be using Okta's SPA redirect model to authenticate.

Before you begin, you'll need a free Okta developer account. Install the Okta CLI and run okta register to sign up for a new account. If you already have an account, run okta login. Then, run okta apps create. Select the default app name, or change it as you see fit. Choose Single-Page App and press Enter.

Use http://localhost:3000/login/callback for the Redirect URI and set the Logout Redirect URI to http://localhost:3000.

What does the Okta CLI do?
The Okta CLI will create an OIDC Single-Page App in your Okta Org. It will add the redirect URIs you specified and grant access to the Everyone group. It will also add a trusted origin for http://localhost:4280. You will see output like the following when it's finished:

Okta application configuration:
Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

NOTE: You can also use the Okta Admin Console to create your app. See Create a React App for more information.

NOTE: Take note of your client ID and issuer as this will be used in a subsequent step.

Setup Lerna for monorepo management

Lerna is a tool used to manage multi-package repositories. In this project, it'll allow us to have a single repository where both our frontend and API packages live.

1. If you don't already have npx installed, you can run npm i npx to do so.

2. Create a project root directory named okta-react-fastify.

3. Add Lerna to your project by running the following in your project root directory:

npx lerna@latest init

4. Create the frontend and api packages:

cd packages
mkdir frontend api

NOTE: The team behind Nx now manages Lerna, so if you'd like to integrate Nx's additional robust, scalable, and faster tooling for managing monorepos, check out their documentation on integrating Nx and Lerna.

Add needed Fastify backend and React frontend dependencies with TypeScript

1. In packages/api, run:

npm init fastify

2. Add the required backend packages:

npx lerna add @fastify/postgres@5.1.0 packages/api
npx lerna add dotenv@16.0.2 packages/api
npx lerna add @okta/jwt-verifier@2.6.0 packages/api
npx lerna add pg@8.8.0 packages/api

3. Add TypeScript and needed types to the backend repository:

npx lerna add @types/pg@8.6.5 packages/api --dev
npx lerna add typescript@4.8.3 packages/api --dev

4. Next, let's create a basic React application using Create React App. We'll use the template for TypeScript with it as well. In the created packages/frontend directory, run:

npx create-react-app . --template typescript

5. Add the frontend Okta dependencies:

npx lerna add @okta/okta-auth-js@7.0.1 packages/frontend
npx lerna add @okta/okta-react@6.7.0 packages/frontend

6. You can now run npx lerna bootstrap to install your package dependencies.

NOTE: Our demo repository uses React ^18.2.0 and React Scripts 5.0.1.

Set up the PostgreSQL Docker instance

1. In your project's root directory, create a file docker-compose.yml:

services:
  postgres:
    container_name: "nasa-facilities"
    image: "postgres:latest"
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USERNAME: "${POSTGRES_USERNAME}"
      POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
      POSTGRES_DB: "${POSTGRES_DB}"

2. Create a .env file in the same project root directory and add the following:

POSTGRES_USERNAME=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=nasa-facilities

3. To use the Docker configuration we created, run docker compose up.

4. There is a provided PostgrSQL data dump ./nasa-facilities_20200910.sql in the example repo. You can import it by running the following from the project root directory:

docker exec -i nasa-facilities psql -U postgres nasa-facilities < ./nasa-facilities_20200910.sql

Your newly created Docker instance is now running a PostgreSQL database with the restored data.

NOTE: The PostgreSQL dump included in the demo repo uses data from https://www.kaggle.com/datasets/nasa/nasa-facilities.

Create the API backend app using Fastify

1. In the command line, go to your backend repository root directory at packages/api.

2. Update package.json by adding the following to allow the backend application to compile using TypeScript:

{
  "main": "build/index.js",
  "scripts": {
    "start": "tsc && node build/index.js"
  }
}

3. Initialize a Typescript config file by running:

npx tsc --init

4. Add the following to tsconfig.json to output the build files to the proper directory:

"outDir": "build"

5. Create a .env file with the following and replace the Okta values with the prior output from the CLI:

CONNECTION_STRING=PostgreSQL://postgres:postgres@localhost:5432/nasa-facilities
OKTA_ISSUER=https://{yourOktaDomain}/oauth2/default
OKTA_CLIENT_ID={yourOktaClientId}
OKTA_AUDIENCE="api://default"

6. Create an index.ts file and add the backend application Fastify server code:

import fastifyPostgres from "@fastify/postgres";
import Fastify, { FastifyInstance, FastifyRequest } from "fastify";
import * as dotenv from "dotenv";

dotenv.config();

const fastify: FastifyInstance = Fastify({
  logger: {
    serializers: {
      res(reply) {
        return {
          statusCode: reply.statusCode,
        };
      },
      req(request) {
        return {
          method: request.method,
          url: request.url,
        };
      },
    },
  },
});

fastify.register(fastifyPostgres, {
  connectionString: process.env.CONNECTION_STRING,
});

const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};
start();

7. Next, let's create our Fastify API routes along with their appropriate CRUD operations in a new file routes/facilities.ts:

import { FastifyInstance } from "fastify";
import { FastifyReply, FastifyRequest } from "fastify";

interface IFacility {
  Center: string;
  Facility: string;
  Status: string;
  City: string;
  State: string;
  Visited: boolean;
  id: bigint;
}

async function facilitiesRoutes(fastify: FastifyInstance) {
  const client = await fastify.pg.connect();

  fastify.get(
    "/facilities",
    async (request: FastifyRequest, reply: FastifyReply) => {
      let facilities: IFacility[] = [];

      try {
        const { rows } = await client.query("SELECT * FROM facilities");
        if (rows.length == 0) throw new Error("No facilities found");

        facilities = rows;
        reply
          .code(200)
          .header("Content-Type", "application/json; charset=utf-8")
          .send([...facilities]);
      } catch (error) {
        const errorMessage = (error as Error).message;
        throw new Error(errorMessage);
      }
    }
  );

  fastify.patch(
    "/facilities/:id",
    async (request: FastifyRequest, reply: FastifyReply) => {
      const { id } = request.params as { id: bigint };
      const { visited } = request.body as { visited: boolean };

      const query = {
        text: `UPDATE public.facilities SET 
                "Visited" = COALESCE($1, "Visited")
                WHERE id = $2`,
        values: [visited, id],
      };

      try {
        await client.query(query);
        reply.code(204);
      } catch (error) {
        const errorMessage = (error as Error).message;
        throw new Error(errorMessage);
      }
    }
  );

  fastify.delete(
    "/facilities/:id",
    async (request: FastifyRequest, reply: FastifyReply) => {
      const { id } = request.params as { id: bigint };

      const query = {
        text: `DELETE FROM public.facilities
                  WHERE id = $1 RETURNING *`,
        values: [id],
      };

      try {
        await client.query(query);
        reply.code(204);
      } catch (error) {
        const errorMessage = (error as Error).message;
        throw new Error(errorMessage);
      }
    }
  );
}

export default facilitiesRoutes;

8. To register these routes with our Fastify instance, add the following to index.ts:

fastify.register(facilitiesRoutes);

NOTE: Don't forget to also import the facilitiesRoutes after adding the above line.

9. Then we'll create a utils/jwt-verifier.ts file that will include logic to verify the access token included in API calls from the frontend:

import OktaJwtVerifier from "@okta/jwt-verifier";
import dotenv from "dotenv";
import { FastifyReply, FastifyRequest } from "fastify";

dotenv.config();

const oktaJwtVerifier = new OktaJwtVerifier({
  issuer: process.env.OKTA_ISSUER || "",
  clientId: process.env.OKTA_CLIENT_ID
});

const audience = process.env.OKTA_AUDIENCE;

export const jwtVerifier = async (
  request: FastifyRequest,
  reply: FastifyReply
) => {
  const { authorization } = request.headers;

  request.log.info({ authorization });

  const match = authorization?.match(/Bearer (.+)/);

  if (!match) {
    return reply.status(401).send();
  }

  if (!authorization || !match) {
    reply.code(401).send();
  }

  try {
    const accessToken = match[1];
    const { claims } = await oktaJwtVerifier.verifyAccessToken(
      accessToken,
      audience || ""
    );

    request.log.info({ claims });

    if (!claims) {
      reply.code(401).send();
    }
  } catch (err) {
    console.log(err);
    reply.code(401).send();
  }
};

10. We'll then add a Fastify Prehandler Hook to index.ts that will run the jwtVerifier logic with each Fastify route:

fastify.decorate("jwtVerify", (request: FastifyRequest) => {
  fastify.log.info(`The incoming request is: ${JSON.stringify(request)}`);
});

fastify.addHook("preHandler", async (request, reply, done) => {
  return jwtVerifier(request, reply);
});

NOTE: An import will also need to be added for jwtVerifier.

Your final packages/api/index.ts file should look like this:

import fastifyPostgres from "@fastify/postgres";
import Fastify, { FastifyInstance, FastifyRequest } from "fastify";
import * as dotenv from "dotenv";
import facilitiesRoutes from "./routes/facilities";
import { jwtVerifier } from "./utils/jwt-verifier";

dotenv.config();

const fastify: FastifyInstance = Fastify({
  logger: {
    serializers: {
      res(reply) {
        return {
          statusCode: reply.statusCode,
        };
      },
      req(request) {
        return {
          method: request.method,
          url: request.url,
        };
      },
    },
  },
});

fastify.register(fastifyPostgres, {
  connectionString: process.env.CONNECTION_STRING,
});

fastify.decorate("jwtVerify", (request: FastifyRequest) => {
  fastify.log.info(`The incoming request is: ${JSON.stringify(request)}`);
});

fastify.addHook("preHandler", async (request, reply, done) => {
  return jwtVerifier(request, reply);
});

fastify.register(facilitiesRoutes);

const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};
start();

Configure the React app

Add "proxy": "http://localhost:3000" to packages/frontend/package.json so that React knows what base URL our API calls will need to make.
In a .env file in the packages/frontend directory, add the needed environment variables:

PORT=3001
REACT_APP_OKTA_ISSUER=https://{yourOktaDomain}/oauth2/default
REACT_APP_OKTA_CLIENT_ID={yourOktaClientId}
REACT_APP_OKTA_BASE_REDIRECT_URI=http://localhost:3001

NOTE: Make sure to replace {yourOktaDomain} and {yourOktaClientId} with your own Okta domain and client ID.

NOTE: We are switching the default port React will run on because the backend API app will use port 3000 by default as well.

Create React components

Let's create our React components for render on the frontend.

1. In a newly created src/components directory, add the following files:

login.tsx

import { useOktaAuth } from "@okta/okta-react";
import { Navigate, useNavigate } from "react-router-dom";
import "../App.css";

export function Login() {
  const navigate = useNavigate();
  const { authState } = useOktaAuth();

  const handleLoginClick = () => {
    navigate("/facilities");
  };

  return authState?.isAuthenticated ? (
    <Navigate to="/facilities" replace />
  ) : (
    <div className="form-wrapper">
      <form onSubmit={handleLoginClick}>
        <h2>Welcome Back!</h2>
        <input type="submit" value="Login" />
      </form>
    </div>
  );
}

NOTE: Our app uses React Router v6, which utilizes the new useNavigate to replace useHistory to programmatically navigate.

facilities.tsx

import { useOktaAuth } from "@okta/okta-react";
import { useEffect, useState } from "react";

interface IFacility {
  Center: string;
  Facility: string;
  Status: string;
  City: string;
  State: string;
  Visited: boolean;
  id: bigint;
}

function getErrorMessage(error: unknown) {
  if (error instanceof Error) return error.message;
  return String(error);
}

function Facilities() {
  const [data, setData] = useState<IFacility[]>();
  const [errors, setErrors] = useState<string>();
  const { authState, oktaAuth } = useOktaAuth();

  const logout = async () => {
    try {
      await oktaAuth.signOut();
    } catch (err) {
      throw err;
    }
  };

  useEffect(() => {
    const apiCall = async () => {
      if (authState?.isAuthenticated && authState.accessToken?.accessToken) {
        try {
          const response = await fetch("/facilities", {
            headers: {
              Authorization: `Bearer ${authState.accessToken.accessToken}`,
            },
          });
          const data = await response.json();
          setData(data);
        } catch (error: unknown) {
          setErrors(getErrorMessage(error));
        }
      }
    };
    apiCall();
  }, [authState]);

  const handleVisitedClick = (
    e: React.ChangeEvent<HTMLInputElement>,
    facilityId: bigint
  ) => {
    const url = `/facilities/${facilityId}`;

    const apiCall = async () => {
      if (authState?.isAuthenticated && authState.accessToken?.accessToken) {
        try {
          await fetch(url, {
            method: "PATCH",
            headers: {
              Authorization: `Bearer ${authState.accessToken.accessToken}`,
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ visited: e.target.checked }),
          });
        } catch (error: unknown) {
          setErrors(getErrorMessage(error));
        }
      }
    };
    apiCall();
  };

  const handleDeleteClick = (facilityId: bigint) => {
    const url = `/facilities/${facilityId}`;

    const apiCall = async () => {
      if (authState?.isAuthenticated && authState.accessToken?.accessToken) {
        try {
          await fetch(url, {
            method: "DELETE",
            headers: {
              Authorization: `Bearer ${authState.accessToken.accessToken}`,
            },
          });

          setData(data?.filter((row) => row.id !== facilityId));
        } catch (error: unknown) {
          setErrors(getErrorMessage(error));
        }
      }
    };
    apiCall();
  };

  if (data && !errors && authState?.isAuthenticated) {
    return (
      <div className="facilities-wrapper">
        <button onClick={logout} className="logout-button">
          Logout
        </button>
        <h1>NASA Facilities</h1>
        {data ? (
          <table className="facilities-table">
            <thead>
              <tr>
                <th>Center</th>
                <th>Facility</th>
                <th>Status</th>
                <th>City</th>
                <th>State</th>
                <th>Visited</th>
              </tr>
            </thead>
            <tbody>
              {data
                .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
                .map((facility) => {
                  return (
                    <tr key={facility.Facility}>
                      <td>{facility.Center}</td>
                      <td>{facility.Facility}</td>
                      <td>{facility.Status}</td>
                      <td>{facility.City}</td>
                      <td>{facility.State}</td>
                      <td>
                        <input
                          type="checkbox"
                          defaultChecked={facility.Visited}
                          onChange={(e) => handleVisitedClick(e, facility.id)}
                        />
                      </td>
                      <td>
                        <button
                          className="button-delete"
                          onClick={() => handleDeleteClick(facility.id)}
                        >
                          DELETE
                        </button>
                      </td>
                    </tr>
                  );
                })}
            </tbody>
          </table>
        ) : (
          <p>No facilities found</p>
        )}
      </div>
    );
  } else if (errors) {
    return <p>An error occurred: {errors}</p>;
  } else return <p className="loading">Loading...</p>;
}

export default Facilities;

secureRoute.tsx

In this file we'll create a custom SecureRoute component to work with React Router v6.

import React, { useEffect } from "react";
import { useOktaAuth } from "@okta/okta-react";
import { toRelativeUrl } from "@okta/okta-auth-js";
import { Outlet } from "react-router-dom";

export const RequiredAuth: React.FC = () => {
  const { oktaAuth, authState } = useOktaAuth();

  useEffect(() => {
    if (!authState) {
      return;
    }

    if (!authState?.isAuthenticated) {
      const originalUri = toRelativeUrl(
        window.location.href,
        window.location.origin
      );
      oktaAuth.setOriginalUri(originalUri);
      oktaAuth.signInWithRedirect();
    }
  }, [oktaAuth, authState?.isAuthenticated, authState]);

  if (!authState || !authState?.isAuthenticated) {
    return <p className="loading">Loading...</p>;
  }

  return <Outlet />;
};

NOTE: The okta/okta-react package includes a SecureRoute component, but it does not support React Router v6 to stay router version agnostic. For more information, please see the issue comment at https://github.com/okta/okta-react/issues/178#issuecomment-1150407182.

2. We'll also need to add the SecureRoute component and the following to App.tsx.

import { useCallback } from "react";
import "./App.css";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { LoginCallback, Security } from "@okta/okta-react";
import { Login } from "./components/login";
import Facilities from "./components/facilities";
import { RequiredAuth } from "./components/secureRoute";

function App() {
  const oktaAuth = new OktaAuth({
    issuer: process.env.REACT_APP_OKTA_ISSUER,
    clientId: process.env.REACT_APP_OKTA_CLIENT_ID,
    redirectUri:
      process.env.REACT_APP_OKTA_BASE_REDIRECT_URI + "/callback",
  });

  const restoreOriginalUri = useCallback(
    async (_oktaAuth: OktaAuth, originalUri: string) => {
      window.location.replace(
        toRelativeUrl(originalUri || "/", window.location.origin)
      );
    },
    []
  );

  return (
    <Router>
      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Routes>
          <Route path="/callback" element={<LoginCallback />} />
          <Route path="/" element={<Login />} />
          <Route path="/facilities" element={<RequiredAuth />}>
            <Route path="" element={<Facilities />} />
          </Route>
        </Routes>
      </Security>
    </Router>
  );
}

export default App;

The following CSS has been added to App.css in the demo application with inspiration from https://codepen.io/anthonymarkreynolds/pen/qJBazW.

@import url("https://fonts.googleapis.com/css?family=Jura:400");

* {
  font-family: Jura, Arial;
  font-weight: 500;
}

h2 {
  font-weight: 600;
}

.facilities-wrapper {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.loading {
  font-size: 40px;
  text-align: center;
  margin-top: 25%;
}

.facilities-table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  margin: 32px;
}

th,
td {
  padding: 8px;
  border-right: 1px solid #ddd;
}

tr {
  border-bottom: 1px solid #ddd;
}

.form-wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 400px) 1fr;
  grid-template-rows: 1fr minmax(auto, 1fr) 1fr;
  grid-gap: 10px;
  width: 100%;
  height: 100vh;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
  box-sizing: border-box;
}

form {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-gap: 10px;
  margin: auto 0;
  padding: 16px 32px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);
  margin-bottom: 33%;
}

form fieldset {
  margin: 0;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

legend {
  padding: 4px;
  background-color: #fff;
  border-radius: 5px;
}

form > input,
button {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-bottom: 24px;
  min-width: 100px;
}

form > input:hover,
button:hover {
  background-color: #eef;
}

.logout-button {
  align-self: end;
  margin: 32px 32px 0px;
}

input[type="checkbox"] {
  width: 48px;
  height: 20px;
  cursor: pointer;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

button.button-delete {
  background-color: #fe2c54;
  color: white;
  font-weight: 700;
  margin-bottom: 0;
  min-width: unset;
}

Running the app

You can start the demo app by running npx lerna run start.\

If we're not authenticated, our app will land us at the login page. Here, we click login to go through the Okta login process. Once authenticated, we're redirected to /facilities. If we're already authenticated when we land on the root URL, our app will automatically navigate us to /facilities. Once our table loads, we'll see the following:

To render the facilities table, our app has made a call to our API which includes the access token to fetch the data from the backend /facilities API endpoint.

In packages/frontend/facilities.tsx:

  useEffect(() => {
    const apiCall = async () => {
      if (authState?.isAuthenticated && authState.accessToken?.accessToken) {
        try {
          const response = await fetch("/facilities", {
            headers: {
              Authorization: authState.accessToken.accessToken,
            },
          });
          const data = await response.json();
          setData(data);
        } catch (error: unknown) {
          setErrors(getErrorMessage(error));
        }
      }
    };
    apiCall();
  }, [authState]);

The backend verified the access token using the jwtVerifier utility we created.

The backend connects to our PostgreSQL instance and has used the query we specified to fetch the needed data at the /facilities route.

In packages/api/routes/facilities.ts:

fastify.get(
    "/facilities",
    async (request: FastifyRequest, reply: FastifyReply) => {
      let facilities: IFacility[] = [];

      try {
        const { rows } = await client.query("SELECT * FROM facilities");
        if (rows.length == 0) throw new Error("No facilities found");

        facilities = rows;
        reply
          .code(200)
          .header("Content-Type", "application/json; charset=utf-8")
          .send([...facilities]);
      } catch (error) {
        const errorMessage = (error as Error).message;
        throw new Error(errorMessage);
      }
    }
  );

The same process repeats when a user clicks on the Visited checkbox or Delete button for the appropriate API endpoints and PostgreSQL queries.

Further learning

Handling CORS Errors in Fastify

Secure Your PostgreSQL Instance

Use Redux to Manage Authenticated State in a React App

A Developer's Guide to Session Management in React

Be sure you follow us on Twitter and subscribe to our YouTube channel. Please comment below if you have any questions or want to share what tutorial you'd like to see next.

Why You're the Mentor Someone Needs

Gabi Dombrowski — Thu, 15 Dec 2022 20:59:30 +0000

You might be a bit hesitant to mentor someone, but trust me, you're likely ready! The #1 thing to know is that no, you don't need to be an expert in anything! Everyone's path in learning is different. Someone is looking for their next step to be where you are, just as you were once working towards where you're at. No one is more qualified to share with others how you arrived where you are now than you.

I've facilitated flash mentoring event, monthly coding classes, and weekend workshops where many of those who showed up to mentor were mentoring for the first time. They did great and it's always a special experience to watch everyone connect with the community!

So what do you need to know to be a mentor? Think back to all the things you've learned in your career, wherever you might be now. What kind of support would you have liked from a mentor or colleague? What things seem so obvious now that you wish you knew yesterday, or years ago?

Chances are you're not thinking of any specific technical skill or knowledge. You might be thinking of helpful things like:

Someone to bounce ideas off of without fear of judgement
Someone to help you through a motivational slump
Advice on how to handle professional relationships
Help improving your communication skills and working on self-advocating
Access to resources or professional/social networks
Varied perspectives or a sanity check
Someone to empathize and help you have empathy for yourself through learning
A boost to help you persevere when you felt like giving up

These are all just a handful of things you're able to provide as a great mentor! Being a good mentor is not an innate skill that you're automatically good at. You can't effectively mentor by knowing enough things. Even though you may be knowledgeable, telling others what to do or what has worked for you won't necessarily help them grow.

Mentoring takes practice and continuous learning. It takes a willingness to be vulnerable and admit when you don't know something. It takes establishing a safe environment for those around you to grow and make mistakes. By undergoing these practices, you can help normalize the unavoidable pains of learning that we all experience.

Through mentoring, you can expand your network, reiterate your knowledge set, and develop new skills. You also get the opportunity to be a part of building communities that can run on supportive growth. If you are presented with the opportunity to mentor someone who is a part of an underrepresented group, you can benefit by learning to identify and overcome your own internal biases while helping diversify your community. These are all things that help a community grow- we are stronger when we work together. We can help be the shoulders for others to stand on.

I encourage you all to be on the lookout for someone who needs your support. You can help in a long-term mentoring relationship or in small moments of learnings or wins that they can carry into other situations. By supporting each other through mentoring, we can all make way for collective growth.

Use Redux to Manage Authenticated State in a React App

Gabi Dombrowski — Mon, 12 Sep 2022 20:05:31 +0000

There are a myriad of state management options available for React. React provides the option of using the built-in Context for when you have a nested tree of components that share a state. There is also a built-in useState hook that will allow you to set local state for a component.

For more complex scenarios where you need a single source of truth that changes frequently and is shared across large sections of your application, consider using a more robust state management library.

This walkthrough will get you started with a basic setup using Okta's redirect model to manage authenticated state and user profile information within a React app. It provides examples on when to use Redux versus local state using React's useState hook versus React Context.

Prerequisites

As of the time of this publication, Create React App requires Node >= 14.0.0 and npm >= 5.6. You can check for the latest required versions at https://reactjs.org/docs/create-a-new-react-app.html.

NOTE: Redux also recommends you install the React Developer Tools Chrome extension.

Create the React app using TypeScript

We'll get started with the built-in React template for Create React App that uses Redux and TypeScript. This includes the recommended Redux Toolkit and Redux's integration with React components. You can also clone the GitHub repo and follow the instructions there to configure it instead of building the project.

1. First, run:

npx create-react-app okta-react-redux --template redux-typescript

NOTE: Our demo repository uses React ^18.2.0 and React Scripts 5.0.1.

2. Then we'll add the Redux core by running:

npm add redux@4.2

3. Redux provides its own types, but we'll want to add our react-redux types since we're using TypeScript:

npm add -D @types/react-redux@7.1

4. We'll also need routing (and routing types) for our app:

npm install react-router-dom@5
npm add -D @types/react-router-dom@5.3

5. To start your app, run:

npm start

How Redux works

To update state using Redux, an action is dispatched. Then the store uses the root reducer to calculate a new state as compared to the old state, which notifies the proper subscribers of the update, so that the UI can be updated properly.

A typical Redux workflow goes like this. First, the UI for your application is rendered using an initial global Redux store, created with the root reducer:

An event occurs in the UI of your app, such as a user button interaction, which triggers an action.
The action is then dispatched to the store and an event handler that handles the needed logic makes the changes to your global state.
The store notifies subscribed parts in the UI that there has been an update.
Those subscribed parts then check to see if a re-render is necessary to update the UI as needed.

NOTE: The built-in Redux template we used includes a great counter example of how Redux works. You can take a closer look at Redux's explanation of the counter example.

Useful terms for working with Redux

Action

An action is a JS object with a type and a payload. It describes an actionable interaction within your app, and typically is named something like createUser or addToDo.

Action Creators

Action creators can be used to dynamically create actions. Our demo does not use action creators, but you can read more about it at the link above.

Reducers

When passed a new state, a reducer returns the proper current state by comparing it with the previous state, and making the applicable changes. Reducers work similarly to the Array.reduce method.

Redux store

The current live state for your app lives in the Redux store.

Selectors

A selector returns a piece of the live Redux state as stored in the live Redux store.

Dispatch

Dispatch is a method that triggers an action, which in turn updates the Redux store.

Add authentication using OAuth2 and OpenID Connect (OIDC)

For this demo app, we'll be using Okta's SPA redirect model to authenticate and fetch user info.

Use http://localhost:3000/login/callback for the Redirect URI and set the Logout Redirect URI to http://localhost:3000.

Okta application configuration:
Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

NOTE: You can also use the Okta Admin Console to create your app. See Create a React App for more information.

Add the Okta SDKs to your project by running:

npm install @okta/okta-react@6.4 @okta/okta-auth-js@6.0

TypeScript React application setup with Redux state management

Create a .env file to your root directory and add the following:

REACT_APP_OKTA_ISSUER=https://{yourOktaDomain}/oauth2/default
REACT_APP_OKTA_CLIENTID={yourOktaClientId}
REACT_APP_OKTA_BASE_REDIRECT_URI=http://localhost:3000

NOTE: Remember to not include your .env file in any version control for security reasons.

Add authentication and create routes

Modify the existing App.tsx file:

import "./App.css";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { LoginCallback, Security } from "@okta/okta-react";
import Home from "./components/home";
import { useCallback } from "react";

const oktaAuth = new OktaAuth({
  issuer: process.env.REACT_APP_OKTA_ISSUER,
  clientId: process.env.REACT_APP_OKTA_CLIENTID,
  redirectUri: process.env.REACT_APP_OKTA_BASE_REDIRECT_URI + "/login/callback",
});

function App() {
  const restoreOriginalUri = useCallback(
    async (_oktaAuth: OktaAuth, originalUri: string) => {
      window.location.replace(
        toRelativeUrl(originalUri || "/", window.location.origin)
      );
    },
    []
  );

  return (
    <Router>
      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Route path="/" exact={true} component={Home} />
        <Route path="/login/callback" component={LoginCallback} />
      </Security>
    </Router>
  );
}

export default App;

Add initial state, create Redux slice, and create selector

1. Create a src/redux-state directory:

mkdir src/redux-state

2. Add a userProfileSlice.tsx file in the created redux-state directory with the following:

import { createSlice } from "@reduxjs/toolkit";
import { RootState } from "../app/store";

export interface IUserProfile {
  email: string;
  given_name: string;
  family_name: string;
}

const initialState: IUserProfile = {
  email: "",
  given_name: "",
  family_name: "",
};

export const userProfileSlice = createSlice({
  name: "userProfile",
  initialState,
  reducers: {
    setUserProfile: (state, action) => {
      return {
        email: action.payload.payload.email,
        given_name: action.payload.payload.given_name,
        family_name: action.payload.payload.family_name,
      };
    },
  },
});

export const selectUserProfile = (state: RootState): IUserProfile =>
  state.userProfile;

export const { setUserProfile } = userProfileSlice.actions;
export default userProfileSlice.reducer;

3. In the src/app/store.ts file, add the created Redux slice to the Redux store:

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import userProfileReducer from "../redux-state/userProfileSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    userProfile: userProfileReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

Show user profile information with state management

1. Create a src/components directory:

mkdir src/components

2. In the src/components directory, add the following files:

home.tsx

import { useOktaAuth } from "@okta/okta-react";
import { createContext, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { setUserProfile } from "../redux-state/userProfileSlice";
import "../App.css";
import Dashboard from "./dashboard";
import { UserClaims } from "@okta/okta-auth-js";

type UserProfileExtra = Pick<UserClaims, "locale" | "preferred_username">;

const emptyUserContext = {
  preferred_username: "",
  locale: "",
} as UserProfileExtra;

export const UserContext = createContext(emptyUserContext);

export default function Home() {
  const dispatch = useDispatch();
  const { oktaAuth, authState } = useOktaAuth();
  const [userProfileExtra, setUserProfileExtra] = useState<UserProfileExtra>();

  const login = async () => oktaAuth.signInWithRedirect();

  useEffect(() => {
    if (authState?.isAuthenticated) {
      oktaAuth
        .getUser()
        .then((userInfo: UserProfileExtra) => {

          dispatch(
            setUserProfile({
              type: "userProfile/userProfileSet",
              payload: userInfo,
            })
          );

          setUserProfileExtra({
            locale: userInfo.locale,
            preferred_username: userInfo.preferred_username,
          });
        })
        .catch((err) => {
          console.error(err);
        });
    }
  }, [authState?.isAuthenticated, dispatch, oktaAuth]);

  return (authState?.isAuthenticated && userProfileExtra) ? (
    <UserContext.Provider value={userProfileExtra}>
      <Dashboard />
    </UserContext.Provider>
  ) : (
    <div className="section-wrapper">
      <div className="title">Use Redux to Manage Authenticated State in a React App</div>
      <button className="button" onClick={login}>
        Login
      </button>
    </div>
  );
}

Here we use React's useEffect hook to set the global user state we set up earlier with setUserProfile and the local user state we set up in this file with useState.

Once the user is authenticated, we rely on the getUser method that is built into oktaAuth to fetch the user profile information. If the user is not yet authenticated, we render the login page instead.

dashboard.tsx

import { useOktaAuth } from "@okta/okta-react";
import { useSelector } from "react-redux";
import { selectUserProfile } from "../redux-state/userProfileSlice";
import "../App.css";
import { useState } from "react";
import UserProfile from "./userProfile";
import UserProfileExtra from "./userProfileExtra";

export default function Dashboard() {
  const { oktaAuth } = useOktaAuth();
  const userProfile = useSelector(selectUserProfile);
  const [isExpanded, setIsExpanded] = useState(false);

  const logout = async () => oktaAuth.signOut();

  return (
    <div className="section-wrapper">
      <div className="title">Dashboard</div>
      <div className="profile-greeting">{`Hi ${userProfile.given_name}!`}</div>
      <div className="profile-more-wrapper">
        {isExpanded && (
          <>
            <UserProfile />
            <UserProfileExtra />
          </>
        )}
      </div>
      {
        <div
          className="profile-toggle"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          {isExpanded ? "Show less" : "Show more"}
        </div>
      }
      <div>
        <button className="button" onClick={logout}>
          Logout
        </button>
      </div>
    </div>
  );
}

In this file, we use a Redux selector to get the current state for userProfile to then render those values in our component.

We also set an isExpandable property that toggles whether or not additional user profile information is hidden or shown. This is another example of how to use local state with the useState hook.

userProfile.tsx

import { useSelector } from "react-redux";
import { selectUserProfile } from "../redux-state/userProfileSlice";
import "../App.css";

export default function UserProfile() {
  const userProfile = useSelector(selectUserProfile);

  return (
    <>
      <div>
        <span>Email: </span>
        {userProfile.email}
      </div>
      <div>
        <span>Last name: </span>
        {userProfile.family_name}
      </div>
    </>
  );
}

In this file, we use the Redux selector created earlier to get the current state for the state slice. This includes the user profile information we set earlier.

userProfileExtra.tsx

import "../App.css";
import { useContext } from "react";
import { UserContext } from "./home";

export default function UserProfileExtra() {
  const userProfileExtra = useContext(UserContext);

  return (
    <>
      <div>
        <span>Username: </span>
        {userProfileExtra.preferred_username}
      </div>
      <div>
        <span>Locale: </span>
        {userProfileExtra.locale}
      </div>
    </>
  );
}

Here, we demonstrate another way to manage state. This time, React's built-in useContext hook is used to get what we set earlier in the UserContext we created with React's createContext method.

NOTE: The following custom styling has also been added to src/App.css in the demo repository.

.section-wrapper > div {
  padding: 24px;
  font-family: Roboto, sans-serif;
}

.section-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 100vh * 0.33);
  margin-top: 56px;
}

.button {
  min-width: 64px;
  height: 36px;
  border-color: #6200ee;
  color: #6200ee;
  background-color: transparent;
  border-style: solid;
  padding: 0 15px 0 15px;
  border-width: 1px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.0892857143em;
  text-transform: uppercase;
  border-radius: 4px;
  border-style: solid;
  padding: 0 15px 0 15px;
  border-width: 1px;
}

.button:hover {
  cursor: pointer;
  background-color: rgb(112, 76, 182, 0.1);
}

.title {
  font-size: 48px;
  text-align: center;
}

.profile-greeting {
  font-size: 32px;
}

.profile-toggle {
  font-size: 16px;
  text-decoration: underline;
  color: #6200ee;
}

.profile-more-wrapper {
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.profile-more-wrapper > div {
  padding: 16px;
}

.profile-more-wrapper span {
  font-size: 20px;
  font-weight: 500;
}

Our app is now complete! Next we'll run it to log a user in and render our applicable states.

Running the app

To start the app, run npm start.

After your app starts and you've clicked login on the home screen, you'll be redirected to the Okta-hosted sign-in page. Here, enter your user credentials. Once your user is authenticated, the dashboard component we created will render.

If you recall, the value for the user's given_name is part of the Redux slice from our created selector selectUserProfile. Clicking Show more or Show less toggles our local state for isExpanded in the dashboard component. This allows us to show or hide additional user profile info, which is a mix of values from the userProfileSlice and additional values from the UserContext we created.

Learn more about authentication, React, and Redux

In this post, we used Okta's redirect model to manage authenticated state and user profile information within a React app. We also looked at examples for when to use Redux, local state using React's useState hook, or React context. As you scale your apps, you might find that a mix of all three solutions is the right choice.

You may also want to go further to handle more complex state management logic or add more customizations to your apps. The following links should help with potential next steps.

A Developer's Guide to Session Management in React

Build a Secure React Application with JWTs and Redux

Build a React App with Styled Components

Custom URL Domain

Use a custom URL for the Okta Sign-In Widget.

Open ID Connect

Set up Single Sign-On for your Okta integrated app.

Customize tokens returned from Okta

Add custom claims to your user access tokens to add custom information or attributes stored in a user profile.

Redux async logic

Use async logic with Redux "thunk" middleware for handling things like login, data fetching, and handling loading state.

Redux Learning Resources

Additional resources to learn Redux.

Be sure you follow us on Twitter and subscribe to our YouTube channel. Please comment below if you have any questions or want to share what tutorial you'd like to see next.

KCDC 2019 and Best Practices for Code Reviews

Gabi Dombrowski — Fri, 16 Aug 2019 04:32:25 +0000

I had the opportunity to attend KCDC 2019 for the first time as a Crema employee in July. I gotta say 1) I was stoked, 2) I was right to be stoked. It was great to experience being a part of the local development community. It's a supportive community with great people who keep it accessible and inclusive.

The conference itself was easy to navigate and well organized. It's a tech agnostic conference with something for everyone. For several of the time slots, it was hard to pick a single talk to attend! The conference also thoughtfully included a good number of quality human skills talks.

The human skills talk that I found to be the most relevant was "How to Have Code Reviews Developers Actually Want". The speaker, Cameron Presley, delivered the content in a practical and engaging way. His talk reiterated the idea that the goal of a code review is to assess quality, readability, and maintainability. Code reviews also should enforce style consistency. Remember though that the desired result is to solve the problem at hand, not to have everyone's code look the same. Differentiate between opinionated interjections and teachable, applicable moments.

The talk outlined that code reviews always should do the following:

They should be respectful. Keep in mind when commenting that someone worked hard on that code.

They should reinforce joint ownership. Go ahead and "we" all over yourselves.

Code reviews are an important part of ensuring code quality, and we're all responsible for quality, regardless of role or title. Code reviews also have great potential to be mentoring moments. You are not only preventing problems, you are also helping a developer improve their skills. So, when you provide comments, provide context. An example would be to say something like, "When X occurs, we should do Y, because Z."

Something that hadn't occurred to me prior is that you don't have to do a code review only when your code is complete. I tend to not want anyone to see my code before it's pretty and sparkly because, well, #impostersyndrome. In reality, sharing your code as it's written improves your code as you go, instead of requiring you to do a massive brain upload all at once at the end. You can also @ someone with specifics to point out exactly what you'd like them to provide feedback on.

Some other useful guidelines:

Do no more than 60 minutes of code reviewing at a time.
Try to keep reviews under 400 lines of code - anything more is hard to conceptualize.
Try to spend about 30% of your time on code reviews.

Thanks to the organizers of KCDC, the speakers, and everyone who participates in the community for an incredible space to learn and get to know my fellow developers!

See you all at KCDC 2020!