DEV Community: Duc Nguyen

Next Auth Cognito Authentication Errors

Duc Nguyen — Fri, 08 Sep 2023 07:56:37 +0000

Took me an hour to figure out.
Given you have this ARN of a User Pool:
arn:aws:cognito-idp:ap-southeast-1:74051077XX03:userpool/ap-southeast-1_XXnxUPYvFj4

The issuer should be https://cognito-idp.ap-southeast.amazonaws.com/ap-southeast-1_XXnxUPYvFj4

Notice the different of cognito-idp vs amazonaws.com

I was so into the Cognito Domain https://2-xxxxxxxxxxxxxxxx.auth.ap-southeast-1.amazoncognito.com

References:

https://next-auth.js.org/providers/cognito

My hackoctoberfest 2022 gifts has arrived

Duc Nguyen — Thu, 23 Feb 2023 16:07:25 +0000

How to Compile Smart Contracts in React

Duc Nguyen — Sat, 14 Aug 2021 08:12:19 +0000

In this post I gonna compile a Solidity program with Solidity Compiler JS in browsers supported WebWorker.

Tools and plugins:

nx@12.7.1
worker-plugin@5.0.1
solc@0.8.7-fixed
webpack@4 (included in NX)

Compiling a smart contract with Solc is a heavy task for browsers, and for such heavy task we need to use WebWorker.

The tool for setting up the project is NX. it is great tool to create monos-repository.

Configuring WebWorker for NX

NX is using Webpack underhood, In this post we use worker-plugin to make WebWorker work with Webpack. In order to config worker-plugin we need to extend the default configuration of Webpack inside NX.

Create webpack.json in root folder of frontend module.

const WorkerPlugin = require('worker-plugin');
const nrwlConfig = require('@nrwl/react/plugins/webpack.js');

module.exports = (config, context) => {
    nrwlConfig(config);
    return {
        ...config,
        node: {
            Buffer: true,
            module: 'empty',
        },
        plugins: [new WorkerPlugin(), ...config.plugins],
    };
};

As you can see we have some polyfill configurations for NodeJS in Webpack

Add webpack.json to workspace.json file.

"webpackConfig": "apps/frontend/webpack.config.js"

Here is the detail of webpackConfig option.

Compile Solidity Smart Contract with WebWorker

Solc@0.8.7-fixed doesn't have typescript declaration yet, we have to add a type declaration manually. Simply add declare module 'solc/wrapper'; to *.d.ts file in your project.

Creating a worker SolcJs.worker.ts file.

/* eslint-disable no-restricted-globals */
import * as wrapper from 'solc/wrapper';
const ctx: Worker = self as any;

importScripts(
    'https://solc-bin.ethereum.org/bin/soljson-v0.8.6+commit.11564f7e.js'
);

ctx.addEventListener('message', ({ data }) => {
    const solc = wrapper((ctx as any).Module);
    const compileResult = solc.compile(
        createCompileInput(data.contractFileName, data.content)
    );
    ctx.postMessage(compileResult);
});

function createCompileInput(
    fileName = 'storage.sol',
    fileContent: string
): string {
    const CompileInput = {
        language: 'Solidity',
        sources: {
            [fileName]: {
                content: fileContent,
            },
        },
        settings: {
            outputSelection: {
                '*': {
                    '*': ['*'],
                },
            },
        },
    };
    return JSON.stringify(CompileInput);
}

Create a Promisify function to call SolcJs.worker.ts and wait until the compilation finished.

const compileWithWorker = async (data: any) => {
        return new Promise((resolve, reject) => {
            const worker = new Worker('../../SolcJs.worker.ts', {
                type: 'module',
            });
            worker.postMessage(data);
            worker.onmessage = function (event: any) {
                resolve(event.data);
            };
            worker.onerror = reject;
        });
};

Thank to the great answer from T.J. Crower

Now we are ready to use WebWorker to compile a Simple Solidity Smart Contract.

const handleCompile = async () => {
        setCompiling(true);
        const result = await compileWithWorker({
            content: SimpleStorageContact,
        });
        setCompileResult(result as string);
        setCompiling(false);
};

SourceCode in Github - nx-webworker-sample

My hacktoberfest2020 arrived

Duc Nguyen — Fri, 26 Mar 2021 06:48:17 +0000

Finally, My #hacktoberfest2020 gifts arrived, take so long due to COVID-19

My hackoctoberfest gifts has arrived

Duc Nguyen — Tue, 07 Jan 2020 08:58:54 +0000

It was taking for so long, but i had it finally.

The Kotis Design didnt included my phone number, the delivery guy couldn't contact me. I have to follow the trackingId of DHL into the local delivery VNPost
and contact them to add my phone number.

Thanks Digital Ocean and DevTo

P/S: I'm waiting for the gift from dev.to

Finally started Dev.to on my local

Duc Nguyen — Mon, 07 Oct 2019 05:11:54 +0000

My background: working with Java, NodeJS and Frontend for some years and has no Rails experiences

Here are my summaries:

I have to go with https://docs.dev.to/installation/mac/ , would prefer docker but my current project is using Docker version 17 which through error on the line

FROM node:8.15.1-alpine AS alpine-ruby-node

It took me an hour to figure out the Postgres role issue with my current OS username.

Here is how to solve:

https://www.codementor.io/engineerapart/getting-started-with-postgresql-on-mac-osx-are8jcopb#3-configuring-postgres

psql --user postgres --password

To list users:

postgres=# \du

To add a user:

postgres=# CREATE ROLE my_current_OS_user WITH LOGIN PASSWORD 'Pa$$w0rd';

And grant createDB privilege:

ALTER ROLE my_current_OS_user CREATEDB

HomePage URL: http://localhost:3000

Authorization callback URL: http://localhost:3000/users/auth/github/callback