laravel-vue-crypto

This package integrates laravel's built in encryption service with vue. It enables to encrypt/decrypt API data between laravel back-end and vue front-end. A typical usecase is when using laravel-inertia with axios.

This package requires the APP_KEY in .env passed in while initializing

1. Install

npm i laravel-vue-crypto

2. Setup

Inside app.js

import LaravelVueCrypto from 'laravel-vue-crypto'

CONST APP_KEY = 'laravel-app-key' // laravel .env's APP_KEY
app.config.globalProperties.$LaravelVueCrypto = new LaravelVueCrypto(APP_KEY)

3. Usage

3.1 Encrypt data

this.$LaravelVueCrypto.encrypt({'id': 1})

• encrypt method always returns an object with attribute payload. payload consists the encrypted string.

{payload : 'encrypted-string'}

• now in order to decrypt the data from the laravel controller, use laravel's decrypt helper without serialization.

json_decode(decrypt($request, unserialize: false));

3.2 Decrypt data

this.$LaravelVueCrypto.decrypt(encryptedData)

• to encrypt data from the laravel controller, use encrypt helper

encrypt(json_encode($dataToEncrypt));

Example

app.js

createInertiaApp({
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })

        app.config.globalProperties.$LaravelVueCrypto = new LaravelVueCrypto(import.meta.env.VITE_APP_KEY)

        app.mount(el);
        return app;
    },
});

.vue file

const dataToEncrypt = {
    'id' : 1,
    'status' : 0
}

try {
    const res = await this.axios.post(
        route("test-route"),
        this.$LaravelVueCrypto.encrypt(dataToEncrypt)
    );

    const decryptedData = this.$LaravelVueCrypto.decrypt(res?.data?.users);
    console.log({ decryptedData });

} catch (err) {
    console.log({ err });
}

laravel controller

 public function handleTestRoute(Request $request){
    $request = json_decode(decrypt($request->payload, unserialize: false));

    // ... 

    $users = User::all();
    $users = encrypt(json_encode($users))

    return response()->json(compact('users'))
}