What is easyauth-deeplink?

Azure Static Web Apps support EasyAuth for simple authentication. However, deeplinking is not meaningfully supported - when you are redirected back to your app after authentication you lose query parameters from the URL which is a problem if you want to use deeplinking.

This package implements a workaround which allows you to use query parameters with EasyAuth. It works like this:

• it checks whether a user is authenticated
• if they are not, it:
  • stores the path and query string in localStorage and
  • redirects them to the login page
• when they return post-authentication it retrieves the path and query string from localStorage and sets the URL to that

nb: easyauth-deeplink requires that anonymous access to your site is allowed so it can harvest the path / query to redirect to. We advise that you apply security at the API layer and to any secure data within your app.

To learn more, read this blog post.

Usage

You use easyauth-deeplink as the first action that runs before your app renders. This means that the approach should be framework agnostic. easyauth-deeplink been tested with React and Azure Static Web Apps.

npm i easyauth-deeplink

import { deeplink } from "easyauth-deeplink";

function main() {
	// code that starts your application
}

deeplink("/.auth/login/aad").then(main);
// or
deeplink("/.auth/login/github").then(main);
// or
deeplink("/.auth/login/twitter").then(main);
// or
deeplink("/.auth/login/google").then(main);
// etc

API

The deeplink function takes a single parameter which is the URL to redirect to for authentication. It either triggers the authentication flow or returns a Promise which resolves when the route has been set to the deep linked URL.

/**
 * If authenticated, redirect to the path and query string stored in local storage.
 * If not authenticated, store the current path and query string in local storage and redirect to the login page.
 *
 * @param loginUrl The URL to redirect to if the user is not authenticated
 */
export async function deeplink(loginUrl: string): Promise<void> {

Development

See .github/CONTRIBUTING.md.

Thanks! ❤️🌻