diff --git a/client/package.json b/client/package.json index 748e19a..d71cd2e 100644 --- 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", diff --git a/client/src/App.tsx b/client/src/App.tsx index deb4e0d..5b8ad65 100644 --- 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 ( - - - - - } - unauthenticatedContent={} - /> - - - + + + + + + } + unauthenticatedContent={} + /> + + + + ); } diff --git a/client/src/providers/AuthProvider.tsx b/client/src/providers/AuthProvider.tsx index c3c8c8b..50b776e 100644 --- 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(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((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( + (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(() => { apiClient("users/sign_out", { method: "DELETE", }).then(() => { - setToken(null); + removeToken(); }); }, [apiClient, setToken]); diff --git a/client/yarn.lock b/client/yarn.lock index 9b0dc44..4cfc0ca 100644 --- 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"