Create a UUID for unauth users when they visit /new

This snippet adds a dependency on the `uuid` module, then uses it to create a UUID for unauth users that gets stored in an otherwise empty `account` cookie. We update _app to account for this change.
This commit is contained in:
Justin Edmund 2023-01-31 00:19:50 -08:00
parent d32293995b
commit 01b9787fb8
4 changed files with 48 additions and 2 deletions

27
package-lock.json generated
View file

@ -45,6 +45,7 @@
"sanitize-html": "^2.8.1",
"sass": "^1.49.0",
"usehooks-ts": "^2.9.1",
"uuid": "^9.0.0",
"valtio": "^1.3.0",
"youtube-api-v3-wrapper": "^2.3.0"
},
@ -59,6 +60,7 @@
"@types/react-linkify": "^1.0.1",
"@types/react-scroll": "^1.8.3",
"@types/sanitize-html": "^2.8.0",
"@types/uuid": "^9.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-plugin-valtio": "^0.4.1",
@ -3154,6 +3156,12 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
"dev": true
},
"node_modules/@typescript-eslint/parser": {
"version": "5.47.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.47.1.tgz",
@ -7309,6 +7317,14 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -9576,6 +9592,12 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
"dev": true
},
"@typescript-eslint/parser": {
"version": "5.47.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.47.1.tgz",
@ -12507,6 +12529,11 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
},
"v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

View file

@ -50,6 +50,7 @@
"sanitize-html": "^2.8.1",
"sass": "^1.49.0",
"usehooks-ts": "^2.9.1",
"uuid": "^9.0.0",
"valtio": "^1.3.0",
"youtube-api-v3-wrapper": "^2.3.0"
},
@ -64,6 +65,7 @@
"@types/react-linkify": "^1.0.1",
"@types/react-scroll": "^1.8.3",
"@types/sanitize-html": "^2.8.0",
"@types/uuid": "^9.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-plugin-valtio": "^0.4.1",

View file

@ -23,9 +23,8 @@ function MyApp({ Component, pageProps }: AppProps) {
}
useEffect(() => {
if (accountCookie) {
setHeaders()
if (cookieData.account && cookieData.account.token) {
console.log(`Logged in as user "${cookieData.account.username}"`)
accountState.account.authorized = true

View file

@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { v4 as uuidv4 } from 'uuid'
import clonedeep from 'lodash.clonedeep'
import ErrorSection from '~components/ErrorSection'
@ -18,6 +19,7 @@ import type { AxiosError } from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { PageContextObj, ResponseStatus } from '~types'
import { GridType } from '~utils/enums'
import { setCookie } from 'cookies-next'
interface Props {
context?: PageContextObj
@ -122,6 +124,22 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
// Set headers for API calls
setHeaders(req, res)
// If there is no account entry in cookies, create a UUID and store it
if (!accountCookie(req, res)) {
const uuid = uuidv4()
const expiresAt = new Date()
expiresAt.setDate(expiresAt.getDate() + 60)
const cookieObj = {
userId: uuid,
username: undefined,
token: undefined,
}
const options = req && res ? { req, res } : {}
setCookie('account', cookieObj, { path: '/', expires: expiresAt, ...options })
}
// Fetch latest version
const version = await fetchLatestVersion()