Skip to main content

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.

demo screenshot tokenization

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.

simple screenshot

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.

Production Readiness and Library Choices

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.