2.0.0 • Published 24 days ago
bff-auth-lib v2.0.0
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.
Testing locally as a package
- Build the project
npm run build
- Remember to update the verion in
package.json
and update the section Changelogs as well with the added functionality. - Create a
.tgz
file usingnpm pack
- Copy the
.tgz
file to the project where you want to test. - Point your command terminal to the folder where
.tgz
file is located and runnpm 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
- Build the library
npm run build
- Build a tarball (.tgz) to test locally
npm pack
- 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
- "vite": "^5.2.9",
- "typescript": "^5.2.2"