Added Authentication and User creation

.eslintignore

@@ -26,10 +26,16 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*.production
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cypress
+/cypress/screenshots
+/cypress/videos
+cypress.env.json

.github/workflows/preview_tests.yml

@@ -0,0 +1,46 @@
+name: Cypress Tests
+
+on:
+    push:
+        branches-ignore:
+            - main
+jobs:
+    cypress-run:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Wait for preview deployment
+              uses: lewagon/[email protected]
+              with:
+                ref: ${{ github.ref }}
+                check-name: 'Deploy Preview'
+                repo-token: ${{ secrets.PERSONAL_GITHUB_ACCESS_TOKEN }}
+                wait-interval: 10
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Write cypress.env.json
+              run: |
+                  echo '${{ secrets.CYPRESS_ENV_CI }}' > cypress.env.json
+            - name: Write .env
+              run: |
+                  echo "${{ secrets.ENV_TEST_LOCAL }}" > .env
+            - name: Cypress Run Component Tests
+              uses: cypress-io/github-action@v6
+              env:
+                CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                GITHUB_TOKEN: ${{ secrets.PERSONAL_GITHUB_ACCESS_TOKEN }}
+              with:
+                browser: chrome
+                component: true
+                wait-on: ${{ secrets.CYPRESS_BASE_URL }}
+                config: baseUrl=${{ secrets.CYPRESS_BASE_URL }}
+            - name: Cypress Run E2E Tests
+              uses: cypress-io/github-action@v6
+              env:
+                CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                GITHUB_TOKEN: ${{ secrets.PERSONAL_GITHUB_ACCESS_TOKEN }}
+              with:
+                install: false
+                config: baseUrl=${{ secrets.CYPRESS_BASE_URL }}
+                wait-on: ${{ secrets.CYPRESS_BASE_URL }}
+                browser: chrome
+                record: true

.github/workflows/vercel_preview_deployment.yml

@@ -0,0 +1,30 @@
+name: Vercel Preview Deploymentga .
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+jobs:
+  deploy-preview:
+    name: Deploy Preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Write .env
+        run: |
+          echo "${{ secrets.ENV_PREVIEW }}" > .env
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: |
+          url="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
+          vercel alias --token=${{ secrets.VERCEL_TOKEN }} set "$url" ubco-capstone-team-3.vercel.app

.gitignore

@@ -36,6 +36,10 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# Loggings
+/logs
+
 # cypress
 /cypress/screenshots
 /cypress/videos
+cypress.env.json

.prettierignore

@@ -33,3 +33,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cypress
+/cypress/screenshots
+/cypress/videos
+cypress.env.json

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -35,6 +35,12 @@ docker-compose -f dev-docker-compose.yml up -d
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+### Apply latest database migrations
+
+```bash
+npx prisma db push
+```
+
 ### Linting the Project
 
 Run the following to lint and format the project
@@ -48,15 +54,29 @@ npm run lint
 Run the following to open Cypress
 
 ```bash
-cypress open
+npm run cypress:open
 ```
 
 ### Development environment variable
 
-Add this following code to a `.env` file
+Please view in private channel #dotenv
 
-```dotenv
-DATABASE_URL="postgresql://postgres:password123@localhost:5432/postgres?schema=dev"
+### Database migration
+
+If you make changes to prisma models, you can migrate the database by
+
+```bash
+npx prisma migrate dev --name <migration-name>
+```
+
+Note: `migration-name` should be a short description of the changes you made
+
+### Database exploration
+
+You can view your tables, columns, and make changes to your local database by
+
+```bash
+npm run prisma:explore
 ```
 
 ## Chosen Project

cypress.config.ts

@@ -1,12 +1,19 @@
 import { defineConfig } from 'cypress'
+import clearDB from './cypress/tasks/clearDB'
 
 require('dotenv').config()
+
 export default defineConfig({
+    projectId: process.env.CYPRESS_PROJECT_ID,
     e2e: {
         baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
         setupNodeEvents(on, config) {
             // implement node event listeners here
+            on('task', {
+                clearDB,
+            })
         },
+        experimentalModifyObstructiveThirdPartyCode: true,
     },
 
     component: {

cypress/e2e/app/signin.cy.ts

@@ -0,0 +1,56 @@
+import { DELAY, TIMEOUT } from '../../utils/constants'
+import { getHeaders } from '../../utils/headers'
+
+describe.skip('Test auth', () => {
+    before(() => {
+        cy.task('clearDB')
+    })
+    it('should log in with google', () => {
+        // TODO: Visit landing page, check if logged in, if not, redirect to /signin instead of visit /signin directly
+        cy.visit('/signin', { headers: getHeaders() })
+        cy.get('h1').should('include.text', 'Sign In Page')
+        cy.get('[data-cy="google-sign-in-btn"]').should('include.text', 'Sign in with Google').click()
+
+        cy.url({ timeout: TIMEOUT.EXTRA_LONG }).should('eq', '')
+        cy.origin(
+            'https://accounts.google.com',
+            {
+                args: {
+                    username: Cypress.env('GOOGLE_USER'),
+                    password: Cypress.env('GOOGLE_PW'),
+                    cookieName: Cypress.env('COOKIE_NAME'),
+                    TIMEOUT: TIMEOUT,
+                    DELAY: DELAY,
+                },
+            },
+            ({ username, password, cookieName, TIMEOUT, DELAY }) => {
+                Cypress.on(
+                    'uncaught:exception',
+                    (err) =>
+                        !err.message.includes('ResizeObserver loop') &&
+                        !err.message.includes('Error in protected function')
+                )
+
+                // Type username
+                cy.get('input[type=email]', { timeout: TIMEOUT.MEDIUM }).should('be.visible').type(username)
+                cy.get('button').contains('Next').click()
+
+                // Type password
+                cy.get('input[type=password]', { timeout: TIMEOUT.LONG }).as('pwfInp')
+                cy.get('@pwfInp')
+                    .should('be.visible')
+                    .then(($pwfInp) => {
+                        // find the one that is not hidden
+                        const $visiblePwfInp = $pwfInp.filter((i, el) => {
+                            return !Cypress.$(el).is(':hidden')
+                        })
+                        cy.wrap($visiblePwfInp).type(password)
+                        cy.get('button').contains('Next').click()
+                    })
+            }
+        )
+
+        cy.location('origin', { timeout: TIMEOUT.EXTRA_LONG }).should('eq', Cypress.config().baseUrl)
+        cy.location('pathname').should('eq', '/')
+    })
+})

cypress/tasks/clearDB.ts

@@ -0,0 +1,12 @@
+import prisma from '@/lib/prisma'
+
+require('dotenv').config()
+
+export default async function clearDB() {
+    console.log(process.env.DATABASE_URL)
+
+    await prisma.account.deleteMany({})
+    await prisma.user.deleteMany({})
+
+    return null
+}

cypress/utils/constants.ts

@@ -0,0 +1,15 @@
+export const TIMEOUT = {
+    EXTRA_SHORT: 500,
+    SHORT: 1000,
+    MEDIUM: 3000,
+    LONG: 6000,
+    EXTRA_LONG: 8000,
+}
+
+export const DELAY = {
+    EXTRA_SHORT: 500,
+    SHORT: 1000,
+    MEDIUM: 3000,
+    LONG: 6000,
+    EXTRA_LONG: 8000,
+}

cypress/utils/headers.ts

@@ -0,0 +1,5 @@
+export const getHeaders = () => ({
+    Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
+    'User-Agent':
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
+})