sebpalluel/web3-monorepo

⚡️ Get started with your Web3 project,🔋 included: 🌈 Web3Auth & Biconomy for non-custodial Social Login and Account Abstraction, 🗂 monorepo with NX, 💻 Next.js + Next Auth + ChakraUI + Storybook for the frontend, 💾 Hasura GraphQL server and Nest.js for the backend, 🔮 The Graph protocol to query live data from smart contracts.

web3-monorepo's Issues

Global, import relevant code update from project multis-test

GraphQL, improve codegen with additional plugins for Hasura

https://github.com/ablestack/graphql-codegen-hasura

use next.js for front-end instead of vue

Auth with Next-Auth

• https://next-auth.js.org/tutorials/refresh-token-rotation
• https://hasura.io/learn/graphql/hasura-authentication/integrations/nextjs-auth/
• With react-query nextauthjs/react-query#7 (comment) & nextauthjs/react-query#14

Client, setup pinia store and axios for auth

Client, configure GraphQL codegen for better support of typescript with graphql and react query

https://hasura.io/blog/your-guide-to-graphql-with-typescript/

Client, implement Union types based error handling for GraphQL

https://www.the-guild.dev/blog/graphql-error-handling-with-fp

Client/Hasura, test simple subscription on api_user

https://v4.apollo.vuejs.org/guide-composable/subscription.html#usesubscription

UI, setup storybook last version with HeadlessUI lib + tailwindcss

implement refresh token mechanism for credentials and other oauth provider than google

nextauthjs/next-auth#3398 (comment)
Refesh token serverless route: https://github.com/gagnemartin/scrimhub/blob/main/pages/api/auth/refresh.ts

Client, use official nuxt3 module for apollo when ready

https://github.com/nuxt-community/apollo-module

Implement rest of tests on /auth routes

Django, create test db and test existing routes for auth

DLT, implement The Graph to query data on the ETH blockchain

https://thegraph.com/docs/en/querying/querying-from-an-application/

• use this example to integrate graph-client with react-query
• create a new page blockchain to showcase the graph live data
• create unit and integration test for query on the graph
• update README to mention The Graph integration

Bootstrap unit test with ponicode GitHub action + some unit test

https://app.ponicode.com/home

Hasura, create test suite for pentest and github action to launch those test on CI

DX, implement git commitizen when project open source

https://github.com/commitizen/cz-cli#making-your-repo-commitizen-friendly

Client, use Vercel for deployment

https://v3.nuxtjs.org/guide/deploy/providers/vercel/

Create new service backend/identity in docker-compose

Client + Hasura, configure apollo and do simple query request

Next, implement sign in with ETH directly from next app

• https://wagmi.sh/examples/sign-in-with-ethereum
• https://www.rainbowkit.com/docs/introduction

Client, first E2E test with cypress, user auth

Client, Implement zod library with react-hook-form on login/register page

• https://github.com/react-hook-form/resolvers
• https://zod.dev
• https://github.com/colinhacks/zod

OPS, issue a global coverage of the workspace

• https://docs.cypress.io/guides/tooling/code-coverage#Full-stack-code-coverage
• https://github.com/cypress-io/cypress-realworld-app

Use this to publish coverage and access stats: https://docs.codecov.com/docs

Client, create a storybook project with basic components and tests

Client, implement credentials with next auth

For now OAuth and email magic link is implemented:
Need to follow this guide to implement it securely with email/password. Need to add action on Hasura also for signUp

• Complete example of how to implement OAuth + credentials with refresh tokens in next auth

• Implementing Auth jwt with Hasura actions: https://hasura.io/docs/latest/graphql/core/actions/codegen/python-flask/

• Take inspiration from this repo and adapt it properly with Hasura

Walt.id implement Keycloak as Federated Identity Provider

https://docs.walt.id/v/idpkit/concepts/iam-keycloak-integration
https://next-auth.js.org/providers/keycloak
https://gist.github.com/degitgitagitya/db5c4385fc549f317eac64d8e5702f74

Issue with logout:
https://stackoverflow.com/questions/71872587/logout-from-next-auth-with-keycloak-provider-not-works

Client, create a PWA ?

• What is a PWA
• https://pwa.nuxtjs.org/
• https://snipcart.com/blog/vue-pwa-development

Client + Backend, implement refreshToken for OAuth and Credentials + improve password security

• use salted password:

1. https://www.mcafee.com/blogs/enterprise/cloud-security/what-is-a-salt-and-how-does-it-make-password-hashing-more-secure/
2. https://gist.github.com/azakordonets/e436ccbdb2a4aedac52a

• implement refresh token mechanism for oauth and credentials
• check this tutorial to implement it with google OAuth: https://next-auth.js.org/tutorials/refresh-token-rotation
• Example of how to implement OAuth + credentials with refresh tokens in next auth api route
• Refesh token serverless route: https://github.com/gagnemartin/scrimhub/blob/main/pages/api/auth/refresh.ts

UI, add a11y test on storybook test automation

https://storybook.js.org/blog/automate-accessibility-tests-with-storybook/

UI, create a nuxt3 bridge to integrate lib into client project

1. See doc for nuxt components
2. This article provide ways to import layouts + pages from the library to nuxt project

Client, implement graphql-ws with subscription on hasura with react-query

graphql-ws

DX, update project to be a monorepo and fix husky + typescript + lint issues + test

https://monorepo.tools

• move husky config + eslint + prettier + commitlint + vscode + ponicode from frontend/client to root

• create github actions according to different packages

• Fix husky config: https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js

• https://www.robinwieruch.de/javascript-monorepos/

• https://dev.to/mxro/the-ultimate-guide-to-typescript-monorepos-5ap7

Turborepo

• Article to show how to config turborepo with chakra ui: And the related repo.

Nx

Seems more efficient and feature complete

Client, use react error boundary to display default fallback component in case a js error occurs on client

https://nextjs.org/docs/advanced-features/error-handling#handling-client-errors

Remove patch for django-graphene force_text

graphql-python/graphene-django#1284 (comment)

import django
from django.utils.encoding import force_str
django.utils.encoding.force_text = force_str

Hasura, Test API setup with minimal test on fetch api_user

Testing Hasura with Jest https://trigodev.com/blog/how-to-test-a-hasura-api-with-jest + https://github.com/trigo-at/hasura-api-testing

Mail, implement sofn-xyz/mailing based on mjml

• https://mjml.io/ The only framework that makes responsive email easy
• https://github.com/sofn-xyz/mailing Build, test, send emails with React built with MJML https://www.mailing.run/docs

Client, various auth fixes + setup basic auth test + wrapper for error handling

Specs

Error wrapper

• create api middleware to standardize errors

SignUp

• I can create an account with google sign-in and the create an account with credentials with the same email. In that case i cannot login because i retrieve the first account without account which is the google OAuth user. I shouldn't be able to sign up with credentials matching an OAuth email. An error should indicate what provider to use.
• I shouldn't be able to create multiple user with the same email in credentials. Display error that account with this email already exist.

SignIn

• When entering wrong credentials on sign in i should have an error displayed, the credential section should be opened
• I should be able to retrieve my OAuth account with my email, currently the user is empty when i login with email verifficationToken. Make sure to get the full user if it's the case.
• I can't login with a different OAuth provider which is a security feature, a clear error message should be displayed, ideally with the provider the user should use.

Client, setup advanced JWT auth with token refresh and reset of apollo client on logout

Follow this guide

Client, setup nhost on existing project

Follow this guide and de-activate ssr to avoid issues

Client, unit test, check out vue testing library when mature enough to handle vue 3 new syntax setup

Need to use version >6 to avoid vue-compiler-sfc error

https://github.com/testing-library/vue-testing-library

Client, setup unit and integration test + create github action

#39

OPS, How to build production-grade Next.js projects

https://giancarlobuomprisco.com/next/how-to-build-production-grade-nextjs-projects

Hasura, apply security settings for prod

https://hasura.io/graphql/security/

Storybook, add interaction testing

DID, minimal implementation of Walt.id with existing next-auth setup

## General links

• https://blog.iota.org/login-with-iota-walt-id/
• https://docs.walt.id/
• https://walt.id/blog/p/idp-kit

Walt.id API

https://wallet.walt.id/api/swagger

Follow specs of OpenID Connect for integration as provider in Next Auth:

• https://openid.net/connect/

• example of OIDC provider implementation with next auth: nextauthjs/next-auth#250 (comment)

• Doc for OIDC provider provider implementation: https://next-auth.js.org/configuration/providers/oauth#client-option

  #### TODO:

• federated logout: nextauthjs/next-auth#3938 (comment)

Mail, create a mail service with nest or stay in django ?

OPS: create fully working dev/staging environment with nx workspace

Check this two repo working with Hasura + Postgres:

• https://github.com/anoop-logcat/hasura-firebase-auth
• https://github.com/anoop-logcat/nx-workspace

As a user, i can register an account and connect to the platform

Summary

As an user, i can register a new account so that i can login. For that i will need to confirm my email first. I'm also able to change my password. When i'm registered i can login to my account, when i'm already logged, i will be redirected to the home page automatically. I can logout anytime.

Acceptance Criteria

Register

• I can register a new account
• I can confirm my registration with an email
• I can change my password

Login/Logout

• I can login to my account
• I go to the main page when i'm already connected
• I can logout of my account

Other descriptions

JWT is the technology used to handle auth. The auth is done with the django server.

Client, implement react-query with a service to do Hasura requests

• https://hasura.io/blog/getting-started-with-react-query-and-graphql/
• https://hasura.io/blog/getting-started-with-react-query/
• https://tanstack.com/query/v4/docs/examples/react/basic-graphql-request

UI, create github action for test suite of storybook

https://storybook.js.org/docs/react/writing-tests/test-runner#run-against-deployed-storybooks-via-github-actions-deployment