updated headings

certificates.md

@@ -4,13 +4,13 @@ title: SSL Certificates
 nav_order: 4
 ---
 
-## SSL Certificates
+# SSL Certificates
 
 SSL certificates are a small data files that cryptographically establish an encrypted link between a web server and a browser. SSL certificates help protect user data by keeping it private and ensuring that this information is passed securely between the web server and browser using the encrypted link. By using SSL certificates on your website, you can prevent hackers from intercepting a user's private information after it has been submitted to the server. SSL certificates are considered a security requirement for most modern websites. As such, the University Technology Services (UTS) at McMaster requires web applications that want to use SSO to have SSL certificates as well. 
 
 Before registering your SPA on the Microsoft Azure Directory, you will need to request SSL certificates from UTS. This section of the learning module will guide you through the process of generating the required files to request SSL certificates and setting up those certificates on your dockerized Next.js application. 
 
-### Create CSR with OpenSSL
+## Create CSR with OpenSSL
 
 A Certificate Signing Request, CSR, is a file you obtain to request an SSL certificate from a Certificate Authority.
 
@@ -30,13 +30,13 @@ openssl> req -new -key server.key -out server.csr
 
 You will be prompted to enter your organization information and one critical attribute, common name. The common name is the fully qualified domain name (FQDN) of your server.
 
-### Submit CSR to Certificate Authority
+## Submit CSR to Certificate Authority
 
-#### Create a Support Ticket With UTS
+### Create a Support Ticket With UTS
 
 Once you have the CSR file ready, you can start a support ticket with UTS using the [Technology Services Jira Portal](https://macservicedesk.mcmaster.ca/plugins/servlet/desk/portal/742). Click on "Submit an IT Request" and fill out the form. Make sure to mention that you are requesting a certificate for your website and that you already generated the CSR file. Remember to attach the CSR file to the ticket before submitting it. 
 
-#### Submit Certificate Request Using Sectigo Console
+### Submit Certificate Request Using Sectigo Console
 
 Assuming you have the permission and credentials for managing certificates using the Sectigo Console, sign onto Sectigo Console and select the SSL Certificates section. Click the green “add+” button. You will then be prompted to select an enrolment method.  
 
@@ -57,7 +57,7 @@ Next, upload the CSR file. After the CSR is uploaded, review the content embedde
 
 Finally, accept the EULA terms and conditions to complete the request process. This will put the certificate in the queue waiting for approval. For more detail, please visit [McMaster Information Security website](https://informationsecurity.mcmaster.ca/certificate-request-process-for-sectigo-console-users/).  
 
-### Using the SSL Certificates
+## Using the SSL Certificates
 
 When your SSL certificates are ready, you will receive an email from Sectigo with links to download these certificates in various formats. We recommend using the "Certificate (w/ issuer after), PEM encoded" format.  
 

local-storage.md

@@ -4,13 +4,13 @@ title: Secure Local Storage
 nav_order: 7
 ---
 
-## Securely Storing Data in Local Storage in a Next.js SPA
+# Securely Storing Data in Local Storage in a Next.js SPA
 
 Local storage is a type of client-side web storage that allows web applications to store data locally within the user’s browser. This web API enables developers to store key-value pairs in the browser’s memory without an expiration date. Developers often employ this tool to persist data across browser sessions and page refreshes. Local storage can be useful for storing user preferences (language, theme, etc.) or session data.  
 
 Storing sensitive user information to the browser's local storage is often discouraged between it can be easily accessed by malicious scripts. User information should always be stored on the server side where it benefits from added security measures. Nevertheless, it is always a good idea to encrypt any information that you store in the local storage especially if you suspect that it can be used for malicious attacks.
 
-### The `react-secure-storage` library
+## The `react-secure-storage` library
 
 The [`react-secure-storage`](https://www.npmjs.com/package/react-secure-storage) library uses a combination of AES-256 encryption for securing data stored in the browser's local storage. This library generates a secure key for every browser and encrypt the data using this key, which means only the browser which encrypted the data can decrypt it. This added security measure will prevent hackers from using any data that they acquired from a user's local storage.  
 
@@ -193,7 +193,7 @@ const handleDelete = () => {
 }
 ```
 
-6. Clearing the local storage:
+6. **Clearing the local storage:**
 
 Finally, we will add a `handleClear` function that deletes all saved data from the local storage using the `clear()` method provided by `secureLocalStorage`:  
 
@@ -369,7 +369,7 @@ export default function Page_1() {
 {% endraw %}
 ```
 
-### Testing 
+## Testing 
 
 Navigate to "Page 1" by clicking the corresponding button after logging in. You will be presented with the following page:  
 

security-headers.md

@@ -19,45 +19,45 @@ By adding security headers to the response of our pages, we can minimize the pos
 
 Next.js allows you to set security headers from the `next.config.js` file situated in the main folder of your project. We will make use of six different HTTP security headers to help protect our application. 
 
-#### `X-Frame-Options` header
+### `X-Frame-Options` header
 
 The `X-Frame-Options` header is designed to prevent clickjacking attempts on a website by ensuring that the site’s content is not embedded in other websites.  
 
 We will set the value of the `X-Frame-Options` header to `DENY` in order to prevent browsers from loading our website in an `<iframe>`, `<frame>`, `<object>`, or `<embed>` element. Attackers can use these elements to add invisible controls on top of the UI elements of our website to trick users into giving out information or unwillingly performing harmful tasks.  
 
-#### `Content-Security-Policy` header
+### `Content-Security-Policy` header
 
 The `Content-Security-Policy` header allows you to set a policy for which domains are approved for executable scripts as well as the kind of resources (e.g., fonts, images, etc.) that can be loaded into your website.  
 
 We will use the `Content-Security-Policy` header to allow resources to be loaded only from the same origin (`self`) and enable inline scripts and styles, which are necessary for Material UI (MUI) components. We will also authorize our website to connect to the `login.microsoftonline.com` domain for SSO in addition to accessing Google Fonts to download the Roboto family of fonts.  
 
-#### `X-Content-Type-Options` header
+### `X-Content-Type-Options` header
 
 The `X-Content-Type-Options` header is designed to disable Multipurpose Internet Mail Extensions (MIME) type sniffing, a technique used by browsers to determine type of a resource based on the response content instead of what is specified in the `Content-Type` header.  
 
 Attackers can manipulate the MIME sniffing algorithm to force the browser into interpreting data in a way that allows them to carry out malicious operations like cross-site scripting.  
 
 Using the the `nosniff` directive in the `X-Content-Type-Options` header forces the browser to adhere to the MIME types specified in `Content-Type` and thus reduces the possibility of XSS attacks.  
 
-#### `Permissions-Policy` header
+### `Permissions-Policy` header
 
 The `Permissions-Policy` header allows you to specify the Web APIs are allowed to be used within your website. This security header enables you to opt out of using external devices that are not needed for your website to function. The geolocation, camera, microphone APIs and many more should always be disabled if they are not used in your web application. Disabling unused web APIs helps lower the risk of attackers exploiting these channels for fraudulent or malicious activities.  
 
 We will disable the camera, battery, geolocation and microphone web APIs since our demo website does not need them.  
 
-#### `Referrer-Policy` header
+### `Referrer-Policy` header
 
 If your website contains clickable links to another domain then , then your website is said to be a referrer.  Whenever a user clicks on one of those links, certain information about the referrer is sent to the target domain in the HTTP request’s referrer header.  
 
 The `Referrer-Policy` header allows developers to specify how much information about the referrer is sent with the referrer header in each HTTP request when navigating from one domain to another.  
 
 We will make use of  the `origin-when-cross-origin` directive for the `Referrer-Policy` to send the path, origin, and query string when performing a same-origin request between equal protocol levels. An example of an equal protocol level would be from HTTPS to HTTPS.  
 
-#### `Strict-Transport-Security` header
+### `Strict-Transport-Security` header
 
 The `Strict-Transport-Security` header instructs web browsers to connect to your website only via HTTPS , thus ensuring that every connection is encrypted and secure from infiltration by third parties. You can also specify the duration in seconds that the browser will remember this protocol, with the recommended duration being 31536000s or 1 year. We will also use the `includeSubDomains` directive to ensure that all subdomains also adhere tot eh HTTPS protocol requirement.  
 
-### Adding HTTPS Security Headers to a Next.js SPA
+## Adding HTTPS Security Headers to a Next.js SPA
 
 To add HTTPS security headers to your Next.js SPA, simply open the  `next.config.js` file located in the root directory of your project and modify it as shown below:  
 

sso.md

@@ -15,7 +15,7 @@ Modern websites often require an authentication solution to store user informati
 
 We will now cover the process of adding single sign-on to a dockerized Next.js application. 
 
-### Install identity and MUI packages
+## Install identity and MUI packages
 The azure identity related `npm` packages must be installed in the project to enable user authentication. We will also make use of the Material UI (MUI) library for styling and components. 
 
 Add the `msal-react` and `msal-browser` packages to your project using the following command:  
@@ -30,7 +30,7 @@ Add the MUI library to your project:
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
-### Creating the authentication configuration file
+## Creating the authentication configuration file
 
 1. In the `client` folder of your project, create a new directory called `config`. Create a new file called `authConfig.ts` inside this directory.
 2. Open `authConfig.ts` and add the following code snippet:  
@@ -120,7 +120,7 @@ REDIRECT_URI=Enter_Redirect_Uri_here
   - `TENANT_ID` - the identifier of the tenant where the application is registered. Replace  `Enter_the_Tenant_Id_Here` with the **Tenant Id (McMaster)** provided by UTS.
   - `REDIRECT_URI`- the redirect URI provided to UTS in the registration ticket. Replace `Enter_the_Redirect_Uri_Here` with the redirect URI you provided to UTS.
 
-### Modify `template.tsx` to include the authentication provider
+## Modify `template.tsx` to include the authentication provider
 Open the `app/template.tsx` file and replace the contents of the file with the following code snippet to use the `msal` packages:  
 
 ```ts
@@ -163,7 +163,7 @@ export default function Template({children}: {children?: React.ReactNode} ) {
 
 Make sure that the `msalInstance` constant is always declared outside the body of the `Template` function to avoid any unpredictable behavior caused by race conditions. We added some boilerplate code to handle switching to dark mode if the user has dark mode enabled on their browser or OS settings.
 
-### Add components to the application
+## Add components to the application
 
 The project needs extra files to be created in order to render the the page layout, display the user profile data, and handle the sign in and sign out workflows.  
 
@@ -459,7 +459,7 @@ export const SignOutButton = () => {
 
 Akin to the `SignInButton`, the `SignOutButton` component renders a dropdown button with two sign out options.  
 
-### Create the `PermissionGate` component
+## Create the `PermissionGate` component
 
 We will create a `PermissionGate` component that prevents users from accessing our webpage before logging in. If a user is not yet successfully authenticated, the `PermissionGate` will display a `Modal` message informing the user that they need to login to access our website.
 
@@ -525,7 +525,7 @@ export default function PermissionGate({children}: PermissionGateProps) {
 
 We made use of the `AuthenticatedTemplate` and `UnauthenticatedTemplate` components from the `msal-react` package to conditionally render components based on the authentication status of the current user. The `AuthenticatedTemplate` and `UnauthenticatedTemplate` components will only render their children if a user is authenticated or unauthenticated, respectively.  
 
-### Create the page layout
+## Create the page layout
 
 We need to create a navigation bar to conditionally the sign in or sign out buttons as well as a link to another page with restricted content.  
 
@@ -603,7 +603,7 @@ export const PageLayout = (props: PageLayoutProps) => {
 {% endraw %}s
 ```
 
-### Create a new page with restricted content
+## Create a new page with restricted content
 Inside the `app` directory of your project, create a new directory called `page_1` with an `page.tsx` file inside it. 
 
 Add the following code to `page_1/page.tsx`:
@@ -643,7 +643,7 @@ export default function Home() {
 
 Notice that the components inside "Page 1" are wrapped with the `PermissionGate` components, which means that they are only viewable if the user is authenticated.
 
-### Create the Microsoft Graph client helper
+## Create the Microsoft Graph client helper
 
 To allow the SPA to request access to Microsoft Graph, a reference to the `graphConfig` object needs to be added. We will create a new `graph.ts` file that contains the Graph REST API endpoint defined in the `authConfig.ts` file.
 
@@ -673,7 +673,7 @@ export async function callMsGraph(accessToken: string) {
 }
 ```
 
-### Modify `page.tsx`
+## Modify `page.tsx`
 
 Open the `app/page.tsx` file and replace its content with the following code snippet:  
 

testing.md

@@ -9,13 +9,13 @@ nav_order: 3
 
 Our demo application is now complete, so we can test signing in using our MacID credentials.
 
-### Run a production instance of the SPA
+## Run a production instance of the SPA
 Create a production instance of the demo SPA using the following commad:
 ```
 docker-compose --file docker-compose.production.yaml -p auth-demo-prod up --build
 ```
 
-#### Calling the API from the application
+### Calling the API from the application
 1. Open your browser of choice and navigate to the fully qualified domain name of your server.
 2. Select the **SIGN IN** button. For the purposes of this tutorial, choose the **Sign in using Popup** option.