Add user hocs and update link path

Author: cihat

.gitignore

@@ -36,4 +36,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 
-storybook-static
+storybook-static
+
+.env

components/Landing/_heroes/AnimationHero.tsx

@@ -1,11 +1,10 @@
-import { NextPage } from 'next';
 import React from 'react';
 import Lottie from 'react-lottie';
 import animationData from '../../../public/lotties/hello-bonjour-hola-guten-tag.json';
 import { Box, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 
-const AnimationHero: NextPage = (props: ReactNode) => {
+const AnimationHero = (props: ReactNode) => {
   const defaultOptions = {
     loop: true,
     autoplay: true,
@@ -61,6 +60,7 @@ const AnimationHero: NextPage = (props: ReactNode) => {
         ipsum dolor sit amet consectetur adipisicing elit. In, officia!
       </Typography>
       <Box mt={20} mb={20} mr={0} ml={0}>
+        {/* @ts-ignore */}
         <Lottie options={defaultOptions} height={400} width={400} />
       </Box>
     </Box>

components/Landing/_heroes/CTAWithIllustration.tsx

@@ -40,6 +40,8 @@ export default function CallToActionWithIllustration() {
         </Text>
         <Stack spacing={6} direction={'row'}>
           <Button
+            as={'a'}
+            href={'/login'}
             rounded={'full'}
             px={6}
             colorScheme={'orange'}

components/Landing/_heroes/LandingHero.tsx

@@ -3,7 +3,7 @@ import { NextPage } from 'next';
 import Image from 'next/image';
 import React from 'react';
 
-const LandingHero: NextPage = () => {
+const LandingHero = () => {
   return (
     <Box
       padding={'0px'}

components/Landing/index.tsx

@@ -1,7 +1,7 @@
 import { NextPage } from 'next';
 import React from 'react';
 import Image from 'next/image';
-import { Box, Container, Grid, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import LandingHero from './_heroes/LandingHero';
 import AnimationHero from './_heroes/AnimationHero';
 import CallToActionWithIllustration from './_heroes/CTAWithIllustration';
@@ -11,7 +11,7 @@ import SplitScreenWithImage from './_heroes/SplitScreenWithImage';
 import WithBackgroundImageAndGradient from './_heroes/WithBackgroundImageAndGradient';
 import SimpleThreeColumnGrid from './_heroes/SimpleThreeColumnGrid';
 
-const Landing: NextPage = () => {
+const Landing = () => {
   return (
     <Box>
       <CallToActionWithIllustration />

constants/index.ts

@@ -0,0 +1,22 @@
+import React, { createContext, FunctionComponent, useContext } from 'react';
+import { User } from 'utils/authorization';
+
+const UserProviderContext = createContext({
+  user: null as User | null,
+});
+
+export const useUserProvider = () => useContext(UserProviderContext);
+
+export const UserProvider: FunctionComponent<{
+  user: User | null;
+}> = ({ children, user }) => {
+  return (
+    <UserProviderContext.Provider
+      value={{
+        user: user || null,
+      }}
+    >
+      {children}
+    </UserProviderContext.Provider>
+  );
+};

hocs/users-provider/index.tsx

@@ -22,6 +22,7 @@
     "@mui/material": "^5.8.4",
     "@reduxjs/toolkit": "^1.8.4",
     "framer-motion": "^5.6.0",
+    "jsonwebtoken": "^8.5.1",
     "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -38,6 +39,7 @@
     "@storybook/builder-webpack5": "^6.4.13",
     "@storybook/manager-webpack5": "^6.4.13",
     "@storybook/react": "^6.4.13",
+    "@types/jsonwebtoken": "^8.5.8",
     "@types/node": "17.0.8",
     "@types/react": "17.0.30",
     "@types/react-dom": "^18.0.6",

package.json

@@ -0,0 +1,59 @@
+import { IncomingMessage } from "http";
+import jwt from "jsonwebtoken";
+import { NextApiRequest } from "next";
+import { NextApiRequestCookies } from "next/dist/server/api-utils";
+
+export type User = {
+  id: string;
+  name: string;
+  email: string;
+  surname: string;
+  role: string;
+}
+
+export type MaybeAuthorized = {
+  user: User | null;
+}
+
+export type Authorized = {
+  registeredUser: User;
+}
+
+export async function authorize(cookies: { [key: string]: string }): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const authToken = cookies.auth_token;
+    if (!authToken) return reject(new Error("No auth token"));
+    
+    jwt.verify(
+      authToken,
+      process.env.JWT_SECRET as string,
+      (err: any, decoded: any) => {
+        if (err) return reject(new Error("Invalid auth token"));
+        
+        resolve(decoded)
+      }
+    )
+  })
+}
+
+export type AuthorizationResult = {
+  authorized: boolean;
+  user: User | null;
+}
+
+export async function checkAuthorization(
+  req: NextApiRequest | (IncomingMessage & { cookies: NextApiRequestCookies })
+): Promise<AuthorizationResult> {
+  try {
+    const decoded = await authorize(req.cookies);
+    return {
+      authorized: true,
+      user: decoded as User
+    }
+  } catch (e) {
+    return {
+      authorized: false,
+      user: null
+    }
+  }
+}

utils/authorization.ts

@@ -3398,6 +3398,13 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity "sha1-7ihweulOEdK4J7y+UnC86n8+ce4= sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
 
+"@types/jsonwebtoken@^8.5.8":
+  version "8.5.8"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-8.5.8.tgz#01b39711eb844777b7af1d1f2b4cf22fda1c0c44"
+  integrity sha512-zm6xBQpFDIDM6o9r6HSgDeIcLy82TKWctCXEPbJJcXb5AKmi5BNNdLXneixK4lplX3PqIVcwLBCGE/kAGnlD4A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/[email protected]":
   version "4.6.6"
   resolved "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz"
@@ -4674,6 +4681,11 @@ [email protected]:
   dependencies:
     node-int64 "^0.4.0"
 
+[email protected]:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
@@ -5706,6 +5718,13 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+[email protected]:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
@@ -7922,6 +7941,22 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonwebtoken@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
+  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^5.6.0"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz"
@@ -7935,6 +7970,23 @@ junk@^3.1.0:
   resolved "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz"
   integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
 
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
@@ -8101,6 +8153,36 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
   integrity "sha1-gteb/zCmfEAF/9XiUVMArZyk168= sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
 
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -8111,6 +8193,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
 
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
+
 [email protected]:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"