Follow digial ocean guide for tokens

frontend/package.json

@@ -9,6 +9,7 @@
     "pocketbase": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -1,9 +1,25 @@
+import React, { useState } from "react";
 import "./App.css";
 import Auth from "./auth/pocketbase";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Dashboard from "./Dashboard/Dashboard";
+import Preferences from "./Preferences/Preferences";
 function App() {
+  const [token, setToken] = useState();
+  console.log(token);
+  if (!token) {
+    return <Auth setToken={setToken} />;
+  }
   return (
-    <div className="App">
-      <Auth />
+    <div className="wrapper">
+      <h1>Application</h1>
+      <BrowserRouter>
+        <Routes>
+          {/* <Route path="/" element={<App />} /> */}
+          <Route path="dashboard" element={<Dashboard />} />
+          <Route path="preferences" element={<Preferences />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

frontend/src/Dashboard/Dashboard.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Dashboard() {
+  return <h2>Dashboard</h2>;
+}

frontend/src/Preferences/Preferences.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Preferences() {
+  return <h2>Preferences</h2>;
+}

frontend/src/auth/pocketbase.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import PocketBase from "pocketbase";
-
+import PropTypes from "prop-types";
 // const client = new PocketBase("http://localhost:8090");
 
 // const userData = client.Users.authViaEmail("[email protected]", "12345678");
 // console.log(userData);
 
-export default function Auth() {
+export default function Auth({ setToken }) {
   const [username, setUserName] = useState();
   const [password, setPassword] = useState();
 
@@ -15,6 +15,7 @@ export default function Auth() {
     e.preventDefault();
     const userData = await client.Users.authViaEmail(username, password);
     console.log(userData);
+    setToken(userData.token);
   };
   return (
     <div className="login-wrapper">
@@ -38,3 +39,7 @@ export default function Auth() {
     </div>
   );
 }
+
+Auth.propTypes = {
+  setToken: PropTypes.func.isRequired,
+};