Laravel Nuxt Cli Sanctum authentication Laravel part

Author: Khokon9363

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

.env.example

@@ -0,0 +1,52 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=base64:XK6W/zLOJtinBw46z73My+Zp5Evd//QfQoetMsnR4FQ=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=laravel
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS=null
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+# Laravel Domain
+SESSION_DOMAIN=localhost
+
+# Nuxt Domain
+SANCTUM_STATEFUL_DOMAINS=localhost:3000

.gitattributes

@@ -0,0 +1,5 @@
+* text=auto
+*.css linguist-vendored
+*.scss linguist-vendored
+*.js linguist-vendored
+CHANGELOG.md export-ignore

.gitignore

@@ -0,0 +1,12 @@
+/node_modules
+/public/hot
+/public/storage
+/storage/*.key
+/vendor
+.env
+.env.backup
+.phpunit.result.cache
+Homestead.json
+Homestead.yaml
+npm-debug.log
+yarn-error.log

.styleci.yml

@@ -0,0 +1,13 @@
+php:
+  preset: laravel
+  disabled:
+    - unused_use
+  finder:
+    not-name:
+      - index.php
+      - server.php
+js:
+  finder:
+    not-name:
+      - webpack.mix.js
+css: true

README.md

@@ -0,0 +1,178 @@
+## Laravel & Nuxt CLI Authentication - Laravel Part
+
+A. Install & setup Sanctum
+
+   1) composer require laravel/sanctum
+   2 ) php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
+   3 ) php artisan migrate
+   4 ) EnsureFrontendRequestsAreStateful::class in Karnel.php
+
+B. .env
+   **Laravel Domain**
+   SESSION_DOMAIN=localhost
+
+    **Nuxt Domain**
+    SANCTUM_STATEFUL_DOMAINS=localhost:3000
+
+C. routes/api.php
+    Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
+        return $request->user();
+    });
+    // Login & Logout routes
+    Route::post('/login', 'Auth\LoginController@login');
+    Route::post('/logout', 'Auth\LoginController@logout');
+
+D. config/cors.php - replace
+    'paths' => ['api/*', 'sanctum/csrf-cookie'],
+                  into
+    'paths' => ['api/*'],
+
+E. App/Users.php
+    use HasApiTokens
+
+F. App/Http/Controllers/Auth/LoginController.php
+    public function login(Request $request)
+    {
+        $request->validate([
+            'email'    => 'required',
+            'password' => 'required'
+        ]);
+        if (!Auth::attempt($request->only('email', 'password'))) {
+            throw new AuthenticationException();
+        }
+        return $this->jsonResponse(true, auth()->user(), 200);
+    }
+
+    public function logout()
+    {
+        if (auth()->check()) {
+            Auth::logout();
+            return $this->jsonResponse(true, 'Logged out successfully', 200);
+        }
+        return $this->jsonResponse(true, 'Something went wrong', 404);
+    }
+
+    private function jsonResponse($success, $data, $status)
+    {
+        return response()->json([
+            'success' => $success,
+            'data'    => $data,
+        ], $status);
+    }
+
+
+## Nuxt / Vue cli
+A. login.vue
+    1 ) import axios from 'axios'
+    2 ) axios.defaults.withCredentials = true
+    3 ) make an helper function - laravelCsrfCookies()
+        every time before any function call this function and return true .
+            
+            methods: {
+                laravelCsrfCoockie() {
+                    axios.get(this.baseURL + 'sanctum/csrf-cookie').then((response) => {
+                        return true
+                    })
+                },
+                login() {
+                this.laravelCsrfCoockie()
+                    axios
+                        .post(this.baseURL + 'api/login', {
+                        email: this.email,
+                        password: this.password,
+                        })
+                        .then((res) => {
+                        localStorage.setItem('me', JSON.stringify(res.data))
+                        this.loggedIn = localStorage.getItem('me')
+                        this.userName = JSON.parse(localStorage.getItem('me')).data.name
+                        console.log(this.loggedIn)
+                        })
+                        .catch((err) => {
+                        console.log(err)
+                        })
+                },
+                logout() {
+                this.laravelCsrfCoockie()
+                axios
+                    .post(this.baseURL + 'api/logout')
+                    .then((res) => {
+                    localStorage.removeItem('me')
+                    this.loggedIn = null
+                    this.userName = 'Guest User'
+                    console.log(this.loggedIn)
+                    })
+                    .catch((err) => {
+                    console.log(err)
+                    })
+                },
+
+
+B. Demo Login.vue
+    <template>
+    <div>
+        <button v-if="!loggedIn" @click="login">Login</button>
+        <button v-else @click="logout">logout</button>
+        <h1 v-if="userName">{{ userName }}</h1>
+    </div>
+    </template>
+    <script>
+    import axios from 'axios'
+    axios.defaults.withCredentials = true
+
+    export default {
+    data() {
+        return {
+        email: '[email protected]',
+        password: 'password',
+        baseURL: 'http://localhost:8000/',
+        loggedIn: localStorage.getItem('me'),
+        userName: localStorage.getItem('me')
+            ? JSON.parse(localStorage.getItem('me')).data.name
+            : 'Guest User',
+        }
+    },
+    mounted() {
+        console.log(this.loggedIn)
+    },
+    methods: {
+        laravelCsrfCoockie() {
+        axios.get(this.baseURL + 'sanctum/csrf-cookie').then((response) => {
+            return true
+        })
+        },
+        login() {
+        this.laravelCsrfCoockie()
+        axios
+            .post(this.baseURL + 'api/login', {
+            email: this.email,
+            password: this.password,
+            })
+            .then((res) => {
+            localStorage.setItem('me', JSON.stringify(res.data))
+            this.loggedIn = localStorage.getItem('me')
+            this.userName = JSON.parse(localStorage.getItem('me')).data.name
+            console.log(this.loggedIn)
+            })
+            .catch((err) => {
+            console.log(err)
+            })
+        },
+        logout() {
+        this.laravelCsrfCoockie()
+        axios
+            .post(this.baseURL + 'api/logout')
+            .then((res) => {
+            localStorage.removeItem('me')
+            this.loggedIn = null
+            this.userName = 'Guest User'
+            console.log(this.loggedIn)
+            })
+            .catch((err) => {
+            console.log(err)
+            })
+        },
+    },
+    }
+    </script>
+
+**You can use this starter project for to remove the hasslement of Laravel & Sanctum/Vue Cli**

app/Console/Kernel.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Console;
+
+use Illuminate\Console\Scheduling\Schedule;
+use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
+
+class Kernel extends ConsoleKernel
+{
+    /**
+     * The Artisan commands provided by your application.
+     *
+     * @var array
+     */
+    protected $commands = [
+        //
+    ];
+
+    /**
+     * Define the application's command schedule.
+     *
+     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
+     * @return void
+     */
+    protected function schedule(Schedule $schedule)
+    {
+        // $schedule->command('inspire')->hourly();
+    }
+
+    /**
+     * Register the commands for the application.
+     *
+     * @return void
+     */
+    protected function commands()
+    {
+        $this->load(__DIR__.'/Commands');
+
+        require base_path('routes/console.php');
+    }
+}

app/Exceptions/Handler.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Exceptions;
+
+use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Throwable;
+
+class Handler extends ExceptionHandler
+{
+    /**
+     * A list of the exception types that are not reported.
+     *
+     * @var array
+     */
+    protected $dontReport = [
+        //
+    ];
+
+    /**
+     * A list of the inputs that are never flashed for validation exceptions.
+     *
+     * @var array
+     */
+    protected $dontFlash = [
+        'password',
+        'password_confirmation',
+    ];
+
+    /**
+     * Report or log an exception.
+     *
+     * @param  \Throwable  $exception
+     * @return void
+     *
+     * @throws \Exception
+     */
+    public function report(Throwable $exception)
+    {
+        parent::report($exception);
+    }
+
+    /**
+     * Render an exception into an HTTP response.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Throwable  $exception
+     * @return \Symfony\Component\HttpFoundation\Response
+     *
+     * @throws \Throwable
+     */
+    public function render($request, Throwable $exception)
+    {
+        return parent::render($request, $exception);
+    }
+}