Authentication

Our template uses JWT token for validating JSON data.

To implement route guards, wrap your desired route with the <ProtectedRoutes> component, which ensures that only logged-in users can access the page.

<Route element={<ProtectedRoutes authRequired={true}/>}>
    <Route element={<Articles/>} path="article"/>
</Route>

<Route element={<ProtectedRoutes authRequired={false}/>}>
    <Route element={<Signin/>} path="signin"/>
</Route>

You can inspect src/routes/ProtectedRoutes.jsx file to see our configured route guard.

Login

When users input their username and password into the login form, the system checks these credentials against the database. If the information matches and the API request is successful, the user is granted access to the system

We've created a loginUsers action in src/store/userSlice, allowing you to enter the user data upon login.

File: src/store/userSlice

const initialState = {
    accessToken: window.localStorage.getItem("access-token") || "",
    userPermissions: window.localStorage.getItem("user-permissions") || "",
    userData: window.localStorage.getItem("user-data") || {}
};
/* ... */

Here's an example of a simple login page with user authentication:

import $api from "@axios";
import {useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {loginUsers} from "@/store/userSlice";
import EForm from "@components/Form/EForm";
import EInput from "@components/Form/EInput";

export const Login = () => {
    // ** States
    const [email, setEmail] = useState("[email protected]");
    const [password, setPassword] = useState("123456");

    // ** Hooks
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const handleSubmit = async (e) => {
        $api
            .post("/login", {
                email: email,
                password: password
            })
            .then((res) => {
                if (res.status === 201) {
                    dispatch(loginUsers(res.data));
                }
            })
    }
};

return (
    <EForm onSubmit={handleSubmit}>
        <EInput
            type="email"
            name="email"
            value={email}
            onChange={(e) => setEmail((e.target.value))}
        />
        <EInput
            type="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
        />
        <EBtn type="submit">
            Sign in
        </EBtn>
    </EForm>
)
}

We auto store the data in local storage with the below-mentioned key names to preserve your browsing history during reloads.

✅ access-token

✅ user-data

✅ user-permissions (for more info refer to Access Control page)

Logout

Upon logout, we clear all user data using the logoutUser action in src/store/userSlice. This process involves deleting sensitive information, including login credentials, access tokens, and any special permissions granted during the session. This step is vital for ensuring the privacy and security of user accounts.