Demo App Walkthrough
Understanding the Demo App Source
This is a full demonstration of a real-world web application, complete with SQL database, front-end state management, and a Component Library(MaterialUI). The vast majority of the code is just normal application code, like in any other web app. Only a small part is LunaDefend Specific.
Folder Structure
The Demo is separated into two applications, the front-end and back-end in the demo apps folder.
The apps are really multiple apps, one for each of the different modes. We wanted to reuse as much code as possible,
which lives in the common
folders of each app. Only code that needs to be different for each demo is broken into
folders like /src/dedicated-tokenizer/passport-express.
That's a bit confusing but this needs to be maintainable, and we also wanted use it for integration testing.
Front-end
The frontend modes that use the dedicated-tokenizer
are virtually identical. Almost all of their code lives in common
.
All frontend features work the same regardless of whether express, graphql, or some other transport layer is used.
The only difference is how the tokens (and other data) are fetched (which happens inside the store
file).
You can see the Secure Components being used here.
To see the LunaDefend Provider wrapping the components, look here.
Note the use of the SecureInput
element
natively with MaterialUi.
The simple
tokenizer has a different developer experience because it doesn't use Secure Frames.
Getting and storing tokens is done with JavaScript methods,
like this.
It shares no code with the other demos.
Back-end
The Backend launches each mode as a separate Express server running in parallel on different ports, starting from 3001. You can see that happening in the server's entrypoint. From there you can trace through and see how the different apps are configured.
For an example of LunaDefend's Node SDK being configured, look here.
To see an Express Route properly creating and checking grants, look here.
This demo is made to simulate a production application, not be one. Please use concepts or snippets from it in your code, but we do not recommend cloning it directly or using it as a measuring stick for good library and technology choices. In particular Passport(the auth library) was chosen because it is popular, not because we recommend it. LunaDefend will work with any auth system in exactly the same way as shown here with passport.