Generate Secure Password in Gatsby with Crypto API

Question

I'm attempting to generate a random password for users created through my project. Per an answer, I plugged in the following formula:

const generatePassword = () => {
    const crypto = require("crypto");
    return Array(12)
    .fill("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz")
    .map(function (x) {
        let int = crypto.randomBytes(4, function(ex, buf) {
            var hex = buf.toString('hex');
            var myInt32 = parseInt(hex, 16);
        });
        return x[int % x.length];
    })
    .join("");
}

I get the following error Can't resolve 'crypto' in [PROJECT] and it gives me instructions to add a fallback via two methods:

if you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

I have no idea what any of that means but some helpful folks on this site do so I plug in the following to my node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        "crypto": false
      },
    },
  });
};

I run gatsby develop again, it loads the site successfully, but I am greeted with an error on the page, progress! crypto.randomBytes is not a function. So I try the polyfill solution suggessted earlier.

I install crypto-browserify and update the fallback like so:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
         crypto: require.resolve("crypto-browserify")
       },
     },
  });
};

I run gatsby develop again and get an error in the terminal:

Module not found: Error: Can't resolve 'stream' in '[PROJECT]'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

cool, another node module i can install and some settings to copy pasta. It should surely work after this. NOPE!

New error drop: process is not defined Installing yet another npm package doesn't remedy the issue so I'm pretty tapped out at this point.

score 0 · Answer 1 · answered Jul 12 '22 at 21:53

I found another solution that doesn't involve a bunch of node modules not supported by gatsby, but rather a simple import:

import { nanoid } from "nanoid";

const generatePassword = () => {
  return nanoid(12);
}

I'm unsure about the security of nanoid but it's better than mathRandom since crypto seems like a no go.

Generate Secure Password in Gatsby with Crypto API

1 Answers1