bff-auth-lib
v2.0.1
Published
Vite React Typescript context for a BFF
Downloads
101
Maintainers
Readme
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.
Publish to npm
- Build the library
npm run build
- Publish to npm
npm publish
- must have a account in the npm
Link to the npm
https://www.npmjs.com/package/bff-auth-lib