Added: auth modules and providers

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 (
-    <div className="App">
-      <Test />
-    </div>
+    <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 (
+      <>
+        <p>You are not logged in.</p>{' '}
+        <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/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;