store token and userid in a Cookie

client/components/auth/index.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Input, Text } 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 Auth = ({ page }: { page: "signup" | "signin" }) => {
     const router = useRouter();
@@ -18,8 +19,9 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
     const handleJson = (json: any) => {
         if (json.error) return setError(json.error.message)
 
-        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('/')
     }
 

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")
                         //     })
                         // })
 

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())
 

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"),
             })
         })
 

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',

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",

client/pages/post/[id].tsx

@@ -8,6 +8,7 @@ import Header from "../../components/header";
 import VisibilityBadge from "../../components/visibility-badge";
 import { ThemeProps } from "../_app";
 import PageSeo from "components/page-seo";
+import Cookies from "js-cookie";
 
 const Post = ({ theme, changeTheme }: ThemeProps) => {
     const [post, setPost] = useState<any>()
@@ -23,7 +24,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")}`
                     }
                 })
 

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"