❓ Vite Dev Server Shows Login Popup After Adding frappeui() Plugin

Frappe Framework App Development
1

Hi everyone,
I’m working on a custom frontend using Vue 3 and Vite in a Frappe app.
In my vite.config.js, I integrated the Frappe UI plugin like this:
import { fileURLToPath, URL } from ‘node:url’
import frappeui from “frappe-ui/vite”;
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import vueDevTools from ‘vite-plugin-vue-devtools’

// Configuring Vite | Vite
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
frappeui()
],
resolve: {
alias: {
‘@’: fileURLToPath(new URL(‘./src’, import.meta.url))
},
},
optimizeDeps: {
include: [“frappe-ui > feather-icons”, “showdown”, “engine.io-client”],
},
});
After adding frappeui(), every time I run npm run dev, the dev server launches fine but a login popup appears (from Frappe), even though I’m just testing the frontend.

:warning: My Questions:

  1. Why does the login popup appear **just by adding frappeui()?
  2. Is there a way to **disable that behavior during development?
2

Hi @SaadKhan,

If you installed frappe-ui with doppio, it automatically creates a router.js file, that checks if you are logged in to your Frappe site (Think about it as a basic Auth service).

The code is something like this:

router.beforeEach(async (to, from, next) => {
	let isLoggedIn = session.isLoggedIn
	try {
		await userResource.promise
	} catch (error) {
		isLoggedIn = false
	}

	if (to.name === "Login" && isLoggedIn) {
		next({ name: "Home" })
	} else if (to.name !== "Login" && !isLoggedIn) {
		next({ name: "Login" })
	} else {
		next()
	}
})

You can login via Desk or the custom Login Page (if you did not complete installation wizard then: Administrator and <your admin password> is the username, password). Either way the auth tokens are stored in your browser.

My custom Login page after: bench add-frappe-ui

custom login page
custom login page1114×456 9.04 KB

If you want to disable this behavior, than remove the code mentioned above and delete the Login page.

I hope this answered both of your questions,
Alex