Merge pull request #4 from thaind97git/develop

Add auth feature to support admin page

Author: thaind97git

Diff for: README.md

@@ -209,6 +209,11 @@ For Production:
   }, [fetchUser]);
   ```
 
+- How to use Auth feature
+  - If you want to build an admin page, with authorize full layout, just go to line **50** at `src/layouts/main.tsx` and use the code inside comment.
+  - **Auth** component is a feature help authorize page by fetching profile each time page rendered.
+  - You must have a server API to use this feature. This API with simple function like receive a header token, return user profile if token is valid and return 404 if token is expired.
+
 ---
 
 ## Tips

Diff for: package.json

@@ -2,7 +2,7 @@
   "author": "aldenn",
   "license": "ISC",
   "name": "react-webpack-typescript-starter",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The React-Typescript Boilerplate with Webpack config manual",
   "main": "index.js",
   "scripts": {

Diff for: src/components/hoc/withAuth.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setAuthenticated, setCurrentUser } from '@/store/slices/authSlice';
+import { getCurrentUser } from '@/apis/auth';
+
+import { getToken } from '@/helpers/local-storage';
+import { goURL } from '@/helpers/router';
+
+interface IProps {
+  children: React.ReactElement;
+}
+
+const Auth: React.FC<IProps> = ({ children }) => {
+  const [renderRoute, setRenderRoute] = useState(false);
+  const dispatch = useDispatch();
+
+  const fetchCurrentUser = useCallback(async () => {
+    try {
+      const response = await getCurrentUser();
+      if (response && response.data) {
+        dispatch(setAuthenticated(true));
+        dispatch(setCurrentUser(response.data));
+      }
+    } catch (error) {
+      goURL('/login');
+    }
+    setRenderRoute(true);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!getToken()) {
+      goURL('/login');
+      setRenderRoute(true);
+    } else {
+      fetchCurrentUser();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return renderRoute ? children : null;
+};
+
+export default Auth;

Diff for: src/layouts/Auth.tsx

@@ -44,6 +44,14 @@ const Main: React.FC = () => {
                 path={path}
                 render={props => {
                   updateDisplayLayout(currentLayout, layout);
+                  /**
+                   * Use this for authentication like admin page
+                   */
+                  // return (
+                  //   <Auth>
+                  //     <Component {...props} />
+                  //   </Auth>
+                  // );
                   return <Component {...props} />;
                 }}
                 {...rest}