How to deal with the authentication

The backend application uses the Laravel Sanctum library to provide authentication system to our API. The AuthController (/app/Http/Controllers/) contains all methods to manage the users. The api.php file contains all URL routes for the API application.

Register an account

The route http://localhost:8000/api/register is used to register a new account to the backend API. This route must be access with a POST method. You have to provide a form-data content-type with the corresponding data :

        name=myLogin&email=myLogin@univ-artois.fr&password=ecoal2025
    

Once the account is created, a response is sent with the authentication token. You can use this token to access protected route.

        {
            'access_token' : XXXXXXXXXXX,
            'token_type' : 'Bearer'
        }
    

Login to an account

If you have an account, the route http://localhost:8000/api/login is used to login to the backend API. This route must be access with a POST method. You have to provide a form-data content-type with the corresponding data :

            email=myLogin@univ-artois.fr&password=ecoal2025
        
                

A response is sent with the authentication token. You can use this token to access protected route.

            {
                'access_token' : XXXXXXXXXXX,
                'token_type' : 'Bearer'
            }
        
            

Access to a protected route

Some routes can be accessed only when you are login to the application. In the api.php file, we use the 'auth:sanctum' middleware to protect routes. The route http://localhost:8000/api/user is an example of protected route. This route must be access with a GET method. When you are login, it provides information about the current user. Each time you want to use a protected route, you have to provide the authentication token. We recall that the authentication token is given either when you create a new account or when you login with the email/password credentials. This token is added in the header part of the request.

            Authorization : Bearer XXXXXXXXXXX
        
                

Logout

The route http://localhost:8000/api/logout is used to logout the user from the backend API. This route must be access with a GET method. This is a protected route that you can access only when you are login (you have to provide the bearer access token). This route will remove from the database all the access tokens associated with the given user.

Save the token

In order to save the user's token, install this package npm install react-cookie. Then, in the App.js file add the following line

                    // other import before...
                    import useCookie from 'react-cookie';

                    function App() {
                    .....
                    const [cookies, setCookie, removeCookie] = useCookies(['mycookie']);

                    }
                

Each route that needs to modify the cookie must provide the setCookie function as a prop. For example :

 
        <Route exact="true" path="/login" element={<Login setCookie={setCookie}/>} />
        

In the login page, You must store the cookie when the user succeeds to connect.

                
                    props.setCookie("mycookie", {name: user.name, token: response.token}, "/");
                
            

Like that, you will store in this cookie the name of the user (can be useful) and its token.

Each route that needs to have the user connected must also provide the cookie as a prop.

When you want to be connected, axios needs the token. You need to have a code that looks like that:

                
try {
    if (props.cookies?.mycookie) {
        const response = await axios.get({
            url: "http://localhost:8000/items",
            headers: {Authorization: "Bearer " + props.cookies.mycookie.token}
        })
        // What do you want to do with the response??
    }
} catch (error) {
    console.log("error", error);
}