feat(auth): keep user auth if his data is stored in localStorage

danilych · Feb 10, 2024 · d036661 · d036661
1 parent c713ebd
commit d036661
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,6 +1,6 @@
 import { cssBundleHref } from '@remix-run/css-bundle'
-import { json} from '@remix-run/node';
-import type { LoaderFunction , LinksFunction } from '@remix-run/node';
+import { json } from '@remix-run/node'
+import type { LoaderFunction, LinksFunction } from '@remix-run/node'
 import {
   Links,
   LiveReload,
@@ -14,8 +14,10 @@ import {
 import stylesheet from '~/tailwind.css'
 import Navigation from './widgets/navigation'
 import Footer from './widgets/footer'
-import store from './redux/store';
-import { Provider } from 'react-redux';
+import store from './redux/store'
+import { Provider, useDispatch } from 'react-redux'
+import type { ThunkDispatch } from '@reduxjs/toolkit'
+import { fetchAuth } from './redux/slices/auth'
 
 export const loader: LoaderFunction = async () => {
   return json({
@@ -34,6 +36,21 @@ export let handle = {
   i18n: 'common',
 }
 
+export function OutletProvider() {
+  const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
+
+  if (typeof window !== 'undefined') {
+    let requestData = {
+      Email: window.localStorage.getItem('email'),
+      Password: window.localStorage.getItem('password'),
+    }
+
+    dispatch(fetchAuth(requestData))
+  }
+
+  return <Outlet />
+}
+
 export default function App() {
   const data = useLoaderData<typeof loader>()
   return (
@@ -47,7 +64,7 @@ export default function App() {
       <body>
         <Provider store={store}>
           <Navigation />
-          <Outlet />
+          <OutletProvider />
           <ScrollRestoration />
           <Scripts />
           <LiveReload />

diff --git a/app/routes/my-account._index.tsx b/app/routes/my-account._index.tsx
@@ -1,8 +1,7 @@
-import { ThunkDispatch } from '@reduxjs/toolkit'
+import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { type V2_MetaFunction } from '@remix-run/node'
 import { EmptyAvatar } from 'assets/images'
 import { Spinner, Textarea } from 'flowbite-react'
-import moment from 'moment'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { selectIsAuth } from '~/redux/slices/auth'

diff --git a/app/widgets/login-card.tsx b/app/widgets/login-card.tsx
@@ -41,6 +41,8 @@ export default function LoginCard() {
       console.log(data.payload)
 
       window.localStorage.setItem('userId', data.payload.userID)
+      window.localStorage.setItem('email', values.Email)
+      window.localStorage.setItem('password', values.Password)
     } catch (error) {
       toast.error('Something went wrong!')
     }

diff --git a/app/widgets/register-card.tsx b/app/widgets/register-card.tsx
@@ -41,8 +41,8 @@ export default function RegisterCard() {
       }
 
       window.localStorage.setItem('userId', data.payload.id)
-      window.localStorage.setItem('email', data.payload.email)
-      window.localStorage.setItem('name', data.payload.userName)
+      window.localStorage.setItem('email', values.Email)
+      window.localStorage.setItem('password', values.Password)
     } catch (error) {
       toast.error('Something went wrong!')
     }