amaury1093/login-with-metamask

Demo project for "One-click Login with Blockchain: A MetaMask Tutorial"

Login with MetaMask

This demo is published as part of the corresponding blog article: "One-Click Login with Blockchain: a MetaMask Tutorial".

❗Important note. The article was written in March 2018, and in between, MetaMask introduced a breaking change. The codebase has since then been updated to support the breaking change. As such, the snippets in the article might not be exactly the same as the updated code today. The login flow however is still exactly the same. If you want to see the original code, please visit the original branch.

Live Demo: https://amaury1093.github.io/login-with-metamask/

Getting Started

There are 2 packages in this repo: a backend which is a REST API written in Express, and a frontend which is a React single-page application. It's really a demo, so I tried to use as few libraries as possible, and the most popular ones when possible.

The simplest way to get started is to launch the demo using Docker Compose. Alternatively you could launch docker the containers manually, or run the node services using yarn.

1. Launch the demo using Docker Compose:

docker-compose up -d

This will setup the bakcend listening on localhost:8000 and the frontend on localhost:3000.

2. Launching the demo using Docker:

Build and launch the backend:

cd backend
docker build -t login-backend .
docker run -d -p 8000:8000 login-backend

Build and launch the frontend:

cd frontend
docker build -t login-frontend .
docker run -d -p 3000:3000 login-frontend

You can then access the frontend app on localhost:3000.

3. Start the demo using Yarn:

From the root folder of this repo, run

yarn install # Install root dependencies (for TS & linting in your IDE)
cd packages/backend && yarn install # Install backend packages
cd ../frontend && yarn install # Install frontend packages
cd ../.. # Go back to root folder
yarn start # Will launch the frontend and the backend at the same time

The backend should be running on localhost:8000, and the frontend on localhost:3000.

Alternatively, you can start the frontend and the backend separately:

# Start the backend
cd packages/backend
yarn start

# Start the frontend
cd packages/frontend
yarn start

Tests

Since this project is a demo, I haven't written any tests for it. Only code linting is performed, via eslint and prettier, which you can run using yarn lint.

Credits

If you liked this demo, I appreciate donations. My Ethereum address is 0x0b664ebF14E204CdE96690461830e0DD5dFb22aA.

---

This demo is published as part of the corresponding blog article at https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial.

login-with-metamask's Issues

Add `ethereum.enable()`

https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

JWT Cookie for auth

I'm studying a bit about jwt and saw that as best practice is preferable to store the jwt into the cookies instead than on local storage due to security reason, would be great to have this implemented here.
Just for learning prupose i link a guide that i used on how to implement it

https://dev.to/franciscomendes10866/using-cookies-with-jwt-in-node-js-8fn

return User.findAll(whereClause) Fails with TSError: ⨯ Unable to compile TypeScript: When I remove Docker Files

I am building an app that incorporates the backend of this app with the Docker functionality removed. I only changed a few files.

1. The package.json file: https://imgur.com/a/f0kfJZB
2. The db.ts file: https://imgur.com/a/jr0ezuV
3. Everything referencing Docker

Now I get this error in my terminal when I try to run the app in the backend folder with yarn start

<myusername>@<mycomputername> backend % yarn start
yarn run v1.22.17
$ ts-node src
(sequelize) Warning: SQLite does not support 'INTEGER' with UNSIGNED or ZEROFILL. Plain 'INTEGER' will be used instead. 
>> Check: https://www.sqlite.org/datatype3.html
/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:820
    return new TSError(diagnosticText, diagnosticCodes);
           ^
TSError: ⨯ Unable to compile TypeScript:
src/services/users/controller.ts:14:22 - error TS2345: Argument of type '{ where: { publicAddress: string | ParsedQs | string[] | ParsedQs[]; }; } | undefined' is not assignable to parameter of type 'FindOptions<any> | undefined'.
  Type '{ where: { publicAddress: string | QueryString.ParsedQs | string[] | QueryString.ParsedQs[]; }; }' is not assignable to type 'FindOptions<any>'.
    Types of property 'where' are incompatible.
      Type '{ publicAddress: string | QueryString.ParsedQs | string[] | QueryString.ParsedQs[]; }' is not assignable to type 'WhereOptions<any> | undefined'.
        Type '{ publicAddress: string | QueryString.ParsedQs | string[] | QueryString.ParsedQs[]; }' is not assignable to type 'WhereAttributeHash<any>'.
          Type '{ publicAddress: string | QueryString.ParsedQs | string[] | QueryString.ParsedQs[]; }' is not assignable to type '{ [x: string]: string | number | bigint | boolean | Buffer | Fn | Col | Literal | WhereAttributeHash<any> | Date | WhereOperators | ... 6 more ... | undefined; }'.
            Property 'publicAddress' is incompatible with index signature.
              Type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to type 'string | number | bigint | boolean | Buffer | Fn | Col | Literal | WhereAttributeHash<any> | Date | WhereOperators | ... 6 more ... | undefined'.
                Type 'ParsedQs[]' is not assignable to type 'string | number | bigint | boolean | Buffer | Fn | Col | Literal | WhereAttributeHash<any> | Date | WhereOperators | ... 6 more ... | undefined'.
                  Type 'ParsedQs[]' is not assignable to type 'WhereAttributeHash<any>'.
                    Type 'ParsedQs[]' is not assignable to type '{ [x: string]: string | number | bigint | boolean | Buffer | Fn | Col | Literal | WhereAttributeHash<any> | Date | WhereOperators | ... 6 more ... | undefined; }'.
                      Index signature for type 'string' is missing in type 'ParsedQs[]'.

14  return User.findAll(whereClause)
                        ~~~~~~~~~~~

    at createTSError (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:820:12)
    at reportTSError (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:824:19)
    at getOutput (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:1014:36)
    at Object.compile (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:1322:43)
    at Module.m._compile (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:1454:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/<myusername>/Desktop/Dev/nft-reactor-content/backend/node_modules/ts-node/src/index.ts:1458:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  diagnosticCodes: [ 2345 ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
<myusername>@<mycomputername> backend % 

Do you see what the problem is?

Trouble locating the database so I can add token check

I am trying to build an app that authenticates whether or not a user's wallet contains a particular NFT. This app looks like a great foundation for this. I was thinking of making it so that after the user signs the nonce, web3 checks if the wallet contains a particular token balance. Is this project something that could be ported to what I'm describing?

Btw the dumb part of this question is that I can't find the actual database file. Where is this file getting written to the hard drive? I see the line storage: path.join(os.tmpdir(), 'db.sqlite'), in db.ts but for some reason I can't find this path after I run the program. I know that there is a persistent db because the app remembered my nickname which I typed in after signing in with my metamask.

{error: "Signature verification failed"}

Hello,
From time to time i get this after login (if i login/logout for a few times) :

{error: "Signature verification failed"}

on the back-end i get this error in the console:

Then, on the frontend i see:

Here is my console on the frontend:

It has something to do with jwt token?

Can you tell mehow can i investigate where is the pb?

If i delete cookies on the app itself, I can login, but immediately throws that error...

I cannot figure why.

Feature

Can a feature like this be implemented with a WP website?

Has the laterst changes of Web3, as of 2021, been incorporated?

Has the laterst changes of Web3.js, as of 2021, been incorporated? Does this demo work properly with the laterst versions of MetaMask?

Not working in Android metamask browser

https://amaurym.com/login-with-metamask-demo/ this link works if I open it in the android metamask browser. But If I start the project using yarn then it doesn't work on the phone

This is from https://amaurym.com/login-with-metamask-demo//

This is when I start the project with yarn in local

Won't work in Opera

Just letting you know I can't get your demo to work in opera with metamask installed.

package express-jwt now requires algorithms explicitly set.

However if we set algorithms : ['RS256'], and then provide the options parameter in the jwt.sign method, It generates some line start error.
Please test if this code works.

Improve code quality by adding eslint rules

Right now, I disable these eslint rules:

https://github.com/amaurymartiny/login-with-metamask-demo/blob/694021d86462eaf0fafe7f37a5de555a778a408c/.eslintrc.js#L3-L14

It would be good to turn them on again.

If you want to work on this, feel free to drop a message here, and say on which rule(s) you want to work on. I prefer smaller PRs which focus on 1-3 rules max each.

Fix frontend Dockerfile

Repro

docker-compose up --build

Expected

Runs backend and frontend

Actual

Cannot run frontend, got error

frontend_1  | ℹ ｢wds｣: Project is running at http://172.21.0.3/
frontend_1  | ℹ ｢wds｣: webpack output is served from /login-with-metamask-demo
frontend_1  | ℹ ｢wds｣: Content not from webpack is served from /app/public
frontend_1  | ℹ ｢wds｣: 404s will fallback to /login-with-metamask-demo/
frontend_1  | Starting the development server...
frontend_1  | 
frontend_1  | Failed to compile.
frontend_1  | 
frontend_1  | src/Login/Login.tsx
frontend_1  | Syntax error: Unexpected token, expected "," (38:16)
frontend_1  | 
frontend_1  |   36 | 
frontend_1  |   37 | 		// Check if MetaMask is installed
frontend_1  | > 38 | 		if (!(window as any).ethereum) {
frontend_1  |      | 		             ^
frontend_1  |   39 | 			window.alert('Please install MetaMask first.');
frontend_1  |   40 | 			return;
frontend_1  |   41 | 		}

The weird thing is, running it without Docker works:

cd packages/frontend
yarn start

Problem with running the demo

Hello!
Demo using yarn
The browser displays the following errors:

src\App\App.tsx
Line 36:8: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method

src\Profile\Profile.tsx
Line 38:9: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 39:9: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 60:9: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 61:9: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 61:9: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 72:55: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 88:8: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 90:8: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 94:8: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 94:8: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
Line 96:27: Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method

How do I fix this?

backend server throwing the error " cannot /get"

Sorry... it was my bad! I was apparently hitting the wrong endpoint!
I'll close this...

Unable to access DB on Windows

Hey,

I receive this error message:

Unhandled rejection SequelizeConnectionError: SQLITE_CANTOPEN: unable to open database file at Database.connections.(anonymous function).lib.Database.err (C:\Users\Carlos\Downloads\auth\backend\node_modules\sequelize\lib\dialects\sqlite\connection-manager.js:66:63)

Where / How can I handle this error? I assume I need to connect my own DB to make it work, right?

`TypeError: Failed to fetch` when trying to login with MetaMask

Steps to reproduce:

1. Try to login with MetaMask
2. Click "Connect" on the MetaMask confirmation page

Expected Outcome: To login

Actual Outcome: TypeError: Failed to fetch

I am unable to run this

I don't know if i am missing something, i am just following steps from scratch and find myself hours here without success, just clone-> yarn install -> yarn start, and getting this.... any help appreciated please

[start:backend ] (sequelize) Warning: SQLite does not support 'INTEGER' with UNSIGNED or ZEROFILL. Plain 'INTEGER' will be used instead.
[start:backend ] >> Check: https://www.sqlite.org/datatype3.html
[start:backend ]
[start:backend ] [mylocalPATH]\login-with-metamask-demo\node_modules\express-jwt\lib\index.js:22
[start:backend ] if (!options.algorithms) throw new Error('algorithms should be set');

Unable to compile

I think code in the tutorial is not the same that repository.... i am unable to compile

\login-with-metamask-demo\node_modules\ts-node\src\index.ts:500
[start:backend ] return new TSError(diagnosticText, diagnosticCodes)
[start:backend ] ^
[start:backend ] TSError: ⨯ Unable to compile TypeScript:
[start:backend ] src/services/users/controller.ts(12,23): error TS2345: Argument of type '"" | { where: { publicAddress: string | ParsedQs | string[] | ParsedQs[]; }; } | undefined' is not assignable to parameter of type 'FindOptions | undefined'.
[start:backend ] Type '""' is not assignable to type 'FindOptions | undefined'.

Use React hooks

instead of class components

Installing in cpanel

Hi, how can I install this app on a cpanel server

how to create in android kotlin

hello sir i want this code in kotlin please share kotlin sign message link