adding axios and call to backend working with the auth check middleware

packages/api/middleware/auth.ts

@@ -12,17 +12,21 @@ export const authCheck = async (
   res: Response,
   next: NextFunction
 ) => {
-  console.log(req.headers);
+  const { authorization } = req.headers;
+  console.log(authorization);
 
-  // todo get idToken from frontend
-  const ticket = await client.verifyIdToken({
-    idToken: "",
-    audience:
-      "423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com", // Specify the CLIENT_ID of the app that accesses the backend
-  });
-  const userid = ticket.getPayload()?.sub;
+  try {
+    const ticket = await client.verifyIdToken({
+      idToken: authorization ?? "",
+      audience:
+        "423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com", // Specify the CLIENT_ID of the app that accesses the backend
+    });
+    const userid = ticket.getPayload()?.sub;
 
-  console.log(userid);
+    console.log(userid);
 
-  next();
+    next();
+  } catch (error) {
+    res.status(401).send(error);
+  }
 };

packages/api/nodemon.json

@@ -1,6 +1,6 @@
 {
   "ignore": ["**/*.test.ts", "**/*.spec.ts", "node_modules"],
-  "watch": ["src"],
+  "watch": ["./"],
   "exec": "npm start",
   "ext": "ts"
 }

packages/api/routes/user.ts

@@ -1,16 +1,16 @@
 import express, { Application, Request, Response } from "express";
 
+import { authCheck } from "../middleware/auth";
+
 export default function getUserRoutes() {
   const router = express.Router();
 
   // get user details based on id from token
-  router.get("/", getUserDetails);
+  router.get("/", authCheck, getUserDetails);
 
   return router;
 }
 
 async function getUserDetails(req: Request, res: Response) {
-  console.log(req);
-
   res.send({ message: "check" });
 }

packages/desktop/.env.development

@@ -1,2 +1,3 @@
 REACT_APP_GOOGLE_OAUTH_CLIENT_ID=423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com
 REACT_APP_GOOGLE_OAUTH_SECRET=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
+REACT_APP_API_DOMAIN=http://localhost:5000/api

packages/desktop/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
+    "axios": "^0.26.1",
     "electron-store": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/desktop/src/App.tsx

@@ -1,6 +1,13 @@
 import "./App.css";
 
 import { HashRouter, Route, Routes } from "react-router-dom";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "react-query";
 
 import Home from "./pages/Home";
 import Login from "./pages/Login";
@@ -8,19 +15,24 @@ import testConnection from "@nirvana/core";
 
 testConnection();
 
+// Create a client
+const queryClient = new QueryClient();
+
 function App() {
   return (
     <>
-      <HashRouter>
-        <div className="App">
-          <Routes>
-            <Route path="/" element={<Login />} />
-            <Route path="/home" element={<Home />} />
-            {/* <Route exact path="/profile/create" component={Sit} />
+      <QueryClientProvider client={queryClient}>
+        <HashRouter>
+          <div className="App">
+            <Routes>
+              <Route path="/" element={<Login />} />
+              <Route path="/home" element={<Home />} />
+              {/* <Route exact path="/profile/create" component={Sit} />
             <Route exact path="/profile/edit" component={Sit} /> */}
-          </Routes>
-        </div>
-      </HashRouter>
+            </Routes>
+          </div>
+        </HashRouter>
+      </QueryClientProvider>
     </>
   );
 }

packages/desktop/src/controller/index.tsx

@@ -0,0 +1,19 @@
+import { useMutation, useQuery } from "react-query";
+
+import axios from "axios";
+
+export enum Querytypes {
+  GET_USER_DETAILS = "GET_USER_DETAILS",
+}
+
+export const localHost = process.env.REACT_APP_API_DOMAIN;
+
+export function useGetUserDetails() {
+  return useQuery(Querytypes.GET_USER_DETAILS, () =>
+    axios({
+      method: "GET",
+      url: localHost + `/users`,
+      headers: { Authorization: "fake_id_token" },
+    })
+  );
+}

packages/desktop/src/pages/Login/index.tsx

@@ -1,8 +1,10 @@
 import { Button, CircularProgress } from "@mui/material";
+import { localHost, useGetUserDetails } from "../../controller";
 import { useEffect, useState } from "react";
 
 import Logo from "../../components/Logo";
 import { UserInfo } from "@nirvana/core/models";
+import axios from "axios";
 import { channels } from "../../shared/constants";
 import { useNavigate } from "react-router-dom";
 
@@ -15,20 +17,31 @@ export default function Login() {
   };
 
   useEffect(() => {
-    window.API.receive(channels.AUTH_TOKENS, async (accessToken: string) => {
-      console.log(accessToken);
+    window.API.receive(channels.AUTH_TOKENS, async (tokens: any) => {
+      console.log(tokens);
+
+      const { access_token, id_token, refresh_token } = tokens;
 
       // get user info from access token
       const userInfo: UserInfo = await (
         await fetch(
-          `https://www.googleapis.com/oauth2/v1/userinfo?access_token=${accessToken}`
+          `https://www.googleapis.com/oauth2/v1/userinfo?access_token=${access_token}`
         )
       ).json();
 
       console.log("user data: ");
       console.log(userInfo);
 
-      // if user is a user, then continue to next route
+      // if user is an existing user, then continue to next route
+      axios({
+        method: "GET",
+        url: localHost + `/user`,
+        headers: {
+          Authorization:
+            "eyJhbGciOiJSUzI1NiIsImtpZCI6ImQ2M2RiZTczYWFkODhjODU0ZGUwZDhkNmMwMTRjMzZkYzI1YzQyOTIiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiI0MjM1MzMyNDQ5NTMtYmFubGlnb2JnYm9mOGhnODlpNmNyMWw3dTBwN2MycGsuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiI0MjM1MzMyNDQ5NTMtYmFubGlnb2JnYm9mOGhnODlpNmNyMWw3dTBwN2MycGsuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMTM0NzA3ODY2OTAzNTMxMDkwODYiLCJlbWFpbCI6InBhdGVsLmFyanVuNTBAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF0X2hhc2giOiJKRlBBOC15TGgxeGlGOW5acUZQU0FBIiwibmFtZSI6IkFyanVuIFBhdGVsIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdqbTI5U2QxV25tOE52WmJYa29zdmY2U29JRDZrQlA1T0hSTFZJT0JRPXM5Ni1jIiwiZ2l2ZW5fbmFtZSI6IkFyanVuIiwiZmFtaWx5X25hbWUiOiJQYXRlbCIsImxvY2FsZSI6ImVuIiwiaWF0IjoxNjQ3Mzc4MzgzLCJleHAiOjE2NDczODE5ODN9.llIYMEjq3Ye1UFxiKIsgtjnRho2Ad7dQjCSFVDDlsiH3AVq_MssoKTXMS0tuHpQAZAfyqbi1kRpp4Ax3mFJb44z2OIyzOTDzhcNB_L_3C8U3gRuSmUaVfBa7EdkobkxByee3ddvjekD7Y9dobtXs3IllldjewD9Eg9FZmEkuSN6yYVxxRLYNYTjk_BAA17QKKkPPpyanAHHXLwxpMFhQc34tuAYCYmmDQQijV8YVvU4r9ruPpysumVXlUmX3CuNg9P415Dq1lUHQxaf5hWf_6RxIsw9PNg1wZ8CuJGvmLFnGBRQACKgnAkI9E7-tu2tWe3glRhORZlQmgRCKqG5xoA",
+        },
+      }).then((res) => console.log(res));
+
       navigate("/home");
 
       // if user is not an existing user, then show create account page

yarn.lock

@@ -3276,6 +3276,13 @@ axios@^0.25.0:
   dependencies:
     follow-redirects "^1.14.7"
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5864,7 +5871,7 @@ flora-colossus@^1.0.0:
     debug "^4.1.1"
     fs-extra "^7.0.0"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.7:
+follow-redirects@^1.0.0, follow-redirects@^1.14.7, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==