Securing Vaadin Router

Flow
1

Hi Guys,

I am starting to build some projects using the webcomponents vaadin router to handle client side navigation.

Is there any documentation and demo material on best practice to secure the router / routes?
I.e only enable certain routes until a client is logged in, for example.

I can’t seem to find any examples other than really basic tutorials that don’t require any authentication. This is commonplace in the Java tutorials, but I can’t find anything for webcomponents.

Right now we’re using LitElement + Vaadin for the frontend, then NodeJS (ExpressJS + Passport) for the backend / authentication. All of this works in isolation, we’re just not sure how to best wire it up to protect the front end routes.

I’m thinking if there is a callback on the router, where authentication tokens / cookies could be checked that would be ideal - but I haven’t found any examples of this.

Thanks
~Ben

2

Here’s one router configuration with authentication for a work-in-progress tutorial that might give you some ideas: https://github.com/vaadin-learning-center/crm-tutorial-typescript/blob/master/frontend/index.ts

3

I’m not sure if you’re taking this into account already, but just to be safe I’ll point out that there is no such thing as “securing” anything in the web browser. An attacker can bypass any such limitations e.g. by using the browser’s developer tools.

All the actual security must always happen on the server, e.g. by checking permissions in REST endpoints that return application data to the user or accept changes submitted by the user.

The only thing you can do with a client-side router is to improve usability by ensuring the user sees a nice message in case they’re not logged in instead of seeing the actual view with errors caused by the server refusing to return sensitive data to an unauthenticated user.

4

Yes of course you’re right about you can’t really secure the browser, API endpoints will be secured as well - we already have that functionality in place with expressJS + passport, hence not mentioned here.

We’re just figuring out how to best handle the authentication process.

I also found this demo that highlights router callbacks, which is what we’ll probably look to use.

https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-lifecycle-callbacks-demos

5

Thanks for that example Kari, I didn’t realise you could actually put logic into the router under that action function - that opens up some interesting possibilities.