{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/azure-static-web-apps-easyauth-deeplink",
  "description": "Azure Static Web Apps does not support deep linking with authentication. This post describes how to work around this limitation.",
  "path": "/posts/azure-static-web-apps-easyauth-deeplink",
  "publishedAt": "2022-12-04T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "azure static web apps",
    "auth",
    "azure"
  ],
  "textContent": "Azure Static Web Apps doesn't support deep linking with authentication. The post login redirect parameter of post_login_redirect_uri does not support query string parameters. This post describes how to work around this limitation.\n\n\n\nUpdated 1st March 2023\n\nI'm happy to say that this blog post is no longer necessary; the behavour is now built into Azure Static Web Apps. Here is an example staticwebapp.config.json which supports deep linking using the .referrer post sign-in redirect:\n\nDeep linking\n\nImagine the situation: your colleague sends you https://our-app.com/pages/important-page?someId=theId. You click the link and you're presented with a login screen. You login and you're presented with a page, but not the one your colleague meant you to see. What do you do now? If you realise what's happened, you'll likely paste the URL into the address bar again so you end up where you hope to. But what if you don't realise what's happened? Answer: confusion and frustration.\n\nIf you're using Azure Static Web Apps, you're likely to have this problem. Azure Static Web Apps doesn't support deep linking with authentication. When you get redirected you'll find you are (at best) missing the query parameters. If you take a look at the link here you'll see a suggested workaround. We're going to develop that idea in this post.\n\nThe workaround\n\nThe idea of the workaround is this:\n\n- at the start of the authentication process, store the URL you're trying to get to in local storage\n- when the authentication process completes, redirect to the URL you stored in local storage\n\nThe post suggested a React specific approach. We'd like something that is framework agnostic. So if you're running with Svelte, Vue, Angular or something else, you can use this approach too.\n\nThe implementation\n\nWe're going to need to make sure our staticwebapp.config.json is set up to support our goal:\n\nThere's a number of things to note here:\n\n- we're using Azure Active Directory as our identity provider (and disabling others) - the approach in this post will work with any identity provider; this is just the one I'm using. Easy Auth supports a number of identity providers\n- we're creating a /login route to redirect to the Azure AD login page - you don't have to do this, but it's a nice touch.\n- we're protecting the .json files with authentication - this is because our JSON files actually contain secure information. If we were using say an API instead, we'd protect that with authentication instead. Crucially, access to HTML / JS / CSS is _not_ protected. This is important, because we need to be able to access our index.html file and associated JavaScript to store the URL we're trying to get to in local storage.\n\nWith this in place, we can implement our workaround. Let's create a file called deeplink.ts:\n\nThe code above implements our workaround. It does the following:\n\n- it checks whether a user is authenticated by hitting the /.auth/me endpoint that is provided by the Easy Auth / Static Web Apps authentication system\n- if users are not authenticated, it:\n  - stores the path and query string in localStorage and\n  - redirects them to the login page\n- when they return post-authentication it retrieves the path and query string from localStorage and sets the URL to that\n\nWhat does usage look like? Well let's take the root of a simple React app:\n\nYou can see here that the first thing we do is call deeplink with the URL of the login page (you can see I've provided a number of options). This will redirect the user to the login page if they're not authenticated, and will redirect them to the URL they were trying to access if they are authenticated. Once that's done, we render our app.\n\nYou should be able to apply this regardless of your framework. The important thing is that you call deeplink before you render your app.\n\nAnnouncing easyauth-deeplink\n\nI've created a package called easyauth-deeplink that implements the workaround above. You can install it with npm install easyauth-deeplink or yarn add easyauth-deeplink. It's a single file, so you can just copy and paste it into your project if you prefer.\n\nConclusion\n\nIt would be tremendous if this became a feature that was built into Azure Static Web Apps. Maybe one day it will be. In the meantime, I hope this workaround helps you.\n\nIt should be said that whilst we've described usage in this post with Static Web Apps, the same approach should work with any Azure Service that has Easy Auth enabled; App Service / Function Apps etc. I've not tried it, but I'd be surprised if it didn't work.",
  "title": "Deep linking with Azure Static Web Apps and Easy Auth"
}