[Solved] (Beginner) Adding Custom Login View, browser Connection Lost freeze

Firstly I would like to mention that I am a beginner so I would like to apologize in advance if this is a repeated topic, but i have tried to find threads and other posts with this issue, maybe I’m not searching correctly.

I have a personal project with Vaadin Flow 23.2.9 that contains a Bing Maps Implementation (needs a Bing Maps API key), that seems to have something in relation to this issue.

I am trying to add a Custom Login View to my project, but the frontend is not generated, and the browser throws the errors (first image), clicking to see the origin of the first error for login:22 redirects to the generated Vaadin index.html (second image) where I hardcoded the source of the script for the *.js Bings Map implementation file in the index.html file, in the frontend/map-view-partial.js, second, third and fourth console errors point in the same generated Vaadin index.html file (third image)
After closing and re-opening the browser Console tab (fourth image) all console errors point to an empty generated file in the Source tab (fourth image)

This issue seems harder to explain as it involves Spring Security, from my research so far I have also found that it has something to do with Server Push, a concept that is not familiar to me.

I have also attached txt files with SecurityConfig, SecurityService, EventMainView, LogInView

If you’d like a broader view on this, I have also shared the repo below in the branch ‘Vaadin_Custom_LogIn’ where this issue is encountered:
https://github.com/RShumy/Event-Organizer-Vaadin/tree/Vaadin_Custom_LogIn

I would greatly appreciate any assistance and clarification on this issue, but I can’t figure this thing out. I’m not sure if this is a real issue, but I believe I’m doing something wrong.
image.png
image.png
image.png
SecurityConfig.txt (2.29 KB)
SecurityService.txt (1.19 KB)
EventMainView.txt (3.15 KB)
LogInView.txt (781 Bytes)

this should be the second image
image.png

You are mixing two concepts. Extending VaadinWebSecurity and creating your own SecurityFilterChain - this results in a Desaster If you don’t know what you do. Please follow the official documentation and override the mentioned methods there instead of creating your own filter - this should fix all problems

I have changed this and followed the official Documentation from Vaadin v23 and now I’m Overriding the configure method. Except for fixing the MIME error by changing the manually referenced javascript file in the frontend/index.html from type=“text/javascript” to type=“module”, the same errors are thrown, pointing to the same places in the generated index.html

(Beginner) Adding Custom Login View, browser throws GET localhost:8080/login net::ERR_ABORTED 404

Please update your git repo. I’ve got the feeling you also have two different problems. The authentication and your usage of the external js lib. Focus on one instead of two at the same time

Removed the hardcoded js reference from the index.html, and left only the @JSModule annotation in the MapView, this fixed the GET localhost:8080/login net::ERR_ABORTED 404 console error. The MapView still works just with the @JSModule annotation, after switching back to standard login page, provided by Spring Security.

Also updated my git repo, didn’t realize the repo wasn’t updated when i created the branch and pushed to origin

When trying to add the Custom LogInView, only these two Errors remain in the console, and the browser is showing Connection Lost.
image.png

Remove your custom authorizeRequests() block

Thank you so much, this works fine now.

[Solved] (Beginner) Adding Custom Login View, browser Connection Lost freeze

@quirky-zebra Wish you a bright and wonderful 2024!