feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

utils/ajv.ts

@@ -0,0 +1,26 @@
+import Ajv from 'ajv'
+import addFormats from 'ajv-formats'
+
+export const ajv = addFormats(
+  new Ajv({
+    allErrors: true
+  }),
+  [
+    'date-time',
+    'time',
+    'date',
+    'email',
+    'hostname',
+    'ipv4',
+    'ipv6',
+    'uri',
+    'uri-reference',
+    'uuid',
+    'uri-template',
+    'json-pointer',
+    'relative-json-pointer',
+    'regex'
+  ]
+)
+  .addKeyword('kind')
+  .addKeyword('modifier')

utils/api.ts

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export const API_VERSION = '1.0.0'
+
+export const API_URL =
+  process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8080'
+
+export const api = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})

utils/authentication/Authentication.ts

@@ -0,0 +1,105 @@
+import axios, { AxiosInstance } from 'axios'
+import { io, Socket } from 'socket.io-client'
+
+import { API_URL } from 'utils/api'
+import { cookies } from 'utils/cookies'
+import { Tokens } from './'
+import { fetchRefreshToken } from './authenticationFromServerSide'
+
+export class Authentication {
+  public tokens: Tokens
+  public accessTokenAge: number
+  public socket: Socket
+  public api: AxiosInstance
+
+  constructor(tokens: Tokens) {
+    this.tokens = tokens
+    this.accessTokenAge = Date.now()
+    this.socket = io(API_URL, {
+      auth: { token: `Bearer ${tokens.accessToken}` }
+    })
+    this.socket.on('connect_error', (error) => {
+      if (error.message.startsWith('Unauthorized')) {
+        fetchRefreshToken(this.tokens.refreshToken)
+          .then(({ accessToken }) => {
+            this.setAccessToken(accessToken)
+          })
+          .catch(async () => {
+            this.signout()
+            return await Promise.reject(error)
+          })
+      }
+    })
+    this.api = axios.create({
+      baseURL: API_URL,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    this.api.interceptors.request.use(
+      async (config) => {
+        const isValidAccessToken =
+          this.accessTokenAge + tokens.expiresIn > Date.now()
+        if (!isValidAccessToken) {
+          const { accessToken } = await fetchRefreshToken(
+            this.tokens.refreshToken
+          )
+          this.setAccessToken(accessToken)
+        }
+        config.headers.Authorization = `${this.tokens.type} ${this.tokens.accessToken}`
+        return config
+      },
+      async (error) => {
+        this.signout()
+        return await Promise.reject(error)
+      }
+    )
+    this.api.interceptors.response.use(
+      (response) => {
+        return response
+      },
+      async (error) => {
+        if (error.response.status !== 403 || (error.config._retry as boolean)) {
+          return await Promise.reject(error)
+        }
+        error.config._retry = true
+        try {
+          const { accessToken } = await fetchRefreshToken(
+            this.tokens.refreshToken
+          )
+          this.setAccessToken(accessToken)
+          error.response.config.headers.Authorization = `${this.tokens.type} ${this.tokens.accessToken}`
+          return await this.api.request(error.response.config)
+        } catch {
+          this.signout()
+          return await Promise.reject(error)
+        }
+      }
+    )
+  }
+
+  public setAccessToken(accessToken: string): void {
+    this.tokens.accessToken = accessToken
+    this.accessTokenAge = Date.now()
+    const token = `${this.tokens.type} ${this.tokens.accessToken}`
+    if (typeof this.socket.auth !== 'function') {
+      this.socket.auth.token = token
+    }
+  }
+
+  public signout(): void {
+    cookies.remove('refreshToken')
+    window.location.href = '/authentication/signin'
+  }
+
+  public async signoutServerSide(): Promise<void> {
+    await this.api.post('/users/signout', {
+      refreshToken: this.tokens.refreshToken
+    })
+    this.signout()
+  }
+
+  public signin(): void {
+    cookies.set('refreshToken', this.tokens.refreshToken)
+  }
+}

utils/authentication/AuthenticationContext.tsx

@@ -0,0 +1,54 @@
+import { createContext, useState, useEffect, useMemo, useContext } from 'react'
+import useTranslation from 'next-translate/useTranslation'
+import setLanguage from 'next-translate/setLanguage'
+
+import { Authentication, PagePropsWithAuthentication } from './'
+import { useTheme } from 'next-themes'
+import { UserCurrent } from 'models/User'
+
+export interface AuthenticationValue {
+  authentication: Authentication
+  user: UserCurrent
+}
+
+const defaultAnthenticationContext: AuthenticationValue = {} as any
+const AuthenticationContext = createContext<AuthenticationValue>(
+  defaultAnthenticationContext
+)
+
+export const AuthenticationProvider: React.FC<PagePropsWithAuthentication> = (
+  props
+) => {
+  const { lang } = useTranslation()
+  const { theme, setTheme } = useTheme()
+  const [user] = useState<UserCurrent>(props.authentication.user)
+
+  const authentication = useMemo(() => {
+    return new Authentication(props.authentication.tokens)
+  }, [props.authentication.tokens])
+
+  useEffect(() => {
+    setLanguage(user.settings.language).catch(() => {})
+    setTheme(user.settings.theme)
+  }, [setTheme, user.settings.language, user.settings.theme])
+
+  useEffect(() => {
+    authentication.api.put('/users/current/settings', { theme }).catch(() => {})
+  }, [theme, authentication.api])
+
+  useEffect(() => {
+    authentication.api
+      .put('/users/current/settings', { language: lang })
+      .catch(() => {})
+  }, [lang, authentication.api])
+
+  return (
+    <AuthenticationContext.Provider value={{ authentication, user }}>
+      {props.children}
+    </AuthenticationContext.Provider>
+  )
+}
+
+export const useAuthentication = (): AuthenticationValue => {
+  return useContext(AuthenticationContext)
+}

utils/authentication/authenticationFromServerSide.ts

@@ -0,0 +1,88 @@
+import { AxiosInstance } from 'axios'
+import { GetServerSideProps, GetServerSidePropsContext, Redirect } from 'next'
+
+import { api } from 'utils/api'
+import { Cookies } from 'utils/cookies'
+import { RefreshTokenResponse, Tokens } from './index'
+import { Authentication } from './Authentication'
+
+export const fetchRefreshToken = async (
+  refreshToken: string
+): Promise<Tokens> => {
+  const { data } = await api.post<RefreshTokenResponse>(
+    '/users/refresh-token',
+    {
+      refreshToken
+    }
+  )
+  return { ...data, refreshToken }
+}
+
+interface AuthenticationFromServerSideOptions {
+  shouldBeAuthenticated: boolean
+
+  /** allows to fetch data server side with the authenticated user, the callback should returns the data that will be transfer to the component as props */
+  fetchData?: (
+    context: GetServerSidePropsContext,
+    api?: AxiosInstance
+  ) => Promise<{ [key: string]: any }>
+}
+
+export const authenticationFromServerSide = (
+  options: AuthenticationFromServerSideOptions
+): GetServerSideProps => {
+  const { shouldBeAuthenticated, fetchData } = options
+
+  return async (context) => {
+    const cookies = new Cookies(context.req.headers.cookie)
+    const refreshToken = cookies.get('refreshToken')
+    let tokens: Tokens | null = null
+    if (refreshToken != null) {
+      try {
+        tokens = await fetchRefreshToken(refreshToken)
+      } catch {
+        cookies.remove('refreshToken')
+      }
+    }
+    if (!shouldBeAuthenticated) {
+      if (tokens != null) {
+        return {
+          redirect: {
+            destination: '/application',
+            permanent: false
+          }
+        }
+      } else {
+        let data = {}
+        if (fetchData != null) {
+          data = await fetchData(context)
+        }
+        return { props: { ...data } }
+      }
+    } else {
+      if (tokens == null) {
+        return {
+          redirect: {
+            destination: '/authentication/signin',
+            permanent: false
+          }
+        }
+      } else {
+        let data: Redirect | any = {}
+        const authentication = new Authentication(tokens)
+        const { data: currentUser } = await authentication.api.get(
+          '/users/current'
+        )
+        if (fetchData != null) {
+          data = await fetchData(context, authentication.api)
+        }
+        if (data.redirect != null) {
+          return data
+        }
+        return {
+          props: { authentication: { tokens, ...currentUser }, ...data }
+        }
+      }
+    }
+  }
+}

utils/authentication/index.ts

@@ -0,0 +1,24 @@
+import { UserCurrent } from 'models/User'
+
+export interface RefreshTokenResponse {
+  accessToken: string
+
+  /** how long, in milliseconds, until the accessToken expires */
+  expiresIn: number
+  type: 'Bearer'
+}
+
+export interface Tokens extends RefreshTokenResponse {
+  refreshToken: string
+}
+
+export interface PagePropsWithAuthentication {
+  authentication: {
+    tokens: Tokens
+    user: UserCurrent
+  }
+}
+
+export * from './Authentication'
+export * from './authenticationFromServerSide'
+export * from './AuthenticationContext'

utils/cookies.ts

@@ -0,0 +1,29 @@
+import UniversalCookie from 'universal-cookie'
+
+export class Cookies {
+  /** how long in seconds, until the cookie expires (10 years) */
+  static readonly COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60
+
+  public universalCookie: UniversalCookie
+
+  constructor(cookies?: string | object | null) {
+    this.universalCookie = new UniversalCookie(cookies)
+  }
+
+  set(name: string, value: string): void {
+    this.universalCookie.set(name, value, {
+      path: '/',
+      maxAge: Cookies.COOKIE_MAX_AGE
+    })
+  }
+
+  remove(name: string): void {
+    this.universalCookie.remove(name, { path: '/' })
+  }
+
+  get(name: string): string {
+    return this.universalCookie.get(name)
+  }
+}
+
+export const cookies = new Cookies()