Update 28/09/2024.

This repo has served it's purpose and will be archived with no plans to contribute further.

If you are interested in the continuation of this project, efforts are now focused on rebuilding a complete open source solution with full intergration into Enterprise ecosystems.

You can visit the Pest Control Standalone Reporting Form repository to stay up to date on this endavour.

Intro

This is a Next.js project bootstrapped with create-next-app.

This project should not be used in production settings.

The main purposes of this repository is to show an implementation of Azure/Entra Single Sign On using Next.js for a Single-page application but in this example I have locked the authenticated content behind another component to demonstrate the easiest MVP for implementation. It is a basic MVP to demonstrate one type of implementation for Azure/Entra Single Sign On with Next.js applications.

This project also makes a few assumptions:

• You do not have an existing data source or line of business system, so you require a stand alone system.
• Microsoft Entra is the only acceptable autentication - all users are authenticated against your own Entra directory.
• Roles/Scopes are Manager/Operative and have different views, you should have full access to the Azure portal to configure this.

To do list

• Fix/test profile picture import for navbar
• Move database calls to API calls via PostgREST/postgrest (experimental)

Demo/screenshots

You can view a demo of this implementation via https://pest-control-management-system.vercel.app but note you will not be able to login as it authenticates against my own Azure resources - download this project, update the config.jsx file with your values and you can test this locally.

User flow: Land on login page

Authenticate against Entra Directory -> Get scope/role from App Role (Manager/Operative)

Redirect to dashboard.

Requirements & Getting Started

• Microsoft Entra Application - you can see the full guide here
• Sign up for a free E5 Sandbox and sign into Entra Admin with your new Organsational account.
• Update the config.jsx file with your organsation's values.
• Populate your DB with the scripts in /db-demo-scripts/dashboard.sql
• Update components/auth/postgres-stuff file
• The application will now use dummy data generated by the script to populate the views.
• Download this repository and run npx next in the downloaded directory to run a dev server. Open http://localhost:3000 to see results, you can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
• When your ready for production deploy on local/internal tech stack for best practice, publicly hosted infrastructure should be used when Enterprise level SLAs can be agreed.