Merge pull request #1 from kfnawaz/feat-auth-init
Feat Initialized Auth Module
This commit is contained in:
1
.env.sample
Normal file
1
.env.sample
Normal file
@@ -0,0 +1 @@
|
||||
REACT_APP_API_URL="http://dummy:port/"
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -21,3 +21,5 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.env
|
||||
75
package-lock.json
generated
75
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
28
src/config/authProvider.js
Normal file
28
src/config/authProvider.js
Normal file
@@ -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);
|
||||
};
|
||||
11
src/config/axiosInstance.js
Normal file
11
src/config/axiosInstance.js
Normal file
@@ -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;
|
||||
6
src/constants/urls.js
Normal file
6
src/constants/urls.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const urls = {
|
||||
baseURL: process.env.REACT_APP_API_URL || "http://dummy:port/",
|
||||
auth: 'auth',
|
||||
};
|
||||
|
||||
export default urls;
|
||||
42
src/services/auth.service.js
Normal file
42
src/services/auth.service.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user