Next.js 14 - Aufbau einer SaaS-Lösung auf Azure (Speicherkonten etc.) - Teil 4

In this final part of our series on building a SaaS solution using Next.js 14 and Azure, we will focus on the critical aspect of managing Azure Storage Accounts. We’ll dive into how you can create storage accounts, handle file uploads, monitor disk usage, and delete files using APIs.

Github Repo and Example Page with Final Result

More details and the GitHub repo with the entire code

All needed information for creating the used App Service can be found here:

https://www.cloudapp.dev/next-js-14-building-a-saas-solution-on-azure-long-running-processes-part-1

Setting Up Storage Accounts via API

Here’s how the route looks:

This route ensures only authorized users (Admins) can create storage accounts by validating the user’s role. Once authenticated, it sends the storage account creation request to an Azure App Service.

Deleting Azure Resource Groups via API with Admin Authorization

In this part of the SaaS solution, we implement an API route for deleting resource groups based on tags, but only for authorized users. The POST method in the following code ensures that only users with the Admin role can execute the deletion. Path -> /api/azure/resources/deleteresourcegroupappservice

After obtaining the authorization token, the payload, including tagKey, tagValue, and resourceGroupName, is constructed and sent to Azure’s App Service using a DELETE request.

Here’s the full code:

How It Works:

1. Authorization:

   It validates if the user has an Admin role using the JWT token from next-auth/jwt.

2. Payload Construction:

   The API builds a payload that contains the necessary data like tagKey, tagValue, resourceGroupName, and user_email.

3. DELETE Request:

   It sends this payload via a DELETE request to an Azure App Service endpoint, where it deletes resource groups based on the provided tags.

4. Error Handling:

   The code handles errors such as unauthorized access or issues during the communication with the Azure Service, ensuring the API behaves robustly.

This implementation ensures that critical resources like Azure Resource Groups can only be deleted by authorized users in your SaaS application.

Uploading Files with the Frontend Component

Next, we focus on how to handle file uploads to the storage account. The FileUploader component provides users with a UI to drag and drop files, upload them, and monitor their progress.

Here is the complete implementation of the FileUploader component:

Deleting Files and Storage Management

The FileUploader component also includes the ability to delete files and even entire storage containers, allowing for efficient storage management.

Below is the API route for deleting all files in a storage container:

This route ensures that only authorized users can delete files. The BlobServiceClient handles interactions with Azure Blob Storage, iterating through all files and deleting them.

Uploading Files via SAS Token

In addition to creating and deleting storage accounts, users can also upload files to Azure Blob Storage via SAS Tokens. Below is the code for generating a SAS token:

This API route generates a SAS Token that allows secure, time-limited uploads directly to Azure Blob Storage. The ContainerSASPermissions ensures that only the necessary permissions are granted (in this case, create, write, and read).

File Deletion with Search

If you need to delete specific files rather than clearing an entire container, the following API route can delete individual files based on search criteria:

This route leverages search parameters from the request URL to locate and delete individual files from Azure Blob Storage.

Main Component (createstorageaccountform_appservice.component.tsx)

In this component, we are managing the creation and deletion of Azure Storage accounts and embedding the FileUploader component to handle file uploads within those accounts.

Let’s bring it all together

Aim of the API Routes

1. Create Storage Account (createstorageaccountappservice): Creates a new Azure Storage Account, verifying admin privileges before proceeding.

2. Delete Resource Group (deleteresourcegroupappservice): Deletes Azure Resource Groups by tag, allowing for selective deletion of resources.

3. File Delete (filedelete): Deletes a specific file in a storage container based on filename.

4. Delete All Files (deleteall): Deletes all files in a given Azure Blob Storage container.

5. SAS Token (sastoken): Generates a SAS token that enables secure file uploads to Azure Blob Storage.

6. List Files (list): Retrieves and lists all files in a storage container.

Aim of the Components

1. CreateStorageAccountFormAppService : Facilitates the creation, deletion, and management of Azure Storage Accounts. It manages user inputs and validates storage account existence. If an account exists, it integrates the FileUploader for file operations.

2. FileUploader: Handles uploading, listing, and deleting files in Azure Blob Storage. It provides a drag-and-drop interface, monitors progress, and uses Azure SAS tokens for secure uploads.

Conclusion

In this post, we’ve built a robust file management system for a SaaS solution using Next.js 14 and Azure. By integrating a set of API routes, we allow users to create and delete Azure Storage Accounts, upload files using SAS tokens, and manage the files through a user-friendly interface.

The combination of components like CreateStorageAccountFormAppService and FileUploader offers a seamless experience for managing cloud resources and files. This setup provides a scalable and secure architecture for handling storage in SaaS applications.

Cloudapp-dev, and before you leave us

Thank you for reading until the end. Before you go:

Cloudapp-dev, and before you leave us

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏 on our Medium Account

Or follow us on twitter -> Cloudapp.dev