Cross Subdomain Authentication with FeathersJS Client

FeathersJS v4 switched from storing the jwt token in a cookie to localStorage. This was fine when the app stayed on one domain, but when splitting things out into several apps on different subdomains I realised unlike cookies localStorage does not play nicely.

I found the Customization option in the documentation which looked promising, but for some reason using the example gave me:

TypeError: Class constructor AuthenticationClient cannot be invoked without 'new'

Not wanting to go down the rabbit hole of config issues with yarn workspaces + Create React App a bit of a dirty workaround:

import auth from "@feathersjs/authentication-client";

const MyAuthenticationClient = auth.AuthenticationClient;

//  Keep the original method as we will need to call it
MyAuthenticationClient.prototype.parentGetFromLocation =
    MyAuthenticationClient.prototype.getFromLocation;

MyAuthenticationClient.prototype.getFromLocation = function (location) {
    //  getCookie() - function to retrieve the jwt content from the cookie
    location.hash = "access_token=" + getCookie("MY_COOKIE_NAME");
    return this.parentGetFromLocation(location);
};

feathersAPI.configure(
  auth({
    Authentication: MyAuthenticationClient,
    storage: localStorage,
  })
);

This will make the jwt token stored in the parent domain cookie available during authentication. You just need to make sure the cookie is saved during the login process.