presist user session

2022-07-09 19:18:07 -03:00
parent 2f4607143d
commit 525ed04a71
4 changed files with 75 additions and 25 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.33.1",
    "react-scripts": "5.0.1",
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -11,20 +11,23 @@ import "./index.css";
 import { LoginDialog } from "./components/LoginDialog";
 import { UnautorizedBlock } from "./components/UnautorizedBlock";
 import { NewAccount } from "./pages/NewAccount/NewAccount";
+import { CookiesProvider } from "react-cookie";

 function App() {
  return (
-    <AuthProvider>
-      <Topbar />
-      <LoginDialog />
-      <Container>
-        <UnautorizedBlock
-          protectedContent={<Home />}
-          unauthenticatedContent={<NewAccount />}
-        />
-        <Home />
-      </Container>
-    </AuthProvider>
+    <CookiesProvider>
+      <AuthProvider>
+        <Topbar />
+        <LoginDialog />
+        <Container>
+          <UnautorizedBlock
+            protectedContent={<Home />}
+            unauthenticatedContent={<NewAccount />}
+          />
+          <Home />
+        </Container>
+      </AuthProvider>
+    </CookiesProvider>
  );
 }

--- a/client/src/providers/AuthProvider.tsx
+++ b/client/src/providers/AuthProvider.tsx
@@ -1,4 +1,5 @@
 import { createContext, useCallback, useMemo, useState } from "react";
+import { useCookies } from "react-cookie";
 import { createApiClient } from "../utils/apiFetch";

 type LoginCallback = (email: string, password: string) => void;
@@ -21,28 +22,38 @@ type AuthProviderProps = {
 };

 export const AuthProvider = ({ children, ...rest }: AuthProviderProps) => {
+  const [cookies, setCookie, removeCookie] = useCookies(["token"]);
  const [loading] = useState(true);
-  const [token, setToken] = useState<AuthProviderValue["token"]>(null);
  const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false);
+  const token = cookies.token;
+  const setToken = (value: string) => {
+    setCookie("token", value);
+  };
+  const removeToken = () => {
+    removeCookie("token");
+  };
  const apiClient = createApiClient(token ?? "");

-  const login = useCallback<LoginCallback>((email, password) => {
-    apiClient("users/sign_in", {
-      method: "POST",
-      body: JSON.stringify({
-        email,
-        password,
-      }),
-    }).then(async (res) => {
-      setToken(await res.json());
-    });
-  }, [apiClient, setToken]);
+  const login = useCallback<LoginCallback>(
+    (email, password) => {
+      apiClient("users/sign_in", {
+        method: "POST",
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      }).then(async (res) => {
+        setToken(await res.json());
+      });
+    },
+    [apiClient, setToken]
+  );

  const logout = useCallback<LogoutCallback>(() => {
    apiClient("users/sign_out", {
      method: "DELETE",
    }).then(() => {
-      setToken(null);
+      removeToken();
    });
  }, [apiClient, setToken]);

--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2072,6 +2072,11 @@
  dependencies:
    "@types/node" "*"

+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/eslint-scope@^3.7.3":
  version "3.7.4"
  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -2129,6 +2134,14 @@
  dependencies:
    "@types/node" "*"

+"@types/hoist-non-react-statics@^3.0.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -3448,6 +3461,11 @@ cookie@0.5.0:
  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==

+cookie@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
 core-js-compat@^3.21.0, core-js-compat@^3.22.1:
  version "3.23.3"
  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.3.tgz#7d8503185be76bb6d8d592c291a4457a8e440aa9"
@@ -4938,7 +4956,7 @@ he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7500,6 +7518,15 @@ react-app-polyfill@^3.0.0:
    regenerator-runtime "^0.13.9"
    whatwg-fetch "^3.6.2"

+react-cookie@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-4.1.1.tgz#832e134ad720e0de3e03deaceaab179c4061a19d"
+  integrity sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.0.1"
+    hoist-non-react-statics "^3.0.0"
+    universal-cookie "^4.0.0"
+
 react-dev-utils@^12.0.1:
  version "12.0.1"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -8739,6 +8766,14 @@ unique-string@^2.0.0:
  dependencies:
    crypto-random-string "^2.0.0"

+universal-cookie@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+  integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 universalify@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"