Adding "async" to the class declaration makes Hilla lose its HTML insertion tag

Hilla
1

I might use the wrong wording here but I hope you understand what I mean.

In an effort to try to relay Spring Security into Hilla, I tried to follow this doc.
https://hilla.dev/docs/react/guides/security/authentication

But this will force you to add the word “async” in the class declaration, which will make Hilla lose its HTML insertion tag.
Is this expected?

Please note that this is not the entire class that is unnecessary because Hilla fails to compile as soon as you add “async” to the class declaration!

export default async function MainView() {

const username = MyAppEndpoint.checkUser();

if (“anonymousUser” === await username) {
console.log(‘You are an anonymous user’);
} else {
console.log('Your username is: ’ + username);
}
image.png

2

That is not possible. The component producing React functions can’t be async. Instead you need to add useEffect hook in your MainView function and call that async end-point function upon the first rendering of the component. Also you need to use useState for the username

const [username, setUsername] = useState(“unknown”);

useEffect(() => {
(async () => {
setUsername(await MyAppEndpoint.checkUser());
});
}, );

3

@yummy-rhino Thank you so much for your response. I will try to if I can get it to work.