laravel sanctum
Api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return response()->json([ 'status'=>true , 'message' => 'Token is valid']);
});
Route::post('/register',[authController::class,'register']);
Route::post('/login',[authController::class,'login']);
authController.php
function register(Request $request)
{
$validator = Validator::make($request->all(),[
'name' => 'required',
'email' => 'required',
'password' => 'required',
'confirm_password' => 'required|same:password'
]);
if ($validator->fails()) {
return response()->json([
'status' => false,
'message' => 'Some Error Occured!',
'data' => $validator->errors()
]);
} else {
//email exist
$exist = User::where('email', '=', $request->email)->count();
if ($exist != 1) {
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => $request->password
]);
return response()->json([
'status' => true,
'message' => 'USER REGISTERED SUCCESSFULLY!',
'token' => $user->createToken("API TOKEN")->plainTextToken
], 200);
} else {
return response()->json(['message' => 'EMAIL ADDRESS ALREADY EXIST!']);
}
}
}
function login(Request $request){
$validator = Validator::make($request->all(),[
'email'=>'required|email',
'password'=>'required'
]);
if($validator->fails()){
return response()->json([
'status'=>false,
'message'=>'Some Error Occurs!',
'data'=>$validator->errors()
]);
}else{
if (Auth::attempt(['email'=>$request->email,'password'=>$request->password])) {
$user = User::where('email','=',$request->email)->first();
return response()->json([
'status'=>true,
'message'=>'Your Credentials Match!',
'token'=>$user->createToken("API TOKEN")->plainTextToken
]);
}else{
return response()->json([
'status'=>false,
'message'=>'Your Credentials Not Match!'
]);
}
}
}
------------------------------------------------------------------------------------------------------------------
Note: you will get a token whenever do register and login. You should store bearer token inside browser's localstorage.
----------------------------------------------------------------------------------------------------------------
React Code [optional]
Login.js
import { useState } from "react"
import { useNavigate } from "react-router";
export default function Login() {
const[email,setEmail] = useState("");
const[password,setPassword] = useState("");
const navigate = useNavigate();
const loginUser = (event) => {
event.preventDefault();
console.log("Email is: "+email);
console.log("Password is: "+password);
let item = {email,password};
fetch("http://localhost:8000/api/login",{
method:"POST",
headers:{
"Content-Type":"application/json",
"Accept":"application/json"
},
body: JSON.stringify(item)
}).then(response=>response.json())
.then(data=>{
if(data.token){
localStorage.setItem("BEARER_TOKEN",data.token);
alert(data.message);
navigate("/dashboard");
}else{
alert(data.message + "Try Again!");
}
});
}
return (
<>
<form onSubmit={loginUser}>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" value={email} onChange={(e)=>setEmail(e.target.value)} aria-describedby="emailHelp" placeholder="Enter email" required />
<small id="email" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password" required />
</div>
<br />
<button type="submit" class="btn btn-success">Login</button>
</form>
</>
)
}
Token Auth
Register.js
import { useState } from "react"
import { useNavigate } from "react-router";
export default function Register() {
// states
const[name,setName]=useState("");
const[email,setEmail]=useState("");
const[password,setPassword]=useState("");
const[confirm_password,setConfirmPassword]=useState("");
const navigate = useNavigate();
const saveForm = (event) => {
event.preventDefault();
console.log("name is: "+name);
console.log("email is: "+email);
console.log("password is: "+password);
console.log("confirm password is: "+confirm_password);
if(password!=confirm_password){
alert("Both Passwords Not Match!");
}else{
try{
let item = {name,email,password,confirm_password};
fetch("http://localhost:8000/api/register",{
method:"POST",
headers:{
"Content-Type":"application/json",
"Accept":"application/json"
},
body: JSON.stringify(item)
});
setName("");
setEmail("");
setPassword("");
setConfirmPassword("");
navigate("");
}catch(e){
console.error(e);
}
}
}
return (
<>
<div className="row">
<div className="col-2"></div>
<div className="col-8">
{/* registration form */}
<form onSubmit={saveForm}>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" value={name} onChange={(e)=>setName(e.target.value)} aria-describedby="emailHelp" placeholder="Enter name" required />
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" name="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)} aria-describedby="emailHelp" placeholder="Enter email" required />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password" value={password} onChange={(e)=>setPassword(e.target.value)} required />
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" id="confirm_password" value={confirm_password} onChange={(e)=>setConfirmPassword(e.target.value)} aria-describedby="emailHelp" placeholder="Enter name" required />
</div>
<br />
<button type="submit" class="btn btn-warning">Register</button>
</form>
</div>
<div className="col-2"></div>
</div>
</>
)
}
