I can encrypt in Laravel and decrypt in VueJS but I can't do the opposite.

Important notice: If I encrypt the data, send, save them to db, fetch them back and decrypt them with CryptoJS it works fine. If I have decrypted data with Crypt, fetch them and decrypt them also works. The only thing it doesn't is if I encrypt the data using Crypto and decrypt them with Crypt. 🤯

Never mind people, I fixed my issue, it wasn't relevant to Laravel but to VueJS. I had an issue on encrypt method there. I made an implementation using Huzemin's code found here: https://gist.github.com/huzemin/e8d7a904cec55d4d7635c9322f143c42 and resolved my problem. <3

Happy coding people!

You do know that the payload already is encryoted when you use SSL, so this is completely unnecessary.

Researching on how to implement "end-to-end" encryption for my app, I made these notes:

Implementing end-to-end encryption between a Laravel backend and a Vue.js frontend involves several steps.

1. Generate Encryption Keys: Begin by generating encryption keys for use in your application. You can use Laravel's built-in encryption facilities for this purpose. Laravel uses the OpenSSL library to handle encryption. Laravel's encryption relies on the APP_KEY value in your .env file.

2. Install Laravel Sanctum: Laravel Sanctum provides a simple package for API token authentication.

3. Implement API Routes: Set up API routes in Laravel to handle data exchange with the Vue.js frontend. Define routes for authentication and data retrieval/update.

4. Implement Encryption/Decryption in Laravel: When sending sensitive data to the frontend, encrypt it using Laravel's encryption facilities. Use Laravel's encrypt() and decrypt() functions to handle encryption and decryption respectively.

5. Set Up Vue.js Frontend: Install Axios or another HTTP client for making API requests. Implement the necessary API calls to communicate with the Laravel backend. Ensure you have a secure method for storing any sensitive data on the frontend, such as using Vuex or local storage.

6. Encrypt Data in Frontend (Optional): If you need end-to-end encryption, you'll also need to implement encryption in the frontend. Use JavaScript libraries like CryptoJS or Web Crypto API for encryption/decryption. Encrypt sensitive data before sending it to the backend and decrypt it upon retrieval.

7. Secure Communication: Ensure that your API endpoints are accessed over HTTPS to secure data in transit. Use CSRF protection in Laravel to prevent Cross-Site Request Forgery attacks.

8. Testing and Debugging: Test your implementation thoroughly to ensure that data is encrypted and decrypted correctly on both ends. Use tools like Postman or Vue DevTools for debugging API requests and responses.

9. Handle Key Management: Ensure proper key management practices are in place for storing encryption keys securely. Consider using dedicated key management solutions if handling highly sensitive data.

10. Documentation and Maintenance: Document your encryption implementation for future reference and maintenance. Regularly review and update your encryption methods to adapt to evolving security threats.

So for the 6th step "Encrypt Data in Frontend (Optional)" it really says optional but I need the END-TO-END functionality. I guess you are referring the 7th step if I am not mistaken.

Hey, so I need to implement end to end encryption so I need to encrypt and decrypt in client side, but the problem is in key management , how were you able to store and use key securely in client side ??? Hope someone would answer!!