From ed598c31a8e0af0eda6a76343945b1163133ccc0 Mon Sep 17 00:00:00 2001
From: David Gamez <1192523+davidgamez@users.noreply.github.com>
Date: Thu, 12 Oct 2023 11:14:55 -0400
Subject: [PATCH] Feat/auth flow (#125)
---
.github/workflows/web-app.yml | 59 +-
web-app/.eslintignore | 1 -
web-app/.gitignore | 4 +-
web-app/cypress/e2e/signup.cy.ts | 66 ++
web-app/package.json | 34 +-
web-app/src/.env.rename_me | 7 +
web-app/src/.env.test | 6 +
web-app/src/app/App.tsx | 23 +-
web-app/src/app/components/AppSpinner.tsx | 19 +
web-app/src/app/components/Context.tsx | 40 +
.../{util-component => components}/Footer.css | 0
.../{util-component => components}/Footer.tsx | 0
.../{util-component => components}/Header.tsx | 13 +-
web-app/src/app/hooks/index.ts | 10 +
web-app/src/app/router/ProtectedRoute.tsx | 14 +
web-app/src/app/router/Router.tsx | 13 +-
.../app/{account-page => screens}/Account.tsx | 0
.../ContactInformation.tsx | 0
.../app/{sign-in-page => screens}/SignIn.tsx | 81 +-
.../app/{sign-up-page => screens}/SingUp.tsx | 105 ++-
web-app/src/app/services/index.ts | 1 +
web-app/src/app/services/profile-service.ts | 43 +
web-app/src/app/sign-in-page/AuthContext.tsx | 34 -
web-app/src/app/store/profile-reducer.ts | 114 +++
web-app/src/app/store/profile-selectors.ts | 20 +
web-app/src/app/store/reducers.ts | 8 +
web-app/src/app/store/saga/auth-saga.ts | 106 +++
web-app/src/app/store/saga/profile-saga.ts | 27 +
web-app/src/app/store/saga/root-saga.ts | 9 +
web-app/src/app/store/selectors.ts | 12 +
web-app/src/app/store/store.ts | 52 ++
web-app/src/app/types.ts | 48 ++
web-app/src/app/util-component/Context.tsx | 14 -
web-app/src/firebase.ts | 12 +
web-app/src/index.tsx | 6 -
web-app/src/reportWebVitals.ts | 15 -
web-app/yarn.lock | 735 +++++++++++++++++-
37 files changed, 1587 insertions(+), 164 deletions(-)
create mode 100644 web-app/cypress/e2e/signup.cy.ts
create mode 100644 web-app/src/.env.rename_me
create mode 100644 web-app/src/.env.test
create mode 100644 web-app/src/app/components/AppSpinner.tsx
create mode 100644 web-app/src/app/components/Context.tsx
rename web-app/src/app/{util-component => components}/Footer.css (100%)
rename web-app/src/app/{util-component => components}/Footer.tsx (100%)
rename web-app/src/app/{util-component => components}/Header.tsx (92%)
create mode 100644 web-app/src/app/hooks/index.ts
create mode 100644 web-app/src/app/router/ProtectedRoute.tsx
rename web-app/src/app/{account-page => screens}/Account.tsx (100%)
rename web-app/src/app/{contact-information-page => screens}/ContactInformation.tsx (100%)
rename web-app/src/app/{sign-in-page => screens}/SignIn.tsx (57%)
rename web-app/src/app/{sign-up-page => screens}/SingUp.tsx (50%)
create mode 100644 web-app/src/app/services/index.ts
create mode 100644 web-app/src/app/services/profile-service.ts
delete mode 100644 web-app/src/app/sign-in-page/AuthContext.tsx
create mode 100644 web-app/src/app/store/profile-reducer.ts
create mode 100644 web-app/src/app/store/profile-selectors.ts
create mode 100644 web-app/src/app/store/reducers.ts
create mode 100644 web-app/src/app/store/saga/auth-saga.ts
create mode 100644 web-app/src/app/store/saga/profile-saga.ts
create mode 100644 web-app/src/app/store/saga/root-saga.ts
create mode 100644 web-app/src/app/store/selectors.ts
create mode 100644 web-app/src/app/store/store.ts
create mode 100644 web-app/src/app/types.ts
delete mode 100644 web-app/src/app/util-component/Context.tsx
create mode 100644 web-app/src/firebase.ts
delete mode 100644 web-app/src/reportWebVitals.ts
diff --git a/.github/workflows/web-app.yml b/.github/workflows/web-app.yml
index 7f9292d0f..97972b347 100644
--- a/.github/workflows/web-app.yml
+++ b/.github/workflows/web-app.yml
@@ -36,9 +36,7 @@ jobs:
**/.eslintcache
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn-lock.json') }}
restore-keys: |
- ${{ runner.os }}-build-${{ env.cache-name }}-
- ${{ runner.os }}-build-
- ${{ runner.os }}-
+ ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn-lock.json') }}
- name: Install dependencies
working-directory: web-app
@@ -51,7 +49,7 @@ jobs:
- name: Cypress test
uses: cypress-io/github-action@v6
with:
- start: yarn start
+ start: yarn start:test
wait-on: 'npx wait-on --timeout 120000 http://127.0.0.1:3000'
working-directory: web-app
@@ -113,31 +111,52 @@ jobs:
**/.eslintcache
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn-lock.json') }}
restore-keys: |
- ${{ runner.os }}-build-${{ env.cache-name }}-
- ${{ runner.os }}-build-
- ${{ runner.os }}-
+ ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn-lock.json') }}
- name: Install dependencies
working-directory: web-app
run: yarn install --frozen-lockfile
- - name: Set Firebase project name
+ - name: Set Firebase project properties
working-directory: web-app
run: |
if [[ $GITHUB_EVENT_NAME == 'push' && $GITHUB_REF == 'refs/heads/main' ]]; then
echo "Setting FIREBASE_PROJECT to 'pushed to main branch'"
echo "FIREBASE_PROJECT=qa" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_API_KEY=${{ secrets.QA_REACT_APP_FIREBASE_API_KEY }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_AUTH_DOMAIN=${{ secrets.QA_REACT_APP_FIREBASE_AUTH_DOMAIN }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_PROJECT_ID=${{ secrets.QA_REACT_APP_FIREBASE_PROJECT_ID }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_STORAGE_BUCKET=${{ secrets.QA_REACT_APP_FIREBASE_STORAGE_BUCKET }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.QA_REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}" >> $GITHUB_ENV
+ echo "REACT_REACT_APP_FIREBASE_APP_ID=${{ secrets.QA_REACT_APP_FIREBASE_APP_ID }}" >> $GITHUB_ENV
elif [[ $GITHUB_EVENT_NAME == 'release' ]]; then
echo "Setting FIREBASE_PROJECT to 'release'"
echo "FIREBASE_PROJECT=prod" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_API_KEY=${{ secrets.PROD_REACT_APP_FIREBASE_API_KEY }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_AUTH_DOMAIN=${{ secrets.PROD_REACT_APP_FIREBASE_AUTH_DOMAIN }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_PROJECT_ID=${{ secrets.PROD_REACT_APP_FIREBASE_PROJECT_ID }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_STORAGE_BUCKET=${{ secrets.PROD_REACT_APP_FIREBASE_STORAGE_BUCKET }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.PROD_REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}" >> $GITHUB_ENV
+ echo "REACT_REACT_APP_FIREBASE_APP_ID=${{ secrets.PROD_REACT_APP_FIREBASE_APP_ID }}" >> $GITHUB_ENV
else
echo "Setting FIREBASE_PROJECT to 'dev'"
echo "FIREBASE_PROJECT=dev" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_API_KEY=${{ secrets.DEV_REACT_APP_FIREBASE_API_KEY }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_AUTH_DOMAIN=${{ secrets.DEV_REACT_APP_FIREBASE_AUTH_DOMAIN }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_PROJECT_ID=${{ secrets.DEV_REACT_APP_FIREBASE_PROJECT_ID }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_STORAGE_BUCKET=${{ secrets.DEV_REACT_APP_FIREBASE_STORAGE_BUCKET }}" >> $GITHUB_ENV
+ echo "REACT_APP_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.DEV_REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}" >> $GITHUB_ENV
+ echo "REACT_REACT_APP_FIREBASE_APP_ID=${{ secrets.DEV_REACT_APP_FIREBASE_APP_ID }}" >> $GITHUB_ENV
fi
+ - name: Populate Variables
+ working-directory: web-app
+ run: |
+ ../scripts/replace-variables.sh -in_file src/.env.rename_me -out_file src/.env.${{ env.FIREBASE_PROJECT }} -variables REACT_APP_FIREBASE_API_KEY,REACT_APP_FIREBASE_AUTH_DOMAIN,REACT_APP_FIREBASE_PROJECT_ID,REACT_APP_FIREBASE_STORAGE_BUCKET,REACT_APP_FIREBASE_MESSAGING_SENDER_ID,REACT_REACT_APP_FIREBASE_APP_ID
+
- name: Build
working-directory: web-app
- run: yarn build
+ run: yarn build:${FIREBASE_PROJECT}
- name: Select Firebase Project
working-directory: web-app
@@ -155,8 +174,28 @@ jobs:
env:
PR_ID: ${{ github.event.number }}
+ - name: Check for Existing Comment
+ id: check-comment
+ working-directory: web-app
+ if: ${{ github.event_name == 'pull_request' }}
+ run: |
+ HOSTING_URL=$(npx firebase hosting:channel:list | grep "pr-${{ env.PR_ID }}" | awk '{print $7}')
+ COMMENT="Preview Firebase Hosting URL: $HOSTING_URL"
+ COMMENTS=$(curl -s -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" -H "Accept: application/vnd.github.v3+json" "https://api.github.com/repos/${{ github.repository }}/issues/${{ env.PR_ID }}/comments")
+
+ JQ_CHECK=`echo "$COMMENTS" | jq -r ".[] | select(.body == \"$COMMENT\")"`
+ if [ -z "$JQ_CHECK" ]; then
+ echo "Comment does not exist."
+ echo "comment_exists=false" >> $GITHUB_OUTPUT
+ else
+ echo "Comment already exists."
+ echo "comment_exists=true" >> $GITHUB_OUTPUT
+ fi
+ env:
+ PR_ID: ${{ github.event.number }}
+
- name: Comment on PR with Hosting URL (PR Preview)
- if: ${{ github.event_name == 'pull_request' && github.event.action == 'opened' }}
+ if: ${{ github.event_name == 'pull_request' && steps.check-comment.outputs.comment_exists == 'false' }}
working-directory: web-app
run: |
HOSTING_URL=$(npx firebase hosting:channel:list | grep "pr-${{ env.PR_ID }}" | awk '{print $7}')
diff --git a/web-app/.eslintignore b/web-app/.eslintignore
index 957734943..3e2e84b08 100644
--- a/web-app/.eslintignore
+++ b/web-app/.eslintignore
@@ -1,3 +1,2 @@
build/
node_modules/
-src/reportWebVitals.ts
diff --git a/web-app/.gitignore b/web-app/.gitignore
index 83b6a020a..172d43e8a 100644
--- a/web-app/.gitignore
+++ b/web-app/.gitignore
@@ -26,4 +26,6 @@ yarn-error.log*
# Cypress
cypress/screenshots
-cypress/videos
\ No newline at end of file
+cypress/videos
+
+.env.*
\ No newline at end of file
diff --git a/web-app/cypress/e2e/signup.cy.ts b/web-app/cypress/e2e/signup.cy.ts
new file mode 100644
index 000000000..89dccc33a
--- /dev/null
+++ b/web-app/cypress/e2e/signup.cy.ts
@@ -0,0 +1,66 @@
+import { passwordValidatioError } from '../../src/app/types';
+
+describe('Sign up screen', () => {
+ beforeEach(() => {
+ cy.visit('/sign-up');
+ });
+
+ it('should render components', () => {
+ cy.get('input[id="email"]').should('exist');
+ cy.get('input[id="password"]').should('exist');
+ cy.get('input[id="confirmPassword"]').should('exist');
+ cy.get('button[id="sign-up-button"]').should('exist');
+ });
+
+ it('should show the password error when password length is less than 12', () => {
+ cy.get('input[id="password"]')
+ .should('exist')
+ .type('short', { force: true });
+
+ cy.get('[data-testid=passwordError]')
+ .should('exist')
+ .contains(passwordValidatioError);
+ });
+
+ it('should show the password error when password do not contain lowercase', () => {
+ cy.get('input[id="password"]')
+ .should('exist')
+ .type('UPPERCASE_10_!', { force: true });
+
+ cy.get('[data-testid=passwordError]')
+ .should('exist')
+ .contains(passwordValidatioError);
+ });
+
+ it('should show the password error when password do not contain uppercase', () => {
+ cy.get('input[id="password"]')
+ .should('exist')
+ .type('lowercase_10_!', { force: true });
+
+ cy.get('[data-testid=passwordError]')
+ .should('exist')
+ .contains(passwordValidatioError);
+ });
+
+ it('should not show the password error when password is valid', () => {
+ cy.get('input[id="password"]')
+ .should('exist')
+ .type('UP_lowercase_10_!', { force: true });
+
+ cy.get('[data-testid=passwordError]').should('not.exist');
+ });
+
+ it('should show the password error when password do not match', () => {
+ cy.get('input[id="password"]')
+ .should('exist')
+ .type('UP_lowercase_10_!', { force: true });
+
+ cy.get('input[id="confirmPassword"]')
+ .should('exist')
+ .type('UP_lowercase_11_!', { force: true });
+
+ cy.get('[data-testid=confirmPasswordError]')
+ .should('exist')
+ .contains('Passwords do not match');
+ });
+});
diff --git a/web-app/package.json b/web-app/package.json
index 9f97e3311..0d2967a24 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -7,31 +7,36 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.9",
"@mui/material": "^5.14.9",
- "@types/jest": "^27.5.2",
- "@types/material-ui": "^0.21.12",
- "@types/node": "^16.18.50",
- "@types/react": "^18.2.21",
- "@types/react-dom": "^18.2.7",
+ "@reduxjs/toolkit": "^1.9.6",
+ "firebase": "^10.4.0",
+ "formik": "^2.4.5",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0",
+ "react-loading-overlay-ts": "^2.0.2",
+ "react-redux": "^8.1.3",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
+ "redux-persist": "^6.0.0",
+ "redux-saga": "^1.2.3",
"typeface-muli": "^1.1.13",
- "web-vitals": "^2.1.4"
+ "yup": "^1.3.2"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"scripts": {
- "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
- "build": "CI=false react-scripts build",
+ "start:dev": "env-cmd -f src/.env.dev react-scripts start",
+ "start:test": "env-cmd -f src/.env.test react-scripts start",
+ "build:dev": "CI=false env-cmd -f src/.env.dev react-scripts build",
+ "build:qa": "CI=false env-cmd -f src/.env.qa react-scripts build",
+ "start:prod": "env-cmd -f src/.env.prod react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint 'src/app/**/*.{js,ts,tsx}'",
"lint:fix": "eslint 'src/app/**/*.{js,ts,tsx}' --fix",
- "cypress-run": "cypress run",
- "cypress-open": "cypress open"
+ "cypress:run": "cypress run",
+ "cypress:open": "cypress open"
},
"eslintConfig": {
"extends": [
@@ -53,14 +58,23 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+ "@react-firebase/auth": "^0.2.10",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/cypress": "^1.1.3",
+ "@types/jest": "^27.5.2",
+ "@types/material-ui": "^0.21.12",
+ "@types/node": "^16.18.50",
+ "@types/react": "^18.2.25",
+ "@types/react-dom": "^18.2.7",
+ "@types/react-redux": "^7.1.27",
"@types/react-router-dom": "^5.3.3",
+ "@types/redux-saga": "^0.10.5",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
"cypress": "^13.2.0",
+ "env-cmd": "^10.1.0",
"eslint": "^8.49.0",
"eslint-config-prettier": "^9.0.0",
"eslint-config-standard-with-typescript": "^39.0.0",
diff --git a/web-app/src/.env.rename_me b/web-app/src/.env.rename_me
new file mode 100644
index 000000000..3de040313
--- /dev/null
+++ b/web-app/src/.env.rename_me
@@ -0,0 +1,7 @@
+DISABLE_ESLINT_PLUGIN=true
+REACT_APP_FIREBASE_API_KEY={{REACT_APP_FIREBASE_API_KEY}}
+REACT_APP_FIREBASE_AUTH_DOMAIN={{REACT_APP_FIREBASE_AUTH_DOMAIN}}
+REACT_APP_FIREBASE_PROJECT_ID={{REACT_APP_FIREBASE_PROJECT_ID}}
+REACT_APP_FIREBASE_STORAGE_BUCKET={{REACT_APP_FIREBASE_STORAGE_BUCKET}}
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID={{REACT_APP_FIREBASE_MESSAGING_SENDER_ID}}
+REACT_APP_FIREBASE_APP_ID={{REACT_APP_FIREBASE_APP_ID}}
\ No newline at end of file
diff --git a/web-app/src/.env.test b/web-app/src/.env.test
new file mode 100644
index 000000000..1567b781f
--- /dev/null
+++ b/web-app/src/.env.test
@@ -0,0 +1,6 @@
+DISABLE_ESLINT_PLUGIN=true
+REACT_APP_FIREBASE_API_KEY="REACT_APP_FIREBASE_API_KEY"
+REACT_APP_FIREBASE_PROJECT_ID="REACT_APP_FIREBASE_PROJECT_ID"
+REACT_APP_FIREBASE_STORAGE_BUCKET="REACT_APP_FIREBASE_STORAGE_BUCKET"
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID="REACT_APP_FIREBASE_MESSAGING_SENDER_ID"
+REACT_APP_FIREBASE_APP_ID="REACT_APP_FIREBASE_APP_ID"
\ No newline at end of file
diff --git a/web-app/src/app/App.tsx b/web-app/src/app/App.tsx
index 0641e6abe..e005efeac 100644
--- a/web-app/src/app/App.tsx
+++ b/web-app/src/app/App.tsx
@@ -1,21 +1,24 @@
import './App.css';
import AppRouter from './router/Router';
-import ContextProviders from './util-component/Context';
-import Footer from './util-component/Footer';
-import Header from './util-component/Header';
+import ContextProviders from './components/Context';
+import Footer from './components/Footer';
+import Header from './components/Header';
import { BrowserRouter } from 'react-router-dom';
+import AppSpinner from './components/AppSpinner';
function App(): React.ReactElement {
require('typeface-muli'); // Load font
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+