API Authentication Using Laravel Sanctum and React js 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 have already a fresh new React js 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' inside 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 authorization header.
export const getConfig = (token) => {
const config = {
headers: {
"Content-type": "application/json",
"Authorization": `Bearer ${token}`
}
}
return config;
}