user Authentication using Vue and API - Lravel 6

If you want to make it easy for yourself you can use inertiajs as a bridge between laravel and vue

https://inertiajs.com/

@jinsonjose upgrade to Laravel 7 and use Airlock: https://laravel.com/docs/7.x/airlock

i already tried but in my project already installed some packages its not supported in upgradind to 7 that why i i ask for laravel6

@jinsonjose Airlock also supports Laravel 6.9 or later: https://github.com/laravel/airlock/blob/1.x/composer.json#L19

@sinnbeck is that solution?? i will try and back u soon

thanks for the suggestion

also any tutorial please give suggestions

@sti3bas

is it?

{ "name": "laravel/laravel", "type": "project", "description": "The Laravel Framework.", "keywords": [ "framework", "laravel" ], "license": "MIT", "require": { "php": "^7.2", "fideloper/proxy": "^4.0", "laravel/framework": "^6.2", "laravel/tinker": "^2.0" }, "require-dev": { "facade/ignition": "^1.4", "fzaninotto/faker": "^1.9.1", "laravel/ui": "^1.0", "mockery/mockery": "^1.0", "nunomaduro/collision": "^3.0", "phpunit/phpunit": "^8.0" }, "config": { "optimize-autoloader": true, "preferred-install": "dist", "sort-packages": true }, "extra": { "laravel": { "dont-discover": [] } }, "autoload": { "psr-4": { "App\": "app/" }, "classmap": [ "database/seeds", "database/factories" ] }, "autoload-dev": { "psr-4": { "Tests\": "tests/" } }, "minimum-stability": "dev", "prefer-stable": true, "scripts": { "post-autoload-dump": [ "Illuminate\Foundation\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi" ], "post-root-package-install": [ "@php -r "file_exists('.env') || copy('.env.example', '.env');"" ], "post-create-project-cmd": [ "@php artisan key:generate --ansi" ] } }

this is my composer.json is it support with this ?

@jinsonjose yes, just run composer require laravel/airlock. If you will get an error, then run composer update to update Laravel to the latest 6.x version.

@sti3bas

kk sure update the result soon

thanks dude for the support

@sti3bas

shows error on getting user details

GET http://127.0.0.1:8901/api/user 401 (Unauthorized)

Home

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="collapse navbar-collapse">
            <div class="navbar-nav">
                <button v-if="!loggedIn" @click="login">Login</button>
                <div v-else>
                    <button @click="getUser">Get User</button>
                    <button @click="logout">Logout</button>
                </div>
            </div>
        </div>
    </nav>
    <br/>
    
</div>

import axios from 'axios'; axios.defaults.withCredentials = true; export default { data() { return { loggedIn:localStorage.getItem('loggedIn') == 'true' } }, methods: { login() { axios.get('/airlock/csrf-cookie').then(response => { axios.post('/api/login',{ email : 'jinsonjose007@gmail.com', password : '123456' }) .then(res => { localStorage.setItem('loggedIn','true'); this.loggedIn = 'true'; console.log(res); }) }); }, logout() { axios.post('/api/logout') .then(res => { localStorage.removeItem('loggedIn','true'); this.loggedIn = 'false'; }); }, getUser() { axios.get('/api/user').then(res => { console.log(res.data); }); } }, };

hit this route shows unauthorized

Route::middleware('auth:airlock')->get('/user', function (Request $request) { return auth()->user(); });

login and logout successfull why its happen??

can you help