# Add authorization to your Azure Functions with Static Web Apps

Recently, the Azure Static Web Apps team released some changes to allow us to better configure our app. Although this came with some breaking changes, we are now able to simplify our routes' authorization config! I've been waiting for this for a while, I created [an issue](https://github.com/Azure/static-web-apps/issues/132) about this on August last year.

If you need any guidance on creating a Static Web App with functions, you can check out my other blog post: [Using function proxies with Azure Static Web Apps](https://blog.danielreis.dev/using-function-proxies-with-azure-static-web-apps)

## How it worked before

Previously, to add authorization to your SWA, you had to create a file named *routes.json* in the root of your app's build artifact folder. That generally changes from framework to framework,  [but this is well documented](https://docs.microsoft.com/en-us/azure/static-web-apps/routes#location). On the file, you can define routes that are authorized based on a user role. The default roles in a Static Web App are `anonymous` (Someone who is not logged in) and `authenticated` (Someone who is logged in through any of the identity providers). This is how a *routes.json* file with authorization rules generally looks like:
```json
{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200,
      "allowedRoles": ["authenticated"]
    }
  ]
}
```
The file above says that to access **any** page, you have to be logged on. You can specify which routes require an user to be authenticated so you could, for example, allow any user to access your app's front page, but to access the user panel he would have to be logged on.

## How it works now

The `routes` part of the file is mainly the same, with some fields renamed. The main breaking change is that there's a new file named *staticwebapp.config.json*. It has the same capabilities of the *routes.json* and more:

- You can now define HTTP methods on your route definitions. Before, if you wanted to allow unauthenticated *GET* requests but require authentication for *POST* or *PUT*, you had to define a different route for the *POST* and *PUT* routes. Now, you can use the same route and specify the HTTP methods on the `methods` field. Here's an example:
```json
{
    "routes": [
      {
        "route": "/api/*",
        "methods": ["POST", "PUT"],
        "allowedRoles": ["authenticated"]
      }
    ]
}
```
The JSON above says that every route starting with `/api` **and** the method is *POST* or *PUT* should only be called by users with the `authenticated` role.

> **NOTE:** The `methods` field works on the *routes.json* file, but if you're starting a new application or modifying your routes file to use the new features, you should consider switching to the new file, since the old one is deprecated.

## Custom roles

Azure Static Web Apps allow you to create custom roles to your users. Currently this is only possible when inviting users through the portal and it requires you to specify the Auth provider, email address, the apps's domain (for some reason) and the expiration (in hours, max 7 days), as well as the role name, of course. As far as I know, there's no way to do this outside the portal, but hopefully this will change in the future. You can invite an user to your app by going on your Static Web App resource, going on the **Role management** tab and clicking **Invite**.

![create invitation link.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614230395012/eaqrNZ1QR.png)

## Conclusion

Now that the configuration files allow you to define which HTTP method you want your route definition to run, you can specify which of your HTTP methods will have authorization rules. There are more features that came with the new *staticwebapp.config.json* file, some of them are really interesting! But I decided to focus this blog post on the authorization and HTTP methods part. You can read more about the new file [here](https://docs.microsoft.com/en-us/azure/static-web-apps/configuration). If you have any questions or feedback, let me know!