DEV Community: Metamodal

Create custom Passport middleware in Express

glocore — Sun, 13 Dec 2020 07:58:36 +0000

We're going to be looking at how we can dynamically select the passport middleware that we want to use based on the requested route. This is useful if you have multiple auth handlers in your app and you want a consistent way of handling them without repeating code.

So if you find yourself doing something like this:

app.get(
  "/login/facebook",
  passport.authenticate("facebook", { /* options */ })
);

app.get(
  "/login/google",
  passport.authenticate("google", { /* options */ })
);

app.get(
  "/login/twitter",
  passport.authenticate("twitter", { /* options */ })
);

... and then handling the return callback routes like this:

app.get(
  "/login/facebook/callback",
  passport.authenticate("facebook"),
  (req, res) => {
    /* ... */
  }
);

app.get(
  "/login/google/callback",
  passport.authenticate("google"),
  (req, res) => {
    /* ... */
  }
);

app.get(
  "/login/twitter/callback",
  passport.authenticate("twitter"),
  (req, res) => {
    /* ... */
  }
);

... we can see that a lot of similar code is being repeated. This would mean that any changes that we make would have to be repeated thrice (in this case).

Refactor

Now in order to abstract this out, we can use Express' route parameters to determine the handler that we want to use.

One thing to note is that passport.authenticate() returns an Express middleware, which accepts req, res and next as arguments. So we're going to take advantage of this fact by forwarding these arguments to the passport middleware.

So for the initial login route handler, we're going to refactor it like this:

app.get("/login/:provider", (req, res, next) => {
  const { provider } = req.params;

  const passportOptions = {
    // compose your options object
    // here based on the provider.
  };

  const passportMiddleware = passport.authenticate(
    provider, passportOptions
  );

  // this is important, else
  // you'll see a blank screen.
  passportMiddleware(req, res, next);
});

And similarly for the callback route handler:

app.get(
  "/login/:provider/callback",
  (req, res, next) => {
    const { provider } = req.params;

    const passportOptions = {
      /* ... */
    };

    const passportMiddleware = passport.authenticate(
      provider, passportOptions
    );

    passportMiddleware(req, res, next);
  },
  (req, res) => {
    // the provider route param is available
    // here too, along with the user object that
    // passport attaches upon successful authentication
    const { provider, user } = req.params;

    // ...
    // Conditional code based on the provider.
    // Preferably, the conditional logic would
    // be defined elsewhere, where it would accept
    // a `provider` as an argument and would
    // return data accordingly. This would ensure that
    // the route handler code doesn't get cluttered
    // with conditional logic.
  }
);

Typos? Improvements?

Thanks for reading. If you notice any typos or would like to suggest improvements, please feel free to either create an issue or PR here.

Quick Express-TypeScript Setup

glocore — Fri, 27 Nov 2020 08:26:17 +0000

Steps to create a barebones Express app with TypeScript and ESLint.
A sample app setup is available here. To clone it locally, run:

npx degit metamodal/blog/quick-express-typescript-setup/example express-ts-project

Else follow along to setup the project manually.

Step 1

Create an npm project:

mkdir express-ts-project
cd express-ts-project
npm init -y

Step 2

Install dependencies:

# Express-related deps
npm install express cors

# Tooling
npm install -D typescript eslint nodemon ts-node @typescript-eslint/eslint-plugin @typescript-eslint/parser

# Typings
npm i -D @types/cors @types/express @types/node

cors: to allow cross-origin requests
ts-node: to run TypeScript programs directly from the terminal (instead of having to transpile to JavaScript first)
nodemon: to run your project in "watch" mode, meaning the program is automatically restarted every time you change your code
@typescript-eslint/parser: allows ESLint to understand TypeScript syntax
@typescript-eslint/eslint-plugin: loads the ESLint rules defined by you

Step 3

Create a file named tsconfig.json in the root of your project and paste the following config:

{
  "compilerOptions": {
    "lib": ["es2018"],
    "module": "commonjs",
    "target": "es2018",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Step 4

Create a file named .eslintrc in the root of your project, and paste the following config:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

Step 5

Create a folder named src and inside it a file src/index.ts. Paste the following in index.ts:

import express from "express";
import cors from "cors";

const app = express();
const port = 3000;

app.use(cors({ origin: true }));

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => console.log("Listening on port " + port));

Step 6

Add the following in the scripts object in package.json:

"scripts": {
  "build": "tsc",
  "start": "nodemon src/index.ts"
}

Step 7

From the root of your project, run the command:

npm start

Go to http://localhost:3000 on your browser. If you see "Hello World!" printed on your screen, everything has worked correctly.

Typos? Improvements?

Thanks for reading. If you notice any typos or would like to suggest improvements, please feel free to either create an issue or PR here.

Control a Dialog Box Asynchronously using React Hooks

glocore — Thu, 25 Jun 2020 11:28:37 +0000

We often control dialog boxes by including the component in our JSX and controlling its visibility and behaviour with state variables and props.

Most of the time however, these are pretty standard components that require very little data to render, like a confirmation dialog box, for example. With hooks, we should be able to do something like this:

const { getConfirmation } = useConfirmationDialog();

// ...

const confirmed = await getConfirmation({
  title: "Attention!",
  message: "Are you sure you would like to delete this entry?",
});

if (confirmed) {
  // perform operation
}

In this post, we will create the above hook. This will allow us to have a single confirmation dialog box at an app-level, and communicate with it using the context API.

An example implementation of this can be found in this CodeSandbox.

Step 1: Setup the context

Create an empty context object and a provider HOC, which we can later wrap at an app level.

import React from "react";
import ConfirmationDialog from "./ConfirmationDialog";

const ConfirmationDialogContext = React.createContext({});

const ConfirmationDialogProvider = ({ children }) => {
  return (
    <ConfirmationDialogContext.Provider>
      <ConfirmationDialog />
      {children}
    </ConfirmationDialogContext.Provider>
  );
};

Step 2: Add the control mechanism

Here we add a state variable dialogOpen to control the visibility of the dialog. We also create another state variable called dialogConfig, which would contain the dialog content and action callback.

We then use these to create trigger functions for displaying the dialog, as well as handler functions that are called when the action buttons are pressed.

const ConfirmationDialogProvider = ({ children }) => {
  const { dialogOpen, setDialogOpen } = React.useState(false);
  const { dialogConfig, setDialogConfig } = React.useState({});

  const openDialog = ({ title, message, actionCallback }) => {
    setDialogOpen(true);
    setDialogConfig({ title, message, actionCallback });
  };

  const resetDialog = () => {
    setDialogOpen(false);
    setDialogConfig({});
  };

  const onConfirm = () => {
    resetDialog();
    dialogConfig.actionCallback(true);
  };

  const onDismiss = () => {
    resetDialog();
    dialogConfig.actionCallback(false);
  };

  return (
    <ConfirmationDialogContext.Provider value={{ openDialog }}>
      <ConfirmationDialog
        open={dialogOpen}
        title={dialogConfig.title}
        message={dialogConfig.message}
        onConfirm={onConfirm}
        onDismiss={onDismiss}
      />
      {children}
    </ConfirmationDialogContext.Provider>
  );
};

Step 3: Create a hook to trigger the dialog

Use this hook to trigger the dialog from anywhere in your app. It returns a function that lets you await the user input. This would let you use the async/await syntax rather than passing in a callback.

const useConfirmationDialog = () => {
  const { openDialog } = React.useContext(ConfirmationDialogContext);

  const getConfirmation = ({ ...options }) =>
    new Promise((res) => {
      openDialog({ actionCallback: res, ...options });
    });

  return { getConfirmation };
};

Step 4: Add the provider HOC at the app level

Finally, we wrap that HOC we created in Step 1 around our app (or at whatever level you prefer).

const App = () => {
  return (
    <ConfirmationDialogProvider>
      {/* Your app here */}
    </ConfirmationDialogProvider>
  );
}

Usage:

const { getConfirmation } = useConfirmationDialog();

// ...

const confirmed = await getConfirmation({
  title: "Attention!",
  message: "Are you sure you would like to delete this entry?",
});

if (confirmed) {
  // perform operation
}

Once again, here's a CodeSandbox of an example implementation.

Typos? Improvements?

Thanks for reading. If you notice any typos or would like to suggest improvements, please feel free to either create an issue or PR here.

Add Jitsi Meet to your React App

glocore — Wed, 24 Jun 2020 06:16:58 +0000

Step 1: Create a container for Jitsi

The Jitsi iframe needs a container element of a pre-defined height and width to render into.

import React from "react";

const VideoConference = () => {
  const jitsiContainerId = "jitsi-container-id";

  return <div id={jitsiContainerId} style={{ height: 720, width: "100%" }} />;
};

export default VideoConference;

Step 2: Load the Jitsi Meet API Library Script

Unfortunately, this isn't available as an NPM module, and so we're gonna have to go old-school here. We first create a <script/> element with its src pointing to the source of the API library. We then append this to the document's body.

The script takes an onload callback, which runs once the script has been loaded and executed. In order to convert this into a promise, we pass it the resolve method of an empty promise.

const VideoConference = () => {
  // const jitsiContainerId = ...

  const loadJitsiScript = () => {
    let resolveLoadJitsiScriptPromise = null;

    const loadJitsiScriptPromise = new Promise((resolve) => {
      resolveLoadJitsiScriptPromise = resolve;
    });

    const script = document.createElement("script");
    script.src = "https://meet.jit.si/external_api.js";
    script.async = true;
    script.onload = resolveLoadJitsiScriptPromise
    document.body.appendChild(script);

    return loadJitsiScriptPromise;
  };

  // return ( ... )
};

Let me know in the comments if you have a more elegant way of promise-ifying the script loading part! 😄

Step 3: Load the Jitsi IFrame

Once the script is loaded, it adds a class named JitsiMeetExternalAPI to the global window object. Instantiating this class loads the Jitsi iframe and returns an API object, which we can later be used to customise and control the Jitsi interface.

const VideoConference = () => {
  // const jitsiContainerId = ...
  const [jitsi, setJitsi] = React.useState({});

  // const loadJitsiScript = () => { ... }

  const initialiseJitsi = async () => {
    if (!window.JitsiMeetExternalAPI) {
      await loadJitsiScript();
    }

    const _jitsi = new window.JitsiMeetExternalAPI("meet.jit.si", {
      parentNode: document.getElementById(jitsiContainerId),
    });

    setJitsi(_jitsi)
  };

  React.useEffect(() => {
    initialiseJitsi();

    return () => jitsi?.dispose?.();
  }, []);

  // return ( ... )
};

Our initialiseJitsi function is called only once when the component is first rendered, and Jitsi's dispose() method is called when the component is destroyed.

Good!

This should give you a barebones setup. Here's a CodeSandbox with what we've done so far.

Configure Jitsi

There are quite a few options to configure your Jitsi iframe. For example, if you are rolling your own Jitsi server, you can specify its URL endpoint instead of meet.jit.si. The object from instantiating JitsiMeetExternalAPI also provides quite a few methods and event listeners to configure and control the Jitsi interface. Check out Jitsi's docs for all the options, methods and events available.