API Authentication Using Laravel Sanctum and React Part 2

In the second part of this tutorial, we will start handling the frontend first. We will create the routes, and then we will add the helpers we need to authenticate the users.

Install the packages

So I assume that you already have a fresh new React app. Next, let's install the packages we need.

npm install react-router-dom axios react-toastify

Update the index.js file

Next, let's update the index.js or the main.js file if you are using Vite and add React Toastify to our project.

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-toastify/dist/ReactToastify.css';
import App from './App';
import { ToastContainer } from 'react-toastify';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <ToastContainer />
    <App />
  </React.StrictMode>
);

Create the AuthContext

Inside src, create a new folder 'helpers'. Let's add a new file 'authContext.js'.

import React from 'react';

export const AuthContext = React.createContext(null);

Set the base URL

Always inside helpers, let's create a new file 'url.js' that contains the base URL for our API.

export const BASE_URL = "http://127.0.0.1:8000/api";

Set the headers

Always inside helpers, let's create a new file 'config.js' that contains the Axios authorisation header.

export const getConfig = (token) => {
    const config = {
        headers: {
            "Content-type": "application/json",
            "Authorization": `Bearer ${token}`
        }
    }

    return config;
}