Properly save auth state

components/auth/storage.ts

@@ -1,21 +1,13 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { localStorageSaveJSON, useLocalStorageJSONLoad, useLocalStorageJSONState } from "../generic/storage/json";
 import { AuthContextContents } from "./base";
 
 
-/**
- * Hook holding as state the {@link AuthContextContents}.
- */
-export function useStateAuth() {
-    return useState<AuthContextContents>(null)
-}
-
-
 /**
  * Hook which combines {@link useState}, {@link useLocalStorageJSONLoad}, and {@link localStorageSaveJSON}.
  */
-export function useLocalStorageAuthState(key: string) {
+export function useLocalStorageAuthState(key: string): [AuthContextContents | null, React.Dispatch<AuthContextContents | null>] {
-    const [state, setStateInner] = useState<AuthContextContents | undefined>(undefined);
+    const [state, setStateInner] = useState<AuthContextContents | null>(null);
 
     const validateAndSetState = useCallback(
         (data: any) => {
@@ -36,8 +28,8 @@ export function useLocalStorageAuthState(key: string) {
 
     const setState = useCallback(
         (value: AuthContextContents) => {
-            validateAndSetState(value);
             localStorageSaveJSON(key, value);
+            validateAndSetState(value);
         },
         [key, validateAndSetState]
     );

pages/_app.tsx

@@ -4,13 +4,13 @@ import { AxiosSWRFetcherProvider } from '../components/auth/requests'
 import { useStatePostcard } from '../components/postcard/storage'
 import { PageErrorBoundary } from '../components/generic/errors/boundaries'
 import { PostcardContext } from '../components/postcard/base'
-import { useStateAuth } from '../components/auth/storage'
 import { AuthContext } from '../components/auth/base'
 import { PostcardRenderer } from '../components/postcard/renderer'
 import '../styles/globals.css'
 import defaultPostcard from "../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
 import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
+import { useLocalStorageAuthState } from '../components/auth/storage'
 
 
 fontAwesomeConfig.autoAddCss = false
@@ -19,7 +19,7 @@ fontAwesomeConfig.autoAddCss = false
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {
     const { t } = useTranslation()
     const postcardState = useStatePostcard(defaultPostcard)
-    const authState = useStateAuth()
+    const authState = useLocalStorageAuthState("auth")
 
     return (
         <PageErrorBoundary text={t("genericError")}>

utils/stateContext.ts

@@ -6,6 +6,6 @@ import { createDefinedContext } from "./definedContext"
  * 
  * @returns The created context.
  */
-export function createStateContext<T>(): Context<[T, Dispatch<SetStateAction<T>>] | undefined> {
+export function createStateContext<T>(): Context<[T, Dispatch<T>] | undefined> {
-    return createDefinedContext<[T, React.Dispatch<React.SetStateAction<T>>]>()
+    return createDefinedContext<[T, React.Dispatch<T>]>()
 }