Authentification:React-Laravel

Step 1: Set up Laravel Authentication
Create a new Laravel project

laravel new LaravelReactJS

Set up Laravel authentication:

installation de Laravel\ui

composer require laravel/ui

php artisan ui bootstrap --auth

npm install

npm run build

php  artisan serve

Define a Role model:

php artisan make:model Role -m

Role.php (Model)

// app/Models/Role.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Role extends Model
{
    protected $fillable = ['name', 'description'];

    // Define relationship with users
    public function users()
    {
        return $this->hasMany(User::class);
    }
}

User.php (Model)

// app/Models/User.php

namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;

    protected $fillable = [
        'name', 'email', 'password', 'idRole','api_token'
    ];

    protected $hidden = [
        'password', 'remember_token','api_token',
    ];

    public function role()
    {
        return $this->belongsTo(Role::class);
    }
}

Step 2: Set up Database and Models
Create a new MySQL database and configure its credentials in your .env file.
Run database migrations to create necessary tables:

php artisan migrate

RoleController.php

// app/Http/Controllers/RoleController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Role;

class RoleController extends Controller
{
    public function index()
    {
        $roles = Role::all();
        return response()->json($roles);
    }
}


php artisan make:middleware AuthToken

// app/Http/Middleware/AuthToken.php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use App\Models\User;

class AuthToken
{
    public function handle(Request $request, Closure $next)
    {
        $token = $request->header('Authorization');

        if (!$token) {
            return response()->json(['error' => 'Token not provided'], 401);
        }

        $token = str_replace('Bearer ', '', $token);
        $user = User::where('api_token', $token)->first();

        if (!$user) {
            return response()->json(['error' => 'Invalid token'], 401);
        }

        $request->user = $user;

        return $next($request);
    }
}

// app/Http/Kernel.php


protected $middlewareAliases = [
    // ...
    'auth.token' => \App\Http\Middleware\AuthToken::class,
];

// routes/api.php


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;
use App\Http\Controllers\ProfileController;

Route::post('/login', [AuthController::class, 'login']);
Route::post('/register', [AuthController::class, 'register']);

Route::middleware('auth.token')->group(function () {
    Route::get('/profile', [ProfileController::class, 'index']);
});

// app/Http/Controllers/AuthController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use App\Models\User;
use App\Models\Role;
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use App\Models\User;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $request->validate([
            'name' => 'required|string',
            'email' => 'required|email|unique:users,email',
            'password' => 'required|string|min:6|confirmed',
            'idRole' => 'required|exists:roles,idRole'
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
            'idRole' => $request->idRole,
            'api_token' => Str::random(60)
        ]);

        return response()->json(['user' => $user], 201);
    }

    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        $user = User::where('email', $credentials['email'])->first();

        if ($user && Hash::check($credentials['password'], $user->password)) {
            $token = Str::random(60);
            $user->api_token = $token;
            $user->save();

            return response()->json(['token' => $token], 200);
        } else {
            return response()->json(['error' => 'Unauthorized'], 401);
        }
    }
}

ProfileController.php

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
class ProfileController extends Controller
{
    public function index(Request $request)
    {
        $token = $request->header('Authorization');

        if (!$token) {
            return response()->json(['error' => 'Token not provided'], 401);
        }

        $token = str_replace('Bearer ', '', $token);
        $user = User::where('api_token', $token)->first();

        if ($user) {
            return response()->json($user);
        } else {
            return response()->json(['error' => 'Unauthorized'], 401);
        }
    }
}

Protect routes in Laravel by adding middleware in app/Http/Kernel.php.

'auth' => \App\Http\Middleware\Authenticate::class,


//config/auth.php

   'defaults' => [
        'guard' => 'api',
        'passwords' => 'users',
    ],

Front-End

Créer un projet React

npx create-react-app frontApp

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function Register() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [passwordConfirmation, setPasswordConfirmation] = useState('');
    const [roles, setRoles] = useState([]);
    const [selectedRole, setSelectedRole] = useState('');
    const [errors,setErrors]=useState("");
    const navigate=useNavigate();

    useEffect(() => {
        // Fetch roles from Laravel backend
        axios.get('http://127.0.0.1:8000/api/roles')
            .then(response => {
                setRoles(response.data);
            })
            .catch(error => {
                console.error('Error fetching roles:', error);
            });
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        // Implement registration functionality using Axios or Fetch
        const userData = {
            name: name,
            email: email,
            password: password,
            password_confirmation: passwordConfirmation,
            idRole : selectedRole
        };
        console.log(userData);

        // Make a POST request to register the user
        axios.post('http://127.0.0.1:8000/api/register', userData)
            .then(response => {
               alert("Votre compte est crée");
               navigate("/login");
               
            })
            .catch(error => {
              
                setErrors(error.response.data.message);

                console.error('Registration error:', error);
                
            });
    }

    return (

        <div>
            <h2>Register</h2>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} required />
                <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                <input type="password" placeholder="Confirm Password" value={passwordConfirmation} onChange={(e) => setPasswordConfirmation(e.target.value)} required />
                <select value={selectedRole} onChange={(e) => setSelectedRole(e.target.value)} required>
                    <option value="">Select Role</option>
                    {roles.map(role => (
                        <option key={role.id} value={role.id}>{role.name}</option>
                    ))}
                </select>
                <button type="submit">Register</button>
            </form>
            {erros}
        </div>
    );
}

export default Register;

// src/components/Login.jsx

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errors,setErrors]=useState("");

   const navigate=useNavigate();
    const handleSubmit = async (e) => {
        e.preventDefault();
        // Implement login functionality using Laravel API auth
        const userData = {
            email: email,
            password: password
        };

        // Make a POST request to login
        axios.post('http://127.0.0.1:8000/api/login', userData)
            .then(response => {
               
                localStorage.setItem('token', response.data.token);
                console.log(response.data.token);
               //navigate("/profile");
                
            })
            .catch(error => {
                console.error('Login error:', error);
                setErrors(error.response.data.error);

            });
    }

    return (

    return (
        <div>
            <h2>Login</h2>
            <form onSubmit={handleSubmit}>
                <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                <button type="submit">Login</button>
            </form>
            {errors}
        </div>
    );
}

export default Login;

Profile.jsx

// src/components/Profile.jsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Profile() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        // Fetch user data from Laravel backend using token
        const token = localStorage.getItem('token');
        if (token) {
            axios.get('http://127.0.0.1:8000/api/profile', {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
            .then(response => {
                setUser(response.data);
            })
            .catch(error => {
                console.error('Error fetching user profile:', error);
            });
        }
    }, []);


    return (
        <div>
            <h2>Profile</h2>
            {user && <p>Welcome, {user.name}</p>}
        </div>
    );
}

export default Profile;

// src/App.js

import React, { useState, useEffect } from 'react';

import { BrowserRouter as Router, Route, Link, Redirect,Routes } from 'react-router-dom';
import './App.css';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';
import axios from 'axios';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://127.0.0.1:8000/api/profile', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      .then(response => {
        setIsAuthenticated(true);
        console.log(response.data);
      })
      .catch(error => {
        console.error('Error fetching user profile:', error);
        setIsAuthenticated(false);
      });
    }
  }, []);

  return (

  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/register">Register</Link>
            </li>
            {isAuthenticated && (
              <li>
                <Link to="/profile">Profile</Link>
              </li>
            )}
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/register">
            <Register />
          </Route>
          <Route path="/profile">
            {isAuthenticated ? <Profile /> : <Redirect to="/login" />}
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;