Building for Cybersecurity: A Deep Dive into Our Pangea Securathon Project

Introduction:

Looking to effortlessly build a cool and secure app? Look no further than Pangea tech! In this month's hackathon, I utilized Pangea to craft a project centered around the security of the users and sustainable tourism. Join me in discovering how Pangea can swiftly turn your ideas into reality while ensuring they're secure and impressive!

Project Description:

I'm working on a web app called E-Tourism Uganda. Our goal is to make your Uganda adventure unforgettable while promoting responsible travel. Our team is passionate about Uganda's beauty and culture. We offer services for wildlife safaris, camping gear, and tourist vans. Our focus is on creating memorable and eco-friendly experiences.

With Pangea's AuthN service, we ensure secure and customized authentication for users, including features like social logins and multifactor authentication.

Technologies:

The web app smoothly combines React for the frontend, Pangea for secure authentication, and Tailwind CSS for a clean style. Pangea is known for its innovative and secure API-based security services, ensuring user protection and compliance with security standards while swiftly blocking potential threats. Together, React, Pangea, and Tailwind CSS create a secure, visually appealing, and agile application experience.

Navigating Challenges and Solutions in the Hackathon Journey:

Throughout the hackathon, I encountered various challenges that put my problem-solving skills to the test. Initially, getting started posed a significant hurdle. To overcome this, I adopted a step-by-step approach, focusing on building the frontend before integrating with Pangea. This strategy helped me establish a clear plan.

The next obstacle arose when choosing among Pangea's technologies. Seeking advice during open office hours proved invaluable, leading me to start with the Authn service. You can find the Slack channel for further discussions here: https://pangea.cloud/join-slack/

While working on my project, I faced errors, including a tricky 'bad session' issue. Turning to the supportive community on Slack, I received valuable guidance to overcome these challenges. This entire experience reinforced the importance of adaptability, strategic decision-making, and relying on community support to navigate the complexities of the hackathon.

Project Development:

Architecture Diagram

In this diagram, you access the application through a URL. The user interface is created with React, using a combination of MVC architecture, JSX for HTML, Tailwind CSS for appearance, and JavaScript for functionality. When you click the Login/Signup button, the interface connects with Pangea using AuthN APIs, Domain, Client token, and a custom interface. These elements enable features like Multifactor Authentication and social login, accessible through the hosted Login Page. The Pangea dashboard then displays a list of signed-in users.

Step-by-Step Guide: Implementing and Managing Pangea Authentication for Your Application

To begin using this service, start by creating an account at https://pangea.cloud/. Once registered, you'll be guided to establish a new organization on your chosen cloud service provider, where you can also assign a name to your project. Click Next

You'll arrive at a page where you can explore various services. Choose one that interests you, and a modal will provide details on its functionality. Click "Done" when you're ready to try out the service firsthand.

I opted for the redact service, designed to eliminate sensitive information from user data. After achieving the desired output, I proceed to click "Finish."

Upon reaching the dashboard, you'll notice your initial $5.00 credits in your account. Navigate to the left-hand panel and click on the "Authn" tab. This action will open the token creation modal, enabling you to generate a token for use in endpoint calls and SDKs to access Pangea's AuthN APIs. Adjust the token's scopes, set an expiration time, or securely manage it with Pangea's Vault service. Once configured, click "Next."

All authentication methods are enabled by default. Feel free to disable any unnecessary ones and leave enabled those you require. Once done, click "Done."

Give the service a try, and make sure to click "Finish" – voila! Now you have your hosted login page. Returning to the AuthN service or navigating within it allows you to access various functionalities: view application users, invite new users, and review invited users. Explore features such as hosted login, API exploration, settings adjustments, and much more.

You can further customize your authentication experience by navigating to SETTINGS and selecting Branding.

The page above offers customization options for your domain, branding, and messaging. Let's delve into one of these features—Branding. Click "View Project Branding," and you can modify various elements, including the name, logo, favicon, font, color, heading, and more, according to your preferences.

As an illustration, choose "Browserflix" from the preset configurations, save your selection, and return to your web app.

Returning to our web app, you'll notice that the Browserflix preset has been applied throughout our application. To proceed, sign up to create your account.

Users can sign up using Google or email, with a requirement for a robust password. The presence of a captcha ensures human verification. These authentication methods were specifically chosen to enhance the security of our application.

Following that, users can personalize their profile by entering their last name and first name. There is implemented error handling for cases where required fields are left empty, displaying a helpful "Required" message.

Upon clicking submit, users are prompted to verify their email.

After successful verification, users need to confirm their identity during login by entering a code sent to their email.

With successful authentication, the next step is to redirect users to the desired page. Achieve this by navigating to SETTINGS > General > Redirect Settings.

To add a redirect, click on the plus (+) sign, and then enter the desired domain for the page to navigate to.

To integrate this service with your preferred programming language, utilize either the provided REST endpoints or the available SDKs in various languages found on Pangea's GitHub repository: https://github.com/pangeacyber. Installations are detailed in the respective readme files.

Additionally, you can also check out the step-by-step guide on YouTube: Watch the Tutorial.

As you can see, I can effortlessly keep track of the user count for my application. To view the final result of our work, click here.

Open Source Contribution:

We're excited to welcome contributions to our project! The codebase is publicly hosted on GitHub under the MIT license, emphasizing collaboration and innovation in sustainable tourism.

To get involved, visit our GitHub repository at https://github.com/joanita-51/sustainable-tourism. You'll discover the entire codebase and detailed guidelines on how to contribute. Whether you're a developer, designer, or enthusiast, your contributions can make a meaningful impact.

We strongly believe in the transformative power of open source. By sharing our work, we aim to inspire others and provide a platform for collective problem-solving. Let's shape a more sustainable future together. Join us on GitHub and become a part of this exciting journey!

Demo and Screenshots:

Experience our innovative application live on Netlify: Application link

Explore our secure login page powered by Pangea Cloud: Login Page

Future Plans:

In the next steps, we're adding a new booking feature. It will be easy to use with a dashboard and cool pictures of places you can book. This will make booking simpler and more interesting.

We're also keeping track of the places you book, so you have a list of them. This makes using our service more personalized and efficient.

Your thoughts are really important to us. We're working closely with users like you to add more features that you want. Your feedback helps us make the service better, just the way you like it.

Acknowledgments:

I extend my sincere gratitude to the E-Tourism team for their exceptional work on the E-Tourism application. Special thanks to the Pangea team for developing a secure platform, and heartfelt appreciation to the Hashnode team for organizing this hackathon. Your support and guidance have been invaluable.

Conclusion:

My journey with this project has been enriching—filled with learning, innovation, and the joy of sharing knowledge. It has significantly enhanced both my coding and problem-solving skills. I strongly urge everyone to keep an eye out for upcoming hackathons, whether from Hashnode or elsewhere. Additionally, consider contributing to open-source projects; the experience is not just about giving back, but a continuous learning process that expands your horizons in ways you might not expect.

Call to Action:

Let's not stop here; I invite you to check out the project, share your thoughts, and get involved in the open-source community. I'm also open to any feedback and look forward to connecting with each one of you. Don't hesitate to reach out and let's make this a collaborative experience!

Until we meet again! Wishing you a joyful time ahead! 🌟

#PangeaSecurathon #Pangea