Challenges Integrating Vue.js and Frappe: CSRF Token Issues for External Login

Frappe Framework
, , , ,
1

I have come across several solutions in the forum, but I’m unsure if they can help me with the issue of making the first POST request when there is no active session in Frappe, and therefore, no CSRF token.

I am using an external frontend to create my web app with Vue and Frappe-UI. During development, everything works perfectly, and it connects seamlessly to the Frappe backend. I can even log in and log out without needing to use the backend’s view.

The problem arises when I move to production because enabling the CSRF token is recommended. At that point, my app starts to fail. To obtain the CSRF token, I need to have an active session. However, I want to be able to log in from my web app without having an active session, which prevents me from sending a POST request.

I am currently using Frappe’s own login method in my web app. However, the requirement of the CSRF token makes it impossible for me to use the login functionality of my web app when there is no active session.

Important details to consider are that both the frontend and backend are served on the same domain, specifically “127.0.0.1”. The Frappe bench is in production mode, and the frontend is located in a folder next to the backend. The production build is generated inside the backend’s “public/frontend” folder, and im using the latest frappe version.

To begin with, I am unsure if it is even possible to have an external login when facing the CSRF token problem.

Thanks for your time!!

2

please i need some help

3

Hi. Were you able to find a way forward? i am stuck on exactly the same point and i don’t know how to move forward

4

Hi,

When you face the CSRF Token error, create 2 files in your www folder.

  1. index.py
    Filecontents
from __future__ import unicode_literals
import frappe
from frappe.utils.telemetry import capture

no_cache = 1


def get_context(context):
	csrf_token = frappe.sessions.get_csrf_token()
	frappe.db.commit()
	context.csrf_token = csrf_token
  1. index.html, add the csrf line as below
<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="-">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="designer">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>designer</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script> window.csrf_token = '{{ csrf_token }}'; </script>
  <script src="flutter_bootstrap.js" async></script>
</body>
</html>

Hope this helps.