Successful login routes to error page

Flow
1

After login, it goes to the page. If I type in the url for a permitAll page, it displays correctly. I reverted back to the basic project from Start.vaadin.com.

http://localhost:8080/@fontsource/noto-serif-tc/index.css?continue

My home page is AnonymousAllowed and a Videos page which is permitAll. From the home page, I click on the video button, it will redirect to the login page. After log in, it redirects me to the url above.

BTW, I’m using Vaadin 24

SecurityConfiguration.java
EnableWebSecurity
Configuration
public class SecurityConfiguration extends VaadinWebSecurity {

Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}

Override
protected void configure(HttpSecurity http) throws Exception {

  http
     .authorizeHttpRequests(authorize -> authorize
        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.GET, "/icons/**")).permitAll()
        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.GET, "/images/**")).permitAll()
        .requestMatchers(AntPathRequestMatcher.antMatcher(HttpMethod.GET, "/line-awesome/**")).permitAll()
     );

  super.configure(http);
  setLoginView(http, LoginView.class);

}
}

1 Like
2

I do not fully understand your question. But can you please show your security configuation class?

3

I found my error. there were some unused and missing css in the style.css file. Once I removed them, the routing worked.

Thank you.

2 Likes
4

Hey John. I’m getting the same error from a new project I just downloaded from the Vaadin app creator. Can you share your fix?

I see, for example, that there’s an error on this line in styles.css:

@import url('@fontsource/source-sans-pro/index.css');

I could remove it, but that is the font family I set in the app creator. Maybe it’s actually a bug?

1 Like
5

I think the issue is that the style.css in the theme folder does not have access to npm packages.

You may need to use Loading Styles, Fonts & Images from npm Packages.

1 Like
6

Thanks, I’ll try that. My code is an uncompilable state right now so I can’t start the app to test, but I will soon.

7

That did it for me. So, I have had to fix this on two new projects. Should I submit an issue? This must be happening to everyone who tries to change the font on a new project created with the app creator.

8

Only if you want to use fonts from non packages. You could copy the font files or use fonts from a CDN or Google Fonts, that’s what I usually do

9

I’m just using a font family set by the app builder.

2024-10-06 at 07.43.22@2x
2024-10-06 at 07.43.22@2x796×656 50.6 KB

10

In the past I had problems with serving fonts correctly. Mostly using css fonts by adding into the theme folder did work for Chrome but not for Firefox or Safari. Maybe I did something work is it fixed in the meanwhile.
With adding fonts to static context I had no problems across all browser.

What I normally do with my Vaadin (or Vue) projects, is:

    @font-face {
        font-family: "Roboto";
        src: url("/fonts/Roboto-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
  • Add the font.css and fonts to the static context like in Vaadin here or in Vue to the public folder.
  • Add the font.css to index.html
<link rel="stylesheet" href="/font.css">
11

For Vaadin I recommend importing the font.css in the styles.css

@import url('font.css');