Conclusion
Throughout this learning module, we learned the basics of securing a Next.js SPA by adding SSL certificates, implementing SSO using Microsoft Azure, adding security headers and encrypting data stored in the browser’s local storage. You created a demo website using Next.js and MUI components to contains the following features:
- SSL certificates
- Sign in users using a popup or redirect
- Request a user’s profile information
- Lock access to page using
PermissionGate - Sign users out using a popup or redirect
- HTTP security headers
- Secure local storage
While we only scratched the surface of what you can do to enhance web security, we hope that this learning module provided you with the basic knowledge needed to secure your SPA and authenticate users.
We recommend the following resources if you want to learn more about Microsoft Azure and its libraries, Next.js and Material UI:
- Microsoft Identity Platform Documentation
- Azure Single-page Application (SPA) Documentation
- The Official Next.js Docs
- The Official MUI Documentation
- react-secure-storage Documentation
- HTTP Headers Scanner
- Local Storage vs Cookies: Where to securely store data on the client-side?
- Why Cookie is preferable compared to localStorage when it comes to authentication
- Difference Between Local Storage, Session Storage And Cookies - GeeksforGeeks
The final version of this demo website is available on GitHub: macid-authentication-example