Bff-auth-lib NPM

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?

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).
If user is already logged in, gets user info else redirects to the identity provider url.
STS redirects to the app based on redirectUrl after successful authentication.
Client sends once again request to the user endpoint and successfully receives user claims.
Now, it let React to render the application.