Repository: echobind/bisonapp
Pull request #284 (2022-11-03 12:59:26)

fix: adjust color mode on forms light and dark theme.
Color modes were not adjusted when implementing NextAuth w/ tRPC. 
The PR ensures the login and sign-up form theme stays consistent. 

## Screenshots

https://user-images.githubusercontent.com/97467610/199726436-4f4821ae-3a12-44ec-a55f-8f319256a4df.mov

## Checklist

- [ ] Requires dependency update?
- [x] Generating a new app works



Patch:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 4659d0b..41b49f0 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/packages/create-bison-app/.tool-versions b/packages/create-bison-app/.tool-versions
index 048be47..100be2d 100644
--- a/packages/create-bison-app/.tool-versions
+++ b/packages/create-bison-app/.tool-versions
@@ -1,1 +1,1 @@
-nodejs 16.17.0
+nodejs 18.12.0
diff --git a/packages/create-bison-app/template/.github/workflows/main.js.yml.ejs b/packages/create-bison-app/template/.github/workflows/main.yml.ejs
similarity index 95%
rename from packages/create-bison-app/template/.github/workflows/main.js.yml.ejs
rename to packages/create-bison-app/template/.github/workflows/main.yml.ejs
index ce2c783..90da9fb 100644
--- a/packages/create-bison-app/template/.github/workflows/main.js.yml.ejs
+++ b/packages/create-bison-app/template/.github/workflows/main.yml.ejs
@@ -17,7 +17,7 @@ jobs:
       NODE_ENV: test
     services:
       postgres:
-        image: postgres:11.5
+        image: postgres:15
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: postgres
@@ -34,14 +34,14 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           # This will cache the packages that yarn installs
           cache: yarn
 
       # Yarn install
       - name: Install packages
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
 
       # Setup & configure database
       - name: Setup test database
@@ -76,7 +76,6 @@ jobs:
         env:
           NODE_ENV: test
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          APP_SECRET: foo
           DATABASE_URL: postgresql://postgres:postgres@localhost/myapp_test
 
       - name: Upload Cypress Screenshots
diff --git a/packages/create-bison-app/template/.nvmrc b/packages/create-bison-app/template/.nvmrc
index 37e391f..9dfef47 100644
--- a/packages/create-bison-app/template/.nvmrc
+++ b/packages/create-bison-app/template/.nvmrc
@@ -1,1 +1,1 @@
-v16.17.0
+v18.12.0
diff --git a/packages/create-bison-app/template/.tool-versions b/packages/create-bison-app/template/.tool-versions
index 048be47..100be2d 100644
--- a/packages/create-bison-app/template/.tool-versions
+++ b/packages/create-bison-app/template/.tool-versions
@@ -1,1 +1,1 @@
-nodejs 16.17.0
+nodejs 18.12.0
diff --git a/packages/create-bison-app/template/README.md.ejs b/packages/create-bison-app/template/README.md.ejs
index c5bc649..b56e494 100644
--- a/packages/create-bison-app/template/README.md.ejs
+++ b/packages/create-bison-app/template/README.md.ejs
@@ -1,6 +1,6 @@
 <p align="center" style="text-align:center">
   <h1><%= name %></h1>
-  <p><img alt="CI STATUS" src="https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/main.js.yml/badge.svg"/></p>
+  <p><img alt="CI STATUS" src="https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/main.yml/badge.svg"/></p>
 </p>
 
 # Getting Started Tutorial
diff --git a/packages/create-bison-app/template/_.env.local.ejs b/packages/create-bison-app/template/_.env.local.ejs
index ff3e3f2..0a8e63d 100644
--- a/packages/create-bison-app/template/_.env.local.ejs
+++ b/packages/create-bison-app/template/_.env.local.ejs
@@ -1,6 +1,5 @@
 # ENV vars here override .env when running locally
 # DATABASE_URL="postgresql://postgres@localhost:5432/<%= name -%>_dev?schema=public"
-APP_SECRET=foo
 NEXTAUTH_SECRET=foo
 NEXTAUTH_URL=http://localhost:3000
 APP_ENV=development
diff --git a/packages/create-bison-app/template/app.json b/packages/create-bison-app/template/app.json
index 6f29f7f..c874b70 100644
--- a/packages/create-bison-app/template/app.json
+++ b/packages/create-bison-app/template/app.json
@@ -6,7 +6,7 @@
     }
   },
   "env": {
-    "APP_SECRET": {
+    "NEXTAUTH_SECRET": {
       "description": "Server secret for generating JWT tokens",
       "generator": "secret"
     }
diff --git a/packages/create-bison-app/template/components/CenteredBoxForm.tsx b/packages/create-bison-app/template/components/CenteredBoxForm.tsx
index 922859b..b82f23d 100644
--- a/packages/create-bison-app/template/components/CenteredBoxForm.tsx
+++ b/packages/create-bison-app/template/components/CenteredBoxForm.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Box } from '@chakra-ui/react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
 
 interface Props {
   children: ReactNode;
@@ -10,13 +10,11 @@ export function CenteredBoxForm({ children }: Props) {
   return (
     <Box
       margin="auto"
-      borderRadius="md"
+      borderRadius="xl"
       width={{ base: 'auto', lg: 400 }}
-      boxShadow="md"
-      borderColor="gray.200"
-      borderWidth={1}
+      boxShadow={{ base: 'none', sm: useColorModeValue('md', 'md-dark') }}
       padding={8}
-      bg="white"
+      bg="bg-surface"
       marginY={{ base: 4, lg: 16 }}
       marginX={{ base: 8, lg: 'auto' }}
     >
diff --git a/packages/create-bison-app/template/components/auth/LoginForm.tsx b/packages/create-bison-app/template/components/auth/LoginForm.tsx
index ae373f8..afc8c27 100644
--- a/packages/create-bison-app/template/components/auth/LoginForm.tsx
+++ b/packages/create-bison-app/template/components/auth/LoginForm.tsx
@@ -68,7 +68,7 @@ export function LoginForm() {
       <Flex flexDirection="column" justifyContent="center" marginBottom={4}>
         <Circle size="60px" bg="gray.300" color="white" alignSelf="center" />
 
-        <Text as="h2" color="gray.400" fontSize="lg" textAlign="center" marginTop={2}>
+        <Text as="h2" fontSize="lg" textAlign="center" marginTop={2}>
           Welcome Back!
         </Text>
       </Flex>
@@ -118,7 +118,7 @@ export function LoginForm() {
       <Flex marginTop={8} justifyContent="center">
         <Text color="gray.500">
           New User?{' '}
-          <Link href="/signup" color="gray.900">
+          <Link href="/signup" color="muted">
             Sign Up
           </Link>
         </Text>
diff --git a/packages/create-bison-app/template/components/auth/SignUpForm.tsx b/packages/create-bison-app/template/components/auth/SignUpForm.tsx
index 7c2994c..509ebe5 100644
--- a/packages/create-bison-app/template/components/auth/SignUpForm.tsx
+++ b/packages/create-bison-app/template/components/auth/SignUpForm.tsx
@@ -89,7 +89,7 @@ export function SignUpForm() {
       <Flex flexDirection="column" justifyContent="center" marginBottom={4}>
         <Circle size="60px" bg="gray.300" color="white" alignSelf="center" />
 
-        <Text as="h2" color="gray.400" fontSize="lg" textAlign="center" marginTop={2}>
+        <Text as="h2" fontSize="lg" textAlign="center" marginTop={2}>
           Create an account.
         </Text>
       </Flex>
@@ -180,7 +180,7 @@ export function SignUpForm() {
       <Flex marginTop={8} justifyContent="center">
         <Text color="gray.500">
           Have an account?{' '}
-          <Link href="/login" color="gray.900">
+          <Link href="/login" color="muted">
             Sign In
           </Link>
         </Text>
diff --git a/packages/create-bison-app/template/package.json.ejs b/packages/create-bison-app/template/package.json.ejs
index e1cd1ff..45046e3 100644
--- a/packages/create-bison-app/template/package.json.ejs
+++ b/packages/create-bison-app/template/package.json.ejs
@@ -60,9 +60,8 @@
     "bcryptjs": "^2.4.3",
     "cross-fetch": "3.0.5",
     "framer-motion": "^4",
-    "jsonwebtoken": "^8.5.1",
     "next": "12.1.5",
-    "next-auth": "^4.14.0",
+    "next-auth": "^4.15.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.30.0",
@@ -82,7 +81,6 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/chance": "^1.1.3",
     "@types/jest": "^26.0.6",
-    "@types/jsonwebtoken": "^8.5.9",
     "@types/node": "^16.9.6",
     "@types/pg": "^8.6.1",
     "@types/react": "^18.0.14",
diff --git a/packages/create-bison-app/template/services/auth.ts b/packages/create-bison-app/template/services/auth.ts
index 304a74a..7f6bf6a 100644
--- a/packages/create-bison-app/template/services/auth.ts
+++ b/packages/create-bison-app/template/services/auth.ts
@@ -3,8 +3,6 @@
  */
 
 import * as bcrypt from 'bcryptjs';
-import * as jwt from 'jsonwebtoken';
-import { User } from '@prisma/client';
 
 /**
  * Hashes a password using bcrypt
@@ -22,40 +20,3 @@ export function hashPassword(password: string): string {
 export function comparePasswords(password: string, hashedPassword: string): boolean {
   return bcrypt.compareSync(password, hashedPassword);
 }
-
-const getAppSecret = (): string => {
-  const appSecret = process.env.APP_SECRET;
-
-  if (!appSecret) {
-    throw new Error('APP_SECRET is not set');
-  }
-
-  return appSecret;
-};
-
-/**
- * Signs a JWT for the provided user
- * @param user The user to return a JWT for
- */
-export const appJwtForUser = (user: Partial<User>): string => {
-  return jwt.sign({ userId: user.id }, getAppSecret());
-};
-
-/**
- * Parses and verifies a JWT token from header string
- * @param header The header to verify
- */
-export const verifyAuthHeader = (header?: string): JWT | undefined => {
-  if (!header) return;
-  const token = header.replace('Bearer ', '');
-
-  try {
-    return jwt.verify(token, getAppSecret()) as JWT;
-  } catch (e) {
-    return;
-  }
-};
-
-interface JWT {
-  userId: string;
-}


Test patch:
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index bde8149..39b886e 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: ["ubuntu-latest", "windows-latest"]
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
     outputs:
       appName: ${{ steps.create-app.outputs.appName }}
 
@@ -64,7 +64,7 @@ jobs:
     runs-on: ubuntu-latest
     services:
       postgres:
-        image: postgres:14
+        image: postgres:15
         env:
           POSTGRES_PASSWORD: postgres
         ports: ["5432:5432"]
@@ -72,7 +72,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
 
     steps:
       - name: Download bison app
@@ -86,7 +86,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install bison app packages
-        run: yarn install
+        run: yarn install --immutable
 
       - name: Build production bison app
         run: yarn build
@@ -112,7 +112,6 @@ jobs:
           start: yarn test:server
           wait-on: "http://localhost:3001"
         env:
-          APP_SECRET: foo
           DATABASE_URL: postgresql://postgres:postgres@localhost/${{ needs.create-app.outputs.appName }}_test
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_ENV: test
diff --git a/packages/create-bison-app/template/_.env.test.ejs b/packages/create-bison-app/template/_.env.test.ejs
index bfa7398..f746529 100644
--- a/packages/create-bison-app/template/_.env.test.ejs
+++ b/packages/create-bison-app/template/_.env.test.ejs
@@ -1,3 +1,2 @@
 # ENV vars here override .env when running tests
-DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.test.name %>?schema=public"
-APP_SECRET=foo
+DATABASE_URL="postgresql://<%= db.dev.user %><% if (db.dev.password) { %>:<%= db.dev.password %><% } %>@<%= db.dev.host %>:<%= db.dev.port %>/<%= db.test.name %>?schema=public"
\ No newline at end of file
diff --git a/packages/create-bison-app/test/tasks/copyFiles.test.js b/packages/create-bison-app/test/tasks/copyFiles.test.js
index 7780b6c..1992e9c 100644
--- a/packages/create-bison-app/test/tasks/copyFiles.test.js
+++ b/packages/create-bison-app/test/tasks/copyFiles.test.js
@@ -64,7 +64,7 @@ describe("copyFiles", () => {
     });
 
     it("copies and renames .github", async () => {
-      const files = ["workflows/main.js.yml", "PULL_REQUEST_TEMPLATE.md"];
+      const files = ["workflows/main.yml", "PULL_REQUEST_TEMPLATE.md"];
 
       files.forEach((file) => {
         const filePath = path.join(targetFolder, ".github", file);