Go to file
Vivian Phung b261e7e436
Feat: Access Code Authentication Flow (#211)
## What changed?

This Pull Request introduces an access code validation feature to the authentication process. Changes encompass backend route for access code validation, new frontend components for handling access code input, and integration of the access code verification in the signup flow.

### Backend:
- Added POST `/accesscode` route in `auth.ts` for validating access codes.

### Frontend:
- Created `AccessCode` component for access code input and validation.
- Added `AccessSignUp` component that integrates access code verification before signup.
- Updated `SignUp` component to check for valid access code on mount.
- Modified `SnowballAuth` to use new `AccessSignUp` instead of `SignUp`.
- Added `verifyAccessCode` utility function for code verification API call.

## How to test?
1. Run the backend and frontend projects.
2. Navigate to the signup page. You should be prompted to enter an access code.
3. Enter the code `444444` and proceed. Any other code should display an error message.
4. Verify that valid access code routes to the signup component.

## Why make this change?

This change improves authentication by adding an extra layer of security through access code verification.
2024-06-21 21:10:31 -04:00
.github/workflows Add CI to test web app deployment and undeployment (#174) 2024-04-15 14:10:59 +05:30
.husky Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
.vscode Project Deployments - Deployed line items (#147) 2024-03-01 10:05:50 +05:45
packages Feat: Access Code Authentication Flow (#211) 2024-06-21 21:10:31 -04:00
scripts Switch from cra to vite 2024-04-11 21:48:58 -05:00
.gitignore update gitignore for build output 2024-05-06 13:02:37 -04:00
.node-version Switch from cra to vite 2024-04-11 21:48:58 -05:00
.npmrc Publish app deployment record in Laconic registry on creating new deployments (#62) 2024-02-12 11:34:01 +05:30
build-webapp.sh Laconic frontend deployment 2024-05-22 09:21:00 -05:00
lerna.json Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
package.json Lint using tsc; fix type errors 2024-04-11 21:49:14 -05:00
README.md Replace REACT_APP env with VITE 2024-04-25 16:59:02 +05:30
yarn.lock Support async express handlers 2024-06-19 22:59:20 -05:00

snowballtools-base

Setup

  • Clone the snowballtools-base repo

    git clone git@github.com:snowball-tools/snowballtools-base.git
    cd snowballtools-base
    
  • Install dependencies in root

    yarn
    
  • Build packages

    yarn build --ignore frontend
    

Let us assume the following domains for backend and frontend

  • Backend server: api.snowballtools.com

  • Frontend app: dashboard.snowballtools.com

  • Configuration Files

    • For Backend:

      cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
      
      • Production

        • Update the following in backend config file

          [server]
            ...
            [server.session]
              # Secret should be changed to a different random string
              secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7sidnc382"
              # Set URL of the frontend app
              appOriginUrl = "https://dashboard.snowballtools.com"
              # Set to true for session cookies to work behind proxy
              trustProxy = true
              # Set empty domain when using secure connection
              domain = ""
          
        • Set gitHub.oAuth.clientId and gitHub.oAuth.clientSecret in backend config file

          • OAuth App Creation
            • Homepage URL: https://dashboard.snowballtools.com
            • Authorization callback URL: https://dashboard.snowballtools.com/organization/projects/create
            • Generate a new client secret after app is created
        • Set gitHub.webhookUrl in backend config file

          [gitHub]
            webhookUrl = "https://api.snowballtools.com"
          
        • Let us assume domain for Laconicd to be api.laconic.com and set the following in backend config file

          [registryConfig]
            fetchDeploymentRecordDelay = 5000
            # Use actual port for REST endpoint
            restEndpoint = "http://api.laconic.com:1317"
            # Use actual port for GQL endpoint
            gqlEndpoint = "http://api.laconic.com:9473/api"
            # Set private key of account to be used in Laconicd
            privateKey = "0wtu92cd4f1y791ezpjwgzzazni4dmd3q3mzqc3t6i6r9v06ji784tey6hwmnn69"
            # Set Bond ID to be used for publishing records
            bondId = "8xk8c2pb61kajwixpm223zvptr2x2ncajq0vd998p6aqhvqqep2reu6pik245epf"
            chainId = "laconic_9000-1"
            # Set authority that is existing in the chain
            authority = "laconic"
            [registryConfig.fee]
              amount = "200000"
              denom = "aphoton"
              gas = "750000"
          
      • Development

        • Set gitHub.oAuth.clientId and gitHub.oAuth.clientSecret in backend config file

          • OAuth App Creation
            • Homepage URL: http://localhost:3000
            • Authorization callback URL: http://localhost:3000/organization/projects/create
            • Generate a new client secret after app is created
        • Setup Laconicd

          • Run the laconicd stack following this doc

          • Get the private key and set registryConfig.privateKey in backend config file

            laconic-so deployment --dir laconic-loaded-deployment exec laconicd "laconicd keys export mykey --unarmored-hex --unsafe"
            # WARNING: The private key will be exported as an unarmored hexadecimal string. USE AT YOUR OWN RISK. Continue? [y/N]: y
            # 754cca7b4b729a99d156913aea95366411d072856666e95ba09ef6c664357d81
            
          • Set authority in registryConfig.authority in backend config file

          • Run the script to create bond, reserve the authority and set authority bond

            yarn test:registry:init
            # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
            
            • Get the bond id and set registryConfig.bondId in backend config file
        • Setup ngrok for GitHub webhooks

          • ngrok getting started

          • Start ngrok and point to backend server endpoint

            ngrok http http://localhost:8000
            
          • Look for the forwarding URL in ngrok

            Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
            
          • Set gitHub.webhookUrl in backend config file

            [gitHub]
              webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
            
    • For Frontend:

      cp packages/frontend/.env.example packages/frontend/.env
      
      • Copy the GitHub OAuth app client ID from previous steps and set it in frontend .env file

        VITE_GITHUB_CLIENT_ID = <CLIENT_ID>
        
      • Set VITE_GITHUB_PWA_TEMPLATE_REPO and VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO in .env file

        VITE_GITHUB_PWA_TEMPLATE_REPO = 'cerc-io/test-progressive-web-app'   # Set actual owner/name of the template repo that will be used for creating new repo
        VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'cerc-io/image-upload-pwa-example'  # Set actual owner/name of the template repo that will be used for creating new repo
        
      • Production

        • Set the following values in .env file

          VITE_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
          
        • Sign in to wallet connect to create a project ID

          • Create a project and add information to use wallet connect SDK
            • Add project name and select project type as App
            • Set project home page URL to https://dashboard.snowballtools.com
          • On creation of project, use the Project ID and set it in VITE_WALLET_CONNECT_ID in .env file
          VITE_WALLET_CONNECT_ID = <PROJECT_ID>
          
        • Build the React application

          yarn build
          
        • Use a web server for hosting static built files

          python3 -m http.server -d build 3000
          
      • Development

        • Copy the graphQL endpoint from terminal and add the endpoint in the .env file present in packages/frontend

          VITE_SERVER_URL = 'http://localhost:8000'
          
        • Sign in to wallet connect to create a project ID.

          • Create a project and add information to use wallet connect SDK
            • Add project name and select project type as App
            • Project home page URL is not required to be set
          • On creation of project, use the Project ID and set it in VITE_WALLET_CONNECT_ID in .env file
          VITE_WALLET_CONNECT_ID = <Project_ID>
          
        • The React application will be running in http://localhost:3000/

Development

  • Start the backend server

    yarn start:backend
    
  • Start the frontend

    yarn start