diff --git a/client/components/auth/index.tsx b/client/components/auth/index.tsx index 0ab50213..c173ea64 100644 --- a/client/components/auth/index.tsx +++ b/client/components/auth/index.tsx @@ -3,6 +3,7 @@ import { Button, Input, Text, useToasts, Note } from '@geist-ui/core' import styles from './auth.module.css' import { useRouter } from 'next/router' import Link from '../Link' +import Cookies from "js-cookie"; const NO_EMPTY_SPACE_REGEX = /^\S*$/; const ERROR_MESSAGE = "Provide a non empty username and a password with at least 6 characters"; @@ -19,8 +20,9 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => { const signingIn = page === 'signin' const handleJson = (json: any) => { - localStorage.setItem('drift-token', json.token) - localStorage.setItem('drift-userid', json.userId) + Cookies.set('drift-token', json.token); + Cookies.set('drift-userid', json.userId); + router.push('/') } diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index ca03fdb0..e5a69135 100644 --- a/client/components/header/index.tsx +++ b/client/components/header/index.tsx @@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from "react"; import styles from './header.module.css'; import { useRouter } from "next/router"; import useSignedIn from "../../lib/hooks/use-signed-in"; +import Cookies from 'js-cookie' type Tab = { name: string @@ -77,7 +78,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => { // 'Content-Type': 'application/json' // }, // body: JSON.stringify({ - // token: localStorage.getItem("drift-token") + // token: Cookies.get("drift-token") // }) // }) diff --git a/client/components/my-posts/index.tsx b/client/components/my-posts/index.tsx index c3394f2c..15ea5892 100644 --- a/client/components/my-posts/index.tsx +++ b/client/components/my-posts/index.tsx @@ -1,10 +1,11 @@ import useSWR from "swr" import PostList from "../post-list" +import Cookies from "js-cookie" const fetcher = (url: string) => fetch(url, { headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem("drift-token")}` + 'Authorization': `Bearer ${Cookies.get("drift-token")}` }, }).then(r => r.json()) diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx index 203839c9..12c8a30b 100644 --- a/client/components/new-post/index.tsx +++ b/client/components/new-post/index.tsx @@ -6,6 +6,7 @@ import Document from '../document'; import FileDropzone from './drag-and-drop'; import styles from './post.module.css' import Title from './title'; +import Cookies from 'js-cookie' export type Document = { title: string @@ -35,13 +36,13 @@ const Post = () => { method: 'POST', headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem("drift-token")}` + 'Authorization': `Bearer ${Cookies.get("drift-token")}` }, body: JSON.stringify({ title, files: docs, visibility, - userId: localStorage.getItem("drift-userid"), + userId: Cookies.get("drift-userid"), }) }) diff --git a/client/lib/hooks/use-signed-in.ts b/client/lib/hooks/use-signed-in.ts index e1ec3c45..2ad7f7cf 100644 --- a/client/lib/hooks/use-signed-in.ts +++ b/client/lib/hooks/use-signed-in.ts @@ -1,6 +1,7 @@ import { useRouter } from "next/router"; import { useCallback, useEffect } from "react" import useSharedState from "./use-shared-state"; +import Cookies from 'js-cookie' const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: boolean }) => { const [isSignedIn, setSignedIn] = useSharedState('isSignedIn', false) @@ -14,7 +15,7 @@ const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: bo useEffect(() => { async function checkToken() { - const token = localStorage.getItem('drift-token') + const token = Cookies.get('drift-token') if (token) { const response = await fetch('/server-api/auth/verify-token', { method: 'GET', diff --git a/client/package.json b/client/package.json index 908d2541..59fa0b18 100644 --- a/client/package.json +++ b/client/package.json @@ -12,9 +12,11 @@ "@fec/remark-a11y-emoji": "^3.1.0", "@geist-ui/core": "^2.3.5", "@geist-ui/icons": "^1.0.1", + "@types/js-cookie": "^3.0.1", "client-zip": "^2.0.0", "comlink": "^4.3.1", "dotenv": "^16.0.0", + "js-cookie": "^3.0.1", "next": "12.1.0", "prismjs": "^1.27.0", "react": "17.0.2", diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index b5bce189..115b69fb 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -10,6 +10,7 @@ import { ThemeProps } from "../_app"; import PageSeo from "components/page-seo"; import Head from "next/head"; import styles from './styles.module.css'; +import Cookies from "js-cookie"; const Post = ({ theme, changeTheme }: ThemeProps) => { const [post, setPost] = useState() @@ -25,7 +26,7 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { method: "GET", headers: { "Content-Type": "application/json", - "Authorization": `Bearer ${localStorage.getItem("drift-token")}` + "Authorization": `Bearer ${Cookies.get("drift-token")}` } }) diff --git a/client/yarn.lock b/client/yarn.lock index 2e6de2cf..28d7f557 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -175,6 +175,11 @@ dependencies: "@types/unist" "*" +"@types/js-cookie@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.1.tgz#04aa743e2e0a85a22ee9aa61f6591a8bc19b5d68" + integrity sha512-7wg/8gfHltklehP+oyJnZrz9XBuX5ZPP4zB6UsI84utdlkRYLnOm2HfpLXazTwZA+fpGn0ir8tGNgVnMEleBGQ== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -1400,6 +1405,11 @@ isexe@^2.0.0: resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= +js-cookie@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414" + integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw== + "js-tokens@^3.0.0 || ^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"