Laravel 8 connection at the web app with api - laravel

For my job, I have to make an app which never use the database directly. I have to only request an API even for the connection.
So... There is my problem. I try to make an auth with a user that i'm getting from API but i'm always redirect to the login page.
My API auth :
public function login(Request $request)
{
$credentials = request(['use_username', 'password']);
$this->guard()->factory()->setTTL(config('jwt.ttl') * 12);
if (!$token = $this->guard()->attempt($credentials)) {
return response()->json(['error' => 'Unauthorized'], 401);
}
$user = auth()->user();
return $this->respondWithToken($user, $token);
}
protected function respondWithToken($user, $token)
{
$cookie = cookie('jwt', $token, 60 * 12); // 12h
return response()->json([
'user' => $user,
'token' => $token
])->withCookie($cookie);
}
My web app auth :
public function login(Request $request)
{
$response = Http::post(env('app_url').'/api/auth/login', $request->only('use_username', 'password'));
$cookie = cookie('jwt', $response['token'], 60 * 12); // 12h
$user = ( new User() )->forceFill( $response['user'] );
if (Auth::login($user)) {
$request->session()->regenerate();
return redirect('/');
}
flash('error')->error();
return back()->withErrors([
'email' => 'The provided credentials do not match our records.',
]);
}
My API guard (default guard) :
'api' => [
'driver' => 'jwt',
'provider' => 'users',
'hash' => false
]
The goal is to authenticate the user in the API, get a JWT token and auth the user in the web app with the same user that got in the API. After, all my request to the API have to use the JWT token get during the login... Maybe with a HttpOnly cookie ?
Well, i can't connect my user to the web app, i'm always unauthenticate and redirect to th elogin form, can someone help me ?
I'm using tymon/jwt-auth library with PHP 8

Related

Laravel sanctum and vue: user is logged in frontend but backend returns unauthorized

i have a log in form in my front end (vue) when users log in, in vue i can get back data of logged in user perfectly fine through
axios.get('http://127.0.0.1:8000/api/user').then((response)=>{
this.userData = response.data;
However in my backend when i try to bring back the logged in user though
if ($request->user('sanctum')) {
return "auth";
} else {
return "guest";
}
it returns guest i dont know why!!!!
vue code:
async login(){
axios.post('http://127.0.0.1:8000/api/login', this.form).then((response) =>{
localStorage.setItem('token', response.data);
axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`;
this.$router.push('/');
} )
.catch ((error) =>{
console.log(error.response.data.errors);
})
},
laravel auth controller :
public function loginn(Request $request){
$request->validate([
'email' => 'required',
'password' => 'required',
]);
$user = User::where('email', $request->email)->first();
if (! $user || ! Hash::check($request->password, $user->password)) {
throw ValidationException::withMessages([
'email' => ['The provided credentials are incorrect.'],
]);
}
return $user->createToken("token")->plainTextToken;
return response()->json([
'token' => $token,
'type' => 'bearer',
'expires_in' => auth()->factory()->getTTL() * 60
]);
api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::post('/signup', [authcontroller::class, 'signupp']);
Route::post('/login', [authcontroller::class, 'loginn'])->name('login');;
Route::post('/logout',[authcontroller::class, 'logout'])->middleware('auth:sanctum');
I haved this problem.
This problem is for .env in backend laravel and get csrf front
remembering that the localhost address must be either localhost or 127.0.0.1 amd get csrf before
axios.get('/sanctum/csrf-cookie').then(response => {
// Login...
});
.env
SESSION_DOMAIN=127.0.0.1
SACTUM_STATEFUL_DOMAINS=127.0.01:PORT

Laravel rest api (santum) for mobile application

I have created a REST API with LARAVEL SANCTUM. I have tested api on postman and it works as expected but when mobile developer uses it on ionic app, it returns for login "TOKEN MISMATCH".
Here is my API route
Route::post('/register', [ApiController::class, 'register']);
Route::post('/login', [ApiController::class, 'login']);
Here is the ApiController for login
public function login(Request $request){
$fields = $request->validate([
'email' => 'required|string|email|max:255',
'password' => 'required|string|min:8'
]);
//validate login parameters
//check email
$user = User::where('email', $fields['email'])->first();
//check password
if(!$user || !Hash::check($fields['password'], $user->password)){
return response([
'message' => 'Invalid Credentials'
], 401);
}
$token = $user->createToken('myapptoken')->plainTextToken;
//return $user->createToken($request->device_name)->plainTextToken;
$response = [
'user' => $user,
'token' =>$token,
];
return response($response, 201);
}
EndPoint: https://findajob.ng/api/login
Email:johndeo1#gmail.com
Password: 12345678
This might not be a problem from backend, but in other-hand, if everything work in postman, you might try to:
Change support_credentials in config\cors to true.
Add withCredential header to front-end.

How can I delete the token when the user log out?

I made a UserController which generats an accessToken when a user registered succesfully on a page.
class UserController extends Controller
{
/**
* Login Method: in here we call Auth::attempt with the credentials the user supplied.
* If authentication is successful, we create access tokens and return them to the user.
* This access token is what the user would always send along with all API calls to have access to the APIs.
* Register Method: like the login method, we validated the user information,
* created an account for the user and generated an access token for the user.
*/
public function login()
{
$credentials = [
'email' => request('email'),
'password' => request('password')
];
if (Auth::attempt($credentials)) {
$success['token'] = Auth::user()->createToken('MyApp')->accessToken;
return response()->json(['success' => $success]);
}
$status = 401;
$response = ['error' => 'Unauthorized'];
return response()->json($response, $status);
}
public function register(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required',
'email' => 'required|email',
'password' => 'required',
]);
if ($validator->fails()) {
return response()->json(['error' => $validator->errors()], 401);
}
$input = $request->all();
$input['password'] = bcrypt($input['password']);
$user = User::create($input);
$success['token'] = $user->createToken('MyApp')->accessToken;
$success['name'] = $user->name;
return response()->json(['success' => $success]);
}
public function getDetails()
{
return response()->json(['success' => Auth::user()]);
}
}
My problem is that I want to remove the token when the user logs out but I dont know how to remove the access token from the user.
logout function in my UserController
public function logout()
{
Auth::user()->tokens->each(function($token, $key) {
$token->delete();
});
return response()->json([
'message' => 'Logged out successfully!',
'status_code' => 200
], 200);
}
When I test it with postman with the GET route: http://127.0.0.1:8000/api/logout. Am I missing something?
UPDATE
Here s my api.php file:
Route::resource('categories', 'App\Http\Controllers\CategoryController');
Route::post('register', 'App\Http\Controllers\UserController#register');
Route::post('login', 'App\Http\Controllers\UserController#login');
/**
* We can group the routes we need auth for
* under common middleware. It secures our routes
*/
Route::group(['middleware' => 'auth:api'], function(){
Route::get('logout', 'App\Http\Controllers\UserController#logout');
});
I am testing it in postman using the route: http://127.0.0.1:8000/api/logout and passing the Bearer token, which I get from the login request, as a value.
It should be POST Request instead of GET request, because your deleting/making change to the database.
The route should look like this:
Route::POST('logout', 'App\Http\Controllers\UserController#logout')->middleware('auth:api');
And the logout method in in UserController should be.
public function logout()
{
auth()->user()->tokens->each(function ($token, $key) {
$token->delete();
});
return response()->json([
'message' => 'Logged out successfully!',
'status_code' => 200
], 200);
}
In your logout function, it should expire the token, not delete it
public function logout(Request $request)
{
$request->user()->token()->revoke();
return response()->json([], Response::HTTP_NO_CONTENT);
}
OR if you wanna expire all his tokens:
use Illuminate\Support\Facades\Auth;
public function logout(Request $request)
{
$userTokens = Auth::user()->tokens();
foreach($userTokens as $token)
{
$token->revoke();
}
}

Laravel Vue JWT Authentication - How to automatically login the user after login

I can find anything on web getting this done. I understand a token has to be generated before a user can login, but is there a way to automatically log in the user after they register? Here my register method.
public function register(Request $request)
{
$v = Validator::make($request->all(), [
'email' => 'required|string|email|unique:users|max:255',
'password' => 'required|min:8|confirmed',
]);
if ($v->fails())
{
return response()->json([
'status' => 'error',
'errors' => $v->errors()
], 422);
}
$user = new User;
$user->email = $request->email;
$user->password = bcrypt($request->password);
$user->save();
return response()->json(['status' => 'success'], 200);
}
You are using JWT tokens so after registration you have to send a token belongs to the user which tells other API that this is the logged-in user.
Generate JWT token and return the response with token
$token = JWTAuth::fromUser($user);
return response()->json(['status' => 'success', 'token' => $token], 200);
you can use below methods
Auth::loginUsingId(1);
or
Auth::login($user);

How to check whether user is authenticated or not using jwt-auth in Laravel and Vue.js

I have created an API using Laravel 5.4 and in there I have implemented JWT authentication. Now, I'm accessing my API from Vue.js project and get the token after the login. But I don't know how to use the token for checking if user is authenticated or not. What's the workaround?
Here's the Vue.js login() method:
login() {
if(this.credentials.login && this.credentials.password) {
axios.post('http://localhost:8000/api/login', this.credentials)
.then(response => {
if(response.data.success) {
this.token = response.data.token;
}
})
.catch(error => {
console.log(error);
});
}
}
Here's the
/**
* API Login
*
* #param Request $request
* #return \Illuminate\Http\JsonResponse
*/
public function login(Request $request)
{
$credentials = $request->only('login', 'password');
$validator = Validator::make($credentials, [
'login' => 'required|min:4',
'password' => 'required|min:6'
]);
if($validator->fails()) {
$error = $validator->messages()->toJson();
return response()->json([ 'success' => true, 'error' => $error ]);
}
try {
if(!$token = JWTAuth::attempt($credentials)) {
return response()->json([
'success' => false,
'error' => 'Неверные логин или пароль.'
], 401);
}
} catch (JWTException $e) {
return response()->json([
'success' => false,
'error' => 'Не удалось создать токен.'
], 500);
}
return response()->json([
'success' => true,
'token' => $token
]);
}
By the way, API is running on http://localhost:8000/ and Vue.js project on http://localhost:8080/
You can include the token in each subsequent request after you authorize the user and get the token, there is few places you can include the token, in a request after ?token=<token> as a request param, inside of a header under Authorization: Bearer {token} and how to get the Authenticated user from that token you can check on official docs which gives you a concrete example on how to.

Resources