Table of Contents
The second episode in Unlocking the Power of React with Laravel 2023. Learn the best practises for creating a full-fledged application with the React and Laravel frameworks. Part 2 of the entire article is required to develop this full-stack web application. Learn the ins and outs of web development as we delve into the best practices for creating safe, cutting-edge online apps.
Improve your skills and stay abreast of changes in the field of web development. Join us in 2023 as we strive to become specialists across the whole technological stack.
The prior Tutorial ran too long, therefore we had to split the class in two;
The second half of the split has now been presented. At the very first line of the axios-client.js code, we had to stop. In this case, the baseURL is specified in a .env file.
What is an env file?
Storing confidential credentials, such as API keys, in environment files is a widely adopted convention.
Let’s get started.
axios-client.js
import axios from "axios";
import {useStateContext} from "./context/ContextProvider.jsx";
const axiosClient = axios.create({
baseURL: `${import.meta.env.VITE_API_BASE_URL}/api`
})
axiosClient.interceptors.request.use((config) => {
const token = localStorage.getItem('ACCESS_TOKEN');
config.headers.Authorization = `Bearer ${token}`
return config;
})
axiosClient.interceptors.response.use((response) => {
return response
}, (error) => {
const {response} = error;
if (response.status === 401) {
localStorage.removeItem('ACCESS_TOKEN')
// window.location.reload();
} else if (response.status === 404) {
//Show not found
}
throw error;
})
export default axiosClient
6. Laravel API Development (Backend)
Ok. Now we are going to start working on Laravel application development. That requires us to have something called an AuthController. In the Laravel app, We require an AuthController because our application is a CRUD application that also requires authentication. Therefore, the first thing I’m going to do is make an AuthController.
php artisan make:controller Api/AuthControllerAfter the AuthContoller has been created, we need to have three functions: signup, login, and then logout. Finally, we must log out. Signup refers to the process of registering for the application in this context, whereas login refers to the act of logging into the application. Logout is the command used to log out.
So we are going to separate the request validations using request classes. For that, we can create request classes using the below commands:
php artisan make:request signUpRequestphp artisan make:request loginRequestAfter that, update the api.php file by adding those functions.
Route::post('/signup', [AuthController::class, 'signup']);
Route::post('/login', [AuthController::class, 'login']);
Route::post('/logout', [AuthController::class, 'logout']);After creating all these requests, we need to implement the validation rules inside the requests to check the loginRequest and the signUpRequest
SignupRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;
class SignupRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'name' => ['required', 'string'],
'email' => ['required', 'email', 'unique:users,email'],
'password' => [
'required',
'confirmed',
Password::min(8)
->letters()
->symbols()
->numbers()
]
];
}
}
LoginRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class LoginRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'email' => 'required|email|string|exists:users,email',
'password' => [
'required',
],
'remember' => 'boolean'
];
}
}
Once we separate the request validation using requests, we need to use them inside the AuthController.
AuthController.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use App\Http\Requests\LoginRequest;
use App\Http\Requests\SignupRequest;
use App\Models\User;
use http\Env\Response;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class AuthController extends Controller
{
public function signup(SignupRequest $request)
{
$data = $request->validated();
/** @var \App\Models\User $user */
$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
]);
$token = $user->createToken('main')->plainTextToken;
return response(compact('user', 'token'));
}
public function login(LoginRequest $request)
{
$credentials = $request->validated();
if (!Auth::attempt($credentials)) {
return response([
'message' => 'Provided email or password is incorrect'
], 422);
}
/** @var \App\Models\User $user */
$user = Auth::user();
$token = $user->createToken('main')->plainTextToken;
return response(compact('user', 'token'));
}
public function logout(Request $request)
{
/** @var \App\Models\User $user */
$user = $request->user();
$user->currentAccessToken()->delete();
return response('', 204);
}
}
Then update the api.php like this.
<?php
use App\Http\Controllers\Api\AuthController;
use App\Http\Controllers\Api\UserController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
*/
Route::middleware('auth:sanctum')->group(function () {
Route::post('/logout', [AuthController::class, 'logout']);
Route::get('/user', function (Request $request) {
return $request->user();
});
Route::apiResource('/users', UserController::class);
});
Route::post('/signup', [AuthController::class, 'signup']);
Route::post('/login', [AuthController::class, 'login']);
Our programme fulfils all of the CRUD duties for its users. Utilise this application in your search. The user will have the ability to add a new user to the application, edit an existing user to update relevant information, and delete a user if it becomes necessary to do so. This kind of functional capability can be found there. We will need to develop a UserController in order to accomplish that functionality.
UserController.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use App\Http\Requests\StoreUserRequest;
use App\Http\Requests\UpdateUserRequest;
use App\Http\Resources\UserResource;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Resources\Json\AnonymousResourceCollection
*/
public function index()
{
return UserResource::collection(User::query()->orderBy('id', 'desc')->paginate(10));
}
/**
* Store a newly created resource in storage.
*
* @param \App\Http\Requests\StoreUserRequest $request
* @return \Illuminate\Http\Response
*/
public function store(StoreUserRequest $request)
{
$data = $request->validated();
$data['password'] = bcrypt($data['password']);
$user = User::create($data);
return response(new UserResource($user) , 201);
}
/**
* Display the specified resource.
*
* @param \App\Models\User $user
* @return \Illuminate\Http\Response
*/
public function show(User $user)
{
return new UserResource($user);
}
/**
* Update the specified resource in storage.
*
* @param \App\Http\Requests\UpdateUserRequest $request
* @param \App\Models\User $user
* @return \Illuminate\Http\Response
*/
public function update(UpdateUserRequest $request, User $user)
{
$data = $request->validated();
if (isset($data['password'])) {
$data['password'] = bcrypt($data['password']);
}
$user->update($data);
return new UserResource($user);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\User $user
* @return \Illuminate\Http\Response
*/
public function destroy(User $user)
{
$user->delete();
return response("", 204);
}
}
Now user CRUD functions are done because of the implementation of the UserController. but now you may encounter a problem. because we used StoreUserRequest and UpdateUserRequest in that class. but still, we never created it and implemented it. Now we are going to do it.
php artisan make:request StoreUserRequestphp artisan make:request UpdateUserRequestStoreUserRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;
class StoreUserRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'name' => 'required|string|max:55',
'email' => 'required|email|unique:users,email',
'password' => [
'required',
Password::min(8)
->letters()
->symbols(),
]
];
}
}
UpdateUserRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;
class UpdateUserRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'name' => 'required|string|max:55',
'email' => 'required|email|unique:users,email,'.$this->id,
'password' => [
'confirmed',
Password::min(8)
->letters()
->symbols(),
]
];
}
}
“So, We Come to the End of the Journey. What a great course this has been!”
7. Laravel and React Application Interaction
Because we added the Axios client to the React application, the interaction aspect of the application is now also finished, at least to some extent. However, there is currently work to be done on the React application. Since we finished off all of the work in the Laravel project, we are now able to go back to the React application.
Now we need to update the DefaultLayout.jsx file. You can see the updates below.
DefaultLayout.jsx
import {Link, Navigate, Outlet} from "react-router-dom";
import {useStateContext} from "../context/ContextProvider";
import axiosClient from "../axios-client.js";
import {useEffect} from "react";
export default function DefaultLayout() {
const {user, token, setUser, setToken, notification} = useStateContext();
if (!token) {
return <Navigate to="/login"/>
}
const onLogout = ev => {
ev.preventDefault()
axiosClient.post('/logout')
.then(() => {
setUser({})
setToken(null)
})
}
useEffect(() => {
axiosClient.get('/user')
.then(({data}) => {
setUser(data)
})
}, [])
return (
<div id="defaultLayout">
<aside>
<Link to="/dashboard">Dashboard</Link>
<Link to="/users">Users</Link>
</aside>
<div className="content">
<header>
<div>
Header
</div>
<div>
{user.name}
<a onClick={onLogout} className="btn-logout" href="#">Logout</a>
</div>
</header>
<main>
<Outlet/>
</main>
{notification &&
<div className="notification">
{notification}
</div>
}
</div>
</div>
)
}
Updated GuestLayout.jsx
import {Navigate, Outlet} from "react-router-dom";
import { useStateContext } from "../context/ContextProvider";
export default function GuestLayout() {
const { user, token } = useStateContext();
if (token) {
return <Navigate to="/" />;
}
return (
<div id="guestLayout">
<Outlet />
</div>
);
}
Now we need to change to the Signup form. We need to import the ContextProvider to the signup form and axiosClient also.
src/views/Signup.jsx
import { Link } from "react-router-dom";
import { createRef, useState } from "react";
import axiosClient from "../axios-client.js";
import { useStateContext } from "../context/ContextProvider.jsx";
export default function Signup() {
const nameRef = createRef()
const emailRef = createRef()
const passwordRef = createRef()
const passwordConfirmationRef = createRef()
const { setUser, setToken } = useStateContext()
const [errors, setErrors] = useState(null)
const onSubmit = ev => {
ev.preventDefault()
const payload = {
name: nameRef.current.value,
email: emailRef.current.value,
password: passwordRef.current.value,
password_confirmation: passwordConfirmationRef.current.value,
}
axiosClient.post('/signup', payload)
.then(({ data }) => {
setUser(data.user)
setToken(data.token);
})
.catch(err => {
const response = err.response;
if (response && response.status === 422) {
setErrors(response.data.errors)
}
})
}
return (
<div className="login-signup-form animated fadeInDown">
<div className="form">
<form onSubmit={onSubmit}>
<h1 className="title">Signup for Free</h1>
{errors &&
<div className="alert">
{Object.keys(errors).map(key => (
<p key={key}>{errors[key][0]}</p>
))}
</div>
}
<input ref={nameRef} type="text" placeholder="Full Name" />
<input ref={emailRef} type="email" placeholder="Email Address" />
<input ref={passwordRef} type="password" placeholder="Password" />
<input ref={passwordConfirmationRef} type="password" placeholder="Repeat Password" />
<button className="btn btn-block">Signup</button>
<p className="message">Already registered? <Link to="/login">Sign In</Link></p>
</form>
</div>
</div>
)
}
It is necessary for us to have a Form that can both insert new users and update existing ones. The same form can be used for that purpose as well. Let’s get a form going for that, shall we?
src/views/UserForm.jsx
import {useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import axiosClient from "../axios-client.js";
import {useStateContext} from "../context/ContextProvider.jsx";
export default function UserForm() {
const navigate = useNavigate();
let {id} = useParams();
const [user, setUser] = useState({
id: null,
name: '',
email: '',
password: '',
password_confirmation: ''
})
const [errors, setErrors] = useState(null)
const [loading, setLoading] = useState(false)
const {setNotification} = useStateContext()
if (id) {
useEffect(() => {
setLoading(true)
axiosClient.get(`/users/${id}`)
.then(({data}) => {
setLoading(false)
setUser(data)
})
.catch(() => {
setLoading(false)
})
}, [])
}
const onSubmit = ev => {
ev.preventDefault()
if (user.id) {
axiosClient.put(`/users/${user.id}`, user)
.then(() => {
setNotification('User was successfully updated')
navigate('/users')
})
.catch(err => {
const response = err.response;
if (response && response.status === 422) {
setErrors(response.data.errors)
}
})
} else {
axiosClient.post('/users', user)
.then(() => {
setNotification('User was successfully created')
navigate('/users')
})
.catch(err => {
const response = err.response;
if (response && response.status === 422) {
setErrors(response.data.errors)
}
})
}
}
return (
<>
{user.id && <h1>Update User: {user.name}</h1>}
{!user.id && <h1>New User</h1>}
<div className="card animated fadeInDown">
{loading && (
<div className="text-center">
Loading...
</div>
)}
{errors &&
<div className="alert">
{Object.keys(errors).map(key => (
<p key={key}>{errors[key][0]}</p>
))}
</div>
}
{!loading && (
<form onSubmit={onSubmit}>
<input value={user.name} onChange={ev => setUser({...user, name: ev.target.value})} placeholder="Name"/>
<input value={user.email} onChange={ev => setUser({...user, email: ev.target.value})} placeholder="Email"/>
<input type="password" onChange={ev => setUser({...user, password: ev.target.value})} placeholder="Password"/>
<input type="password" onChange={ev => setUser({...user, password_confirmation: ev.target.value})} placeholder="Password Confirmation"/>
<button className="btn">Save</button>
</form>
)}
</div>
</>
)
}
Display users in a Table. for that, we can use a decent and simple table. For that, we can create the Users.jsx file
src/views/users.jsx
import {useEffect, useState} from "react";
import axiosClient from "../axios-client.js";
import {Link} from "react-router-dom";
import {useStateContext} from "../context/ContextProvider.jsx";
export default function Users() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const {setNotification} = useStateContext()
useEffect(() => {
getUsers();
}, [])
const onDeleteClick = user => {
if (!window.confirm("Are you sure you want to delete this user?")) {
return
}
axiosClient.delete(`/users/${user.id}`)
.then(() => {
setNotification('User was successfully deleted')
getUsers()
})
}
const getUsers = () => {
setLoading(true)
axiosClient.get('/users')
.then(({ data }) => {
setLoading(false)
setUsers(data.data)
})
.catch(() => {
setLoading(false)
})
}
return (
<div>
<div style={{display: 'flex', justifyContent: "space-between", alignItems: "center"}}>
<h1>Users</h1>
<Link className="btn-add" to="/users/new">Add new</Link>
</div>
<div className="card animated fadeInDown">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Create Date</th>
<th>Actions</th>
</tr>
</thead>
{loading &&
<tbody>
<tr>
<td colSpan="5" class="text-center">
Loading...
</td>
</tr>
</tbody>
}
{!loading &&
<tbody>
{users.map(u => (
<tr key={u.id}>
<td>{u.id}</td>
<td>{u.name}</td>
<td>{u.email}</td>
<td>{u.created_at}</td>
<td>
<Link className="btn-edit" to={'/users/' + u.id}>Edit</Link>
<button className="btn-delete" onClick={ev => onDeleteClick(u)}>Delete</button>
</td>
</tr>
))}
</tbody>
}
</table>
</div>
</div>
)
}
Laravel Folder Structure
React Folder Structure
Is that what you truly believe? Our hero’s odyssey through the world of app creation is finally over. What an adventure this has been thus far! From fear of joining the world of coding to the assurance of building intricate systems. Put an end to your current activity, take a deep breath, and savor this triumphant moment.
So, for now, let’s raise our virtual glasses to celebrate what we’ve accomplished. Here’s to the bugs we’ve squashed, the “Eureka!” moments we’ve had, and the camaraderie of fellow geeks on the same wild ride.
Stay curious. Stay inspired. Stay geeky. Until next time!
You can follow these for more information. The Official Documentation of Laravel and React
References
You can Find React and Laravel 10 Full Stack Application 2023 Part 1 here.