11 | })
12 |
13 | e.preventDefault()}>
14 | {state.user.name}
15 |
16 |
12 | Make sure you know where you're going.
11 |
12 | }){kind=logo}
11 | Copyright © {dayjs().format('YYYY')}
12 |
11 | 15 | Login | Register 16 |
17 |
49 | 2. Login
50 | 
51 | 3. Dashboard
52 | 
53 | 4. Calendar
54 | 
55 | 5. Settings
56 | 
57 | 6. Tools
58 | 
59 | 7. Currency
60 | 
61 |
62 | ## More Info
63 |
64 | This project is solely made for learning purposes. The structure of the project and the code practices may prove useful to new learners who are exploring new technologies.
65 |
66 | Spare a ⭐ to keep me motivated. 😃
67 |
--------------------------------------------------------------------------------
/src/Axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { authApiEndpoints, host } from "./API";
3 | import { getItem, setItem, removeItem } from "./Helpers";
4 |
5 | axios.defaults.baseURL = host;
6 | axios.defaults.headers['Content-Type'] = 'application/json';
7 |
8 | axios.interceptors.request.use(
9 | config => {
10 | // console.log('request interceptor');
11 | const url = config.url.split('/');
12 |
13 | if (url[url.length - 1] === 'login' || url[url.length - 1] === 'register') {
14 | delete config.headers.Authorization; // Do not send Authorization if from Login or Register
15 | }
16 |
17 | let access_token = getItem('access_token');
18 | if (access_token) {
19 | config.headers['Authorization'] = 'Bearer ' + access_token;
20 | }
21 |
22 | return config;
23 | },
24 | error => Promise.reject(error),
25 | );
26 |
27 | let is_refreshing = false;
28 |
29 | let subscribers = [];
30 |
31 | axios.interceptors.response.use(undefined, err => {
32 | // console.log('response interceptor');
33 | const { config, response: { status } } = err;
34 | const originalRequest = config;
35 |
36 | if (status === 401) {
37 |
38 | if (!is_refreshing) {
39 | is_refreshing = true;
40 |
41 | let instance = axios.create({
42 | headers: { 'Authorization': 'Bearer ' + getItem('access_token') }
43 | });
44 |
45 | instance.patch(host + authApiEndpoints.refresh)
46 | .then(response => {
47 | is_refreshing = false;
48 | onRefreshed(response.data.access_token);
49 |
50 | // console.log('token refreshed');
51 | setItem('expires_in', response.data.expires_in);
52 | setItem('access_token', response.data.access_token);
53 | setItem('token_created', response.data.token_created);
54 |
55 | subscribers = [];
56 | })
57 | .catch(error => {
58 | console.log(error.response.status);
59 | // Returning false in my case
60 | // return false
61 | if (error.response.status === 401) {
62 | logout();
63 | }
64 | });
65 | }
66 |
67 | const axiosSubscribers = new Promise(resolve => {
68 | subscribeTokenRefresh(token => {
69 | originalRequest.headers.Authorization = 'Bearer ' + token;
70 | resolve(axios(originalRequest));
71 | });
72 | });
73 |
74 | return axiosSubscribers;
75 | }
76 | return Promise.reject(err);
77 | });
78 |
79 | function subscribeTokenRefresh(cb) {
80 | subscribers.push(cb);
81 | }
82 |
83 | function onRefreshed(token) {
84 | subscribers.map(cb => cb(token));
85 | }
86 |
87 | // Logout a user
88 | export const logout = () => {
89 | axios.post(authApiEndpoints.logout)
90 | .then(response => {
91 | // Check if success
92 | removeItem('user');
93 | removeItem('token_created');
94 | removeItem('access_token');
95 | removeItem('expires_in');
96 | window.location.reload();
97 |
98 | return true;
99 | })
100 | .catch(error => {
101 | // Check if token expired
102 | // Check any other error, like - invalid token
103 | // Or forcefully logout the user
104 | removeItem('user');
105 | removeItem('token_created');
106 | removeItem('access_token');
107 | removeItem('expires_in');
108 | window.location.reload();
109 | return true; // Return false if you need
110 | })
111 | };
112 |
113 | export default axios;
114 |
--------------------------------------------------------------------------------
/src/app/auth/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import * as yup from 'yup';
3 | import { useForm } from 'react-hook-form';
4 | import { Helmet } from 'react-helmet';
5 |
6 | import { Card } from "primereact/card";
7 | import { Messages } from "primereact/messages";
8 | import { Button } from "primereact/button";
9 | import { Link } from "react-router-dom";
10 |
11 | import LocaleToggle from './../locale/LocaleToggle';
12 |
13 | import axios from './../../Axios';
14 | import { setItem } from "./../../Helpers";
15 | import { authApiEndpoints } from "./../../API";
16 | import { useTracked } from './../../Store';
17 |
18 | const loginValidationSchema = yup.object().shape({
19 | email: yup.string().required('Email field is required.').email('Email must be a valid email.'),
20 | password: yup.string().required('Password field is required.').min(6, 'Must be 6 characters.'),
21 | });
22 |
23 | let messages; // For alert message
24 |
25 | const Login = (props) => {
26 |
27 | const [state, setState] = useTracked();
28 | const [submitting, setSubmitting] = useState(false);
29 |
30 | // console.log('Login', state);
31 |
32 | // Login form handle
33 | const { register, handleSubmit, errors } = useForm({
34 | validationSchema: loginValidationSchema
35 | });
36 |
37 | const submitLogin = (data) => {
38 | messages.clear(); // Clear existing messages
39 | setSubmitting(true);
40 | axios.post(authApiEndpoints.login, JSON.stringify(data))
41 | .then(response => {
42 | // console.log('success');
43 | // console.log(response.data);
44 |
45 | if (response.status === 200) {
46 | setItem('expires_in', response.data.expires_in);
47 | setItem('access_token', response.data.access_token);
48 | setItem('token_created', response.data.token_created);
49 |
50 | setState(prev => ({ ...prev, user: response.data.user }));
51 |
52 | props.location.state === undefined ? props.history.replace('/dashboard') : props.history.replace(props.location.state.from.pathname);
53 | }
54 |
55 | })
56 | .catch(error => {
57 | // console.log('error', error.response);
58 |
59 | if (error.response && error.response.status === 422) {
60 | messages.show({ severity: 'error', detail: 'Incorrect email or password.', sticky: true });
61 | }
62 | else {
63 | messages.show({ severity: 'error', detail: 'Something went wrong. Try again.', sticky: true });
64 | }
65 | setSubmitting(false);
66 | })
67 | };
68 |
69 | return (
70 |