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

Feat Initialized Auth Module
This commit is contained in:
bluestreamlds
2022-01-06 11:34:38 +05:30
committed by GitHub
12 changed files with 203 additions and 5 deletions

1
.env.sample Normal file
View File

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

2
.gitignore vendored
View File

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

75
package-lock.json generated
View File

@@ -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",

View File

@@ -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"
},

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View 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);
};

View 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
View File

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

View 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;