Merge pull request #1 from kfnawaz/feat-auth-init

Feat Initialized Auth Module

.env.sample

@@ -0,0 +1 @@
+REACT_APP_API_URL="http://dummy:port/"

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package-lock.json

@@ -11,12 +11,14 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.24.0",
         "i18next": "^21.6.5",
         "i18next-browser-languagedetector": "^6.1.2",
         "i18next-http-backend": "^1.3.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.15.3",
+        "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.2"
       }
@@ -4271,6 +4273,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7810,6 +7820,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13037,6 +13055,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -18900,6 +18942,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
       "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -21502,6 +21552,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25169,6 +25227,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

package.json

@@ -6,12 +6,14 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.24.0",
     "i18next": "^21.6.5",
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-http-backend": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.3",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"
   },

src/App.js

@@ -1,13 +1,16 @@
 import Test from './components/Test';
+import AuthProvider from './config/authProvider';
 import localizationInit from './config/localization';
 
 localizationInit();
 
 function App() {
   return (
+    <AuthProvider>
       <div className="App">
         <Test />
       </div>
+    </AuthProvider>
   );
 }
 

src/components/Test.js

@@ -1,11 +1,39 @@
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../config/authProvider';
 
 export default function Test() {
   const { t } = useTranslation();
+  let auth = useAuth();
+  let navigate = useNavigate();
+
+  if (!auth.user) {
     return (
       <>
-      <h3>{t('app_title')}</h3>
+        <p>You are not logged in.</p>{' '}
-      <div>{t('welcome_message')}</div>
+        <button
+          onClick={() => {
+            auth.signin('newuser name', () => navigate('/'));
+          }}
+        >
+          Sign in
+        </button>
       </>
     );
+  }
+
+  return (
+    <p>
+      <h3>{t('app_title')}</h3>
+      <div>{t('welcome_message')}</div>
+      Welcome {auth.user}!{' '}
+      <button
+        onClick={() => {
+          auth.signout(() => navigate('/'));
+        }}
+      >
+        Sign out
+      </button>
+    </p>
+  );
 }

src/config/authProvider.js

@@ -0,0 +1,28 @@
+import { createContext, useContext, useState } from 'react';
+import authService from '../services/auth.service';
+
+let AuthContext = createContext(null);
+
+export default function AuthProvider({ children }) {
+  let [user, setUser] = useState(authService.getCurrentUser());
+
+  let signin = async (loginData, callback) => {
+    const userData = await authService.login(loginData);
+    setUser(userData);
+    callback();
+  };
+
+  let signout = async (callback) => {
+    await authService.logout();
+    setUser(null);
+    callback();
+  };
+
+  let value = { user, signin, signout };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};

src/config/axiosInstance.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+import urls from '../constants/urls';
+
+const axiosInstance = axios.create({
+  baseURL: urls.baseURL,
+  headers: {
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  },
+});
+
+export default axiosInstance;

src/constants/urls.js

@@ -0,0 +1,6 @@
+const urls = {
+  baseURL: process.env.REACT_APP_API_URL || "http://dummy:port/",
+  auth: 'auth',
+};
+
+export default urls;

src/services/auth.service.js

@@ -0,0 +1,42 @@
+// import axiosInstance from '../config/axios';
+// import urls from '../constants/urls';
+
+const authService = {
+  login(username) {
+    // return axiosInstance
+    //   .post(urls.auth, {
+    //     username,
+    //     password,
+    //   })
+    //   .then((response) => {
+    //     if (response.data.accessToken) {
+    localStorage.setItem('user', username);
+    // localStorage.setItem('user', JSON.stringify(response.data));
+    //       localStorage.setItem('token', JSON.stringify(response.data.accessToken));
+    //     }
+
+    //     return response.data;
+    //   });
+    return username;
+  },
+
+  logout() {
+    localStorage.removeItem('user');
+    localStorage.removeItem('token');
+  },
+
+  // register(username, email, password) {
+  //   return axios.post(API_URL + 'signup', {
+  //     username,
+  //     email,
+  //     password,
+  //   });
+  // }
+
+  getCurrentUser() {
+    return localStorage.getItem('user');
+    // return JSON.parse(localStorage.getItem('user'));
+  },
+};
+
+export default authService;