bff-auth-lib

This npm package facilitates authentication between ReactJS client and IdentityServer via Asp.Net Core based BFF (Backend For Frontend).

This package provides an abstraction as React Context and provides a context hook to access the claims anywhere provided a component root consumes the AuthProvider context.

WARNING: This package is built for a custom app. It will NOT work in other scenarios.

• Sample code where context is provided to the App

const bffProps: Bff = {
  sitePathName: "import.meta.env.VITE_BFF_BASE_PATH",
  bffLoginEndpoint: `/bff/login?returnUrl=${import.meta.env.VITE_RETURN_URL}`,
  bffUserEndpoint: "/bff/user",
  bffMeuEndpoint: null,
  appName:'name_of_the_app_for_403_unauthorized_message'
};

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <AuthProvider bff={bffProps}>
    <App />
  </AuthProvider>
);

How it works?

1. As we've SSO (Single sign in), assuming, the users are logged in most of the time, the library sends a fetch request to get user info (/bff/user).
2. If user is already logged in, gets user info else redirects to the identity provider url.
3. STS redirects to the app based on redirectUrl after successful authentication.
4. Client sends once again request to the user endpoint and successfully receives user claims.
5. Now, it let React to render the application.

Testing locally as a package

1. Build the project npm run build
2. Remember to update the verion in package.json and update the section Changelogs as well with the added functionality.
3. Create a .tgz file using npm pack
4. Copy the .tgz file to the project where you want to test.
5. Point your command terminal to the folder where .tgz file is located and run npm install .\bff-auth-lib-2.0.0.tgz

If the .tgz file is located in another directory, run command pointing to that directory f.eks., npm install ../../bff-auth-lib-2.0.0.tgz

Publish to npm

1. Build the library npm run build
2. Build a tarball (.tgz) to test locally npm pack
3. Publish to npm npm publish - must have a account in the npm

Link to the npm

https://www.npmjs.com/package/bff-auth-lib

Changelogs

version 2.0.0

1. "vite": "^5.2.9",
2. "typescript": "^5.2.2"