updated codegen, added client query generation, etc.

.editorconfig

@@ -0,0 +1,9 @@
+# http://EditorConfig.org
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.example.env

@@ -1,2 +1,5 @@
 VITE_HOST=localhost
 VITE_PORT=4000
+
+ACCESS_TOKEN_SECRET=sometoken1
+REFRESH_TOKEN_SECRET=sometoken2

.opinionatedignore

@@ -0,0 +1,2 @@
+app/client/components/ui
+app/client/assets

app/client/main.tsx

@@ -1,37 +1,36 @@
-import "@client/assets/styles/index.css";
+import '@client/assets/styles/index.css';
-import "@client/assets/styles/nerd-fonts-icons.css";
+import '@client/assets/styles/nerd-fonts-icons.css';
-import { StrictMode } from "react";
+import { StrictMode } from 'react';
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
-import { Provider } from "@client/components/ui/provider";
+import { Provider } from '@client/components/ui/provider';
-import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { RouterProvider, createRouter } from '@tanstack/react-router';
-import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
 // TanStackRouter - Import the generated route tree
-import { routeTree } from "./routeTree.gen";
+import { routeTree } from './routeTree.gen';
 
 // Create a new router instance
 const router = createRouter({ routeTree });
 
 // Register the router instance for type safety
-declare module "@tanstack/react-router" {
+declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router;
   }
 }
 
 // Apollo
-const HOST = import.meta.env.VITE_HOST || "localhost";
+const HOST = import.meta.env.VITE_HOST || 'localhost';
-const PORT = import.meta.env.VITE_PORT || "3000";
+const PORT = import.meta.env.VITE_PORT || '3000';
 const uri = `http://${HOST}:${PORT}/graphql`;
-console.log(uri);
 
 const client = new ApolloClient({
   uri,
   cache: new InMemoryCache(),
-  connectToDevTools: true,
+  connectToDevTools: true
 });
 
-const rootElement = document.getElementById("root")!;
+const rootElement = document.getElementById('root')!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
@@ -41,6 +40,6 @@ if (!rootElement.innerHTML) {
           <RouterProvider router={router} />
         </Provider>
       </ApolloProvider>
-    </StrictMode>,
+    </StrictMode>
   );
 }

app/client/pages/__root.tsx

@@ -1,4 +1,4 @@
-import { Button, HStack, Stack } from "@chakra-ui/react";
+import { Button, Stack } from "@chakra-ui/react";
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
 import React from "react";
 
@@ -17,14 +17,20 @@ const TanStackRouterDevtools =
 export const Route = createRootRoute({
   component: () => (
     <Stack padding={3}>
-      <HStack>
+      <Stack flexDirection={"row"} justifyContent={"space-between"}>
         <Link to="/">
           <Button>Home</Button>
         </Link>
-        <Link to="/about">
+
-          <Button>About</Button>
+        <Stack flexDirection={"row"}>
-        </Link>
+          <Link to="/login">
-      </HStack>
+            <Button>Sign in</Button>
+          </Link>
+          <Link to="/register">
+            <Button>Sign up</Button>
+          </Link>
+        </Stack>
+      </Stack>
       <hr style={{ padding: "4px" }} />
       <Outlet />
       <TanStackRouterDevtools />

app/client/pages/about.lazy.tsx

@@ -1,21 +0,0 @@
-import { Text, Icon, Stack } from "@chakra-ui/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/about")({
-  component: About,
-});
-
-function About() {
-  return (
-    <Stack flexDirection={"row"} alignItems={"center"}>
-      <Text>Hello from About!</Text>
-      <Text>And NerdFonts!</Text>
-      <Icon>
-        <i className="nf nf-fa-heart" />
-      </Icon>
-      <Icon>
-        <i className="nf nf-custom-vim" />
-      </Icon>
-    </Stack>
-  );
-}

app/client/pages/index.tsx

@@ -1,14 +1,16 @@
-import { Text, Stack } from "@chakra-ui/react";
+import { Text, Stack } from '@chakra-ui/react';
-import { createLazyFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router';
 
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery } from '@apollo/client';
 
-export const Route = createLazyFileRoute("/")({
+import { BooksManyQuery } from '@generated/types';
-  component: Index,
+
+export const Route = createFileRoute('/')({
+  component: Index
 });
 
 function Index() {
-  const { data } = useQuery(getBooksQuery);
+  const { data } = useQuery<BooksManyQuery>(getBooksQuery);
 
   return (
     <Stack>

app/client/pages/login.tsx

@@ -0,0 +1,71 @@
+import { gql, useQuery } from '@apollo/client';
+import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Button } from '@client/components/ui/button';
+import { Field } from '@client/components/ui/field';
+import { createFileRoute } from '@tanstack/react-router';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+
+export const Route = createFileRoute('/login')({
+  component: LoginComponent
+});
+
+function LoginComponent() {
+  // const { data } = useQuery(getBooksQuery);
+
+  return (
+    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+      <Heading>Login</Heading>
+      <Login />
+    </Stack>
+  );
+}
+
+interface FormValues {
+  email: string;
+  password: string;
+}
+
+function Login() {
+  const schema = v.pipe(
+    v.object({
+      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
+      password: v.pipe(v.string(), v.nonEmpty('Password is required'))
+    })
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+
+  return (
+    <form onSubmit={handleSubmit(data => alert(data))}>
+      <Stack>
+        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
+          <Input {...register('email')} />
+        </Field>
+        <Field
+          label="Password"
+          invalid={errors.password != null}
+          errorText={errors.password?.message}
+        >
+          <Input {...register('password')} />
+        </Field>
+        <Button type="submit">Sign in</Button>
+      </Stack>
+    </form>
+  );
+}
+
+/* const getBooksQuery = gql`
+  query BooksMany {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`; */

app/client/pages/register.tsx

@@ -0,0 +1,99 @@
+import { gql, useQuery } from '@apollo/client';
+import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Button } from '@client/components/ui/button';
+import { Field } from '@client/components/ui/field';
+import { createFileRoute } from '@tanstack/react-router';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+
+export const Route = createFileRoute('/register')({
+  component: RegisterComponent
+});
+
+function RegisterComponent() {
+  // const { data } = useQuery(getBooksQuery);
+
+  return (
+    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+      <Heading>Sign up</Heading>
+      <Register />
+    </Stack>
+  );
+}
+
+interface FormValues {
+  email: string;
+  username: string;
+  password: string;
+  confirm_password: string;
+}
+
+function Register() {
+  const schema = v.pipe(
+    v.object({
+      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
+      username: v.pipe(v.string(), v.nonEmpty('Username is required')),
+      password: v.pipe(
+        v.string(),
+        v.nonEmpty('Password is required'),
+        v.minLength(8, 'Needs to be at least 8 characters')
+      ),
+      confirm_password: v.pipe(v.string(), v.nonEmpty('Confirm your password'))
+    }),
+    v.forward(
+      v.check(input => input.password === input.confirm_password, 'Passwords do not match'),
+      ['confirm_password']
+    )
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+
+  const onSubmit = handleSubmit(data => console.log(data));
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Stack>
+        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
+          <Input {...register('email')} />
+        </Field>
+        <Field
+          label="Username"
+          invalid={errors.username != null}
+          errorText={errors.username?.message}
+        >
+          <Input {...register('username')} />
+        </Field>
+        <Field
+          label="Password"
+          invalid={errors.password != null}
+          errorText={errors.password?.message}
+        >
+          <Input {...register('password')} />
+        </Field>
+        <Field
+          label="Confirm password"
+          invalid={errors.confirm_password != null}
+          errorText={errors.confirm_password?.message}
+        >
+          <Input {...register('confirm_password')} />
+        </Field>
+        <Button type="submit">Submit</Button>
+      </Stack>
+    </form>
+  );
+}
+
+/* const getBooksQuery = gql`
+  query BooksMany {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`; */

app/client/routeTree.gen.ts

@@ -13,12 +13,13 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './pages/__root'
+import { Route as RegisterImport } from './pages/register'
+import { Route as LoginImport } from './pages/login'
+import { Route as IndexImport } from './pages/index'
 
 // Create Virtual Routes
 
 const BookLazyImport = createFileRoute('/book')()
-const AboutLazyImport = createFileRoute('/about')()
-const IndexLazyImport = createFileRoute('/')()
 
 // Create/Update Routes
 
@@ -28,17 +29,23 @@ const BookLazyRoute = BookLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./pages/book.lazy').then((d) => d.Route))
 
-const AboutLazyRoute = AboutLazyImport.update({
+const RegisterRoute = RegisterImport.update({
-  id: '/about',
+  id: '/register',
-  path: '/about',
+  path: '/register',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./pages/about.lazy').then((d) => d.Route))
+} as any)
 
-const IndexLazyRoute = IndexLazyImport.update({
+const LoginRoute = LoginImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./pages/index.lazy').then((d) => d.Route))
+} as any)
 
 // Populate the FileRoutesByPath interface
 
@@ -48,14 +55,21 @@ declare module '@tanstack/react-router' {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexLazyImport
+      preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/about': {
+    '/login': {
-      id: '/about'
+      id: '/login'
-      path: '/about'
+      path: '/login'
-      fullPath: '/about'
+      fullPath: '/login'
-      preLoaderRoute: typeof AboutLazyImport
+      preLoaderRoute: typeof LoginImport
+      parentRoute: typeof rootRoute
+    }
+    '/register': {
+      id: '/register'
+      path: '/register'
+      fullPath: '/register'
+      preLoaderRoute: typeof RegisterImport
       parentRoute: typeof rootRoute
     }
     '/book': {
@@ -71,42 +85,47 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
-  '/about': typeof AboutLazyRoute
+  '/login': typeof LoginRoute
+  '/register': typeof RegisterRoute
   '/book': typeof BookLazyRoute
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
-  '/about': typeof AboutLazyRoute
+  '/login': typeof LoginRoute
+  '/register': typeof RegisterRoute
   '/book': typeof BookLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
-  '/about': typeof AboutLazyRoute
+  '/login': typeof LoginRoute
+  '/register': typeof RegisterRoute
   '/book': typeof BookLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about' | '/book'
+  fullPaths: '/' | '/login' | '/register' | '/book'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/book'
+  to: '/' | '/login' | '/register' | '/book'
-  id: '__root__' | '/' | '/about' | '/book'
+  id: '__root__' | '/' | '/login' | '/register' | '/book'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
-  IndexLazyRoute: typeof IndexLazyRoute
+  IndexRoute: typeof IndexRoute
-  AboutLazyRoute: typeof AboutLazyRoute
+  LoginRoute: typeof LoginRoute
+  RegisterRoute: typeof RegisterRoute
   BookLazyRoute: typeof BookLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  IndexLazyRoute: IndexLazyRoute,
+  IndexRoute: IndexRoute,
-  AboutLazyRoute: AboutLazyRoute,
+  LoginRoute: LoginRoute,
+  RegisterRoute: RegisterRoute,
   BookLazyRoute: BookLazyRoute,
 }
 
@@ -121,15 +140,19 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/about",
+        "/login",
+        "/register",
         "/book"
       ]
     },
     "/": {
-      "filePath": "index.lazy.tsx"
+      "filePath": "index.tsx"
     },
-    "/about": {
+    "/login": {
-      "filePath": "about.lazy.tsx"
+      "filePath": "login.tsx"
+    },
+    "/register": {
+      "filePath": "register.tsx"
     },
     "/book": {
       "filePath": "book.lazy.tsx"

app/server/graphql/resolvers/auth/login.ts

@@ -0,0 +1,25 @@
+import bcrypt from 'bcrypt';
+
+const usersDB = {
+  users: require('../model/users.json'),
+  setUsers: function (data) {
+    this.users = data;
+  }
+};
+
+const handleLogin = async (req, res) => {
+  const { user, pwd } = req.body;
+  if (!user || !pwd) res.status(400).json({ message: 'Username and password are required.' });
+  const foundUser = usersDB.users.find(person => person.username === user);
+  if (!foundUser) return res.sendStatus(401); // unauthorized
+  // evaluate password
+  const match = await bcrypt.compare(pwd, foundUser.password);
+  if (match) {
+    // create JWTs
+    res.json({ success: `User ${user} is logged in.` });
+  } else {
+    res.sendStatus(401);
+  }
+};
+
+module.exports = { handleLogin };

app/server/graphql/resolvers/auth/register.ts

@@ -0,0 +1,49 @@
+import bcrypt from 'bcrypt';
+
+export async function SignUpResolver(_: any, input: any): Promise<any> {
+  // validate
+
+  // db
+  const users = [
+    {
+      id: '1',
+      email: 'joe@test.com',
+      username: 'Joe',
+      password: 'test'
+    }
+  ];
+  const usersDB = { users };
+
+  // check for duplicate email+username
+
+  // encrypt the password
+  const hashedPwd = await bcrypt.hash(input.pwd, 10);
+
+  // store user in the db, return new user
+
+  return user;
+}
+
+const handleNewUser = async (req, res) => {
+  const { user, pwd } = req.body;
+  if (!user || !pwd)
+    return res.status(400).json({ message: 'Username and password are required.' });
+  // check for duplicate usernames in the db.
+  const duplicate = usersDB.users.find(person => person.username === user);
+  if (duplicate) return res.status(409);
+  try {
+    // encrypt the password
+    const hashedPwd = await brcypt.hash(pwd, 10);
+    // store the new user
+    const newUser = { username: user, password: hashedPwd };
+    usersDB.setUsers([...usersDB.users, newUser]);
+    await fs_promises.writeFile(
+      path.join(__dirname, '..', 'model', 'users.json'),
+      JSON.stringify(usersDB.users)
+    );
+    console.log(usersDB.users);
+    res.status(201).json({ success: `New user ${user} created!` });
+  } catch (err) {
+    res.status(500).json({ message: err.message });
+  }
+};

app/server/graphql/resolvers/bookOneResolver.ts

@@ -1,10 +1,7 @@
 import { BookInput, Book } from "@generated/graphql";
 import { books } from "./booksManyResolver";
 
-export async function BookOneResolver(
+export async function BookOneResolver(_: any, input: BookInput): Promise<Book> {
-  _: any,
-  { ...input }: BookInput,
-): Promise<Book> {
   console.log("Called 'BookOneResolver' resolver...");
 
   const book = books.filter((item) => item.id === input.id)[0];

app/server/main.ts

@@ -14,7 +14,7 @@ import { Query, Mutation, Subscription } from "./graphql/graphql";
 const __dirname = import.meta.dirname;
 const HOST = process.env.VITE_HOST || "localhost";
 const PORT = parseInt(process.env.VITE_PORT || "3000");
-const MOTD = `\n\n\n\x1b[35m-server is listening-\x1b[0m\n\nhttp://${HOST}:${PORT}\nhttp://localhost:${PORT}\n\n\n`;
+const MOTD = `\n\n\n\x1b[35m-server is listening at...-\x1b[0m\n\nhttp://${HOST}:${PORT}\nhttp://localhost:${PORT}\n\n\n`;
 
 const app = express();
 const server = http.createServer(app);
@@ -30,7 +30,11 @@ const resolvers = {
   // Subscription,
 };
 
-const apollo = new ApolloServer({
+interface IdentityContext {
+  authScope?: String;
+}
+
+const apollo = new ApolloServer<IdentityContext>({
   typeDefs,
   resolvers,
   plugins: [ApolloServerPluginDrainHttpServer({ httpServer: server })],
@@ -42,7 +46,16 @@ app.use(
   "/graphql",
   cors<cors.CorsRequest>(),
   express.json(),
-  expressMiddleware(apollo),
+  expressMiddleware(apollo, {
+    context: async ({ req, res }) => {
+      const token = req.headers.authorization || "";
+      // const user = await getUser(token);
+
+      const user = "user";
+
+      return { user };
+    },
+  }),
 );
 
 await new Promise<void>((resolve) =>

codegen.ts

@@ -1,19 +1,25 @@
-import type { CodegenConfig } from "@graphql-codegen/cli";
+import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   overwrite: true,
-  schema: "./app/server/graphql/schema.graphql",
+  schema: './app/server/graphql/schema.graphql',
-  documents: "./app/client/fragments.ts",
+  documents: ['app/client/fragments', 'app/client/**/*.tsx'],
   generates: {
-    "./__generated__/": {
+    './__generated__/': {
-      preset: "client",
+      preset: 'client',
-      plugins: ["typescript", "typescript-resolvers"],
+      presetConfig: {
+        gqlTagName: 'gql'
+      },
+      plugins: ['typescript', 'typescript-resolvers']
     },
-    "./graphql.schema.json": {
+    './__generated__/types.ts': {
-      plugins: ["introspection"],
+      plugins: ['typescript', 'typescript-operations']
     },
+    './graphql.schema.json': {
+      plugins: ['introspection']
+    }
   },
-  ignoreNoDocuments: true,
+  ignoreNoDocuments: true
 };
 
 export default config;

package.json

@@ -7,34 +7,45 @@
     "dev": "nodemon -w app/server -x tsx app/server/main.ts",
     "start": "NODE_ENV=production tsx app/server/main.ts",
     "build": "vite build",
-    "gql-types": "graphql-codegen --config codegen.ts"
+    "gql-types": "graphql-codegen --config codegen.ts",
+    "checkup": "opinionated checkup"
   },
   "dependencies": {
     "@apollo/client": "^3.12.2",
     "@apollo/server": "^4.11.2",
     "@chakra-ui/react": "^3.2.3",
+    "@deftomat/opinionated": "^1.1.3",
     "@emotion/react": "^11.13.5",
+    "@hookform/resolvers": "^3.9.1",
     "@tanstack/react-router": "^1.85.0",
     "@tanstack/router-vite-plugin": "^1.84.4",
     "@types/cors": "^2.8.17",
+    "bcrypt": "^5.1.1",
+    "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "graphql": "^16.9.0",
+    "jsonwebtoken": "^9.0.2",
     "next-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
     "tsx": "^4.3.0",
     "typescript": "^5.3.2",
+    "valibot": "^1.0.0-beta.10",
     "vite-express": "^0.20.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.5.1",
+    "@graphql-codegen/introspection": "4.0.3",
     "@graphql-codegen/typescript": "^4.1.2",
     "@graphql-codegen/typescript-resolvers": "^4.4.1",
     "@tanstack/router-devtools": "^1.85.0",
     "@tanstack/router-plugin": "^1.84.4",
+    "@types/bcrypt": "^5.0.2",
     "@types/express": "^4.17.21",
     "@types/node": "^20.9.3",
     "@types/react": "^18.0.38",
@@ -42,8 +53,8 @@
     "@vitejs/plugin-react": "^4.2.0",
     "nodemon": "^3.0.1",
     "vite": "^5.0.2",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite-tsconfig-paths": "^5.1.4"
-    "@graphql-codegen/introspection": "4.0.3",
+  },
-    "@graphql-codegen/client-preset": "4.5.1"
+  "prettier": "@deftomat/opinionated/configs/prettier.config.mjs"
-  }
 }
+