Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix usage instructions #10

Merged
merged 1 commit into from
Feb 5, 2024
Merged

docs: fix usage instructions #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ The authorization portion of this library works with applications protected by t

## Installation

Add bento-auth-js as a dependency to another project:
Add `bento-auth-js` as a dependency to another project:

```bash
npm install bento-auth-js
Expand Down Expand Up @@ -39,17 +39,18 @@ Usually this is done in the top `App` component. The following example uses a po
```tsx
import {
useHandleCallback,
getIsAuthenticated,
checkIsInAuthPopup,
useIsAuthenticated,
useOpenSignInWindowCallback,
usePopupOpenerAuthCallback,
useSignInPopupTokenHandoff,
useSessionWorkerTokenRefresh,
useOpenIdConfig,
} from "bento-auth-js";

import YourSessionWorker as SessionWorker from "../session.worker"
import YourSessionWorker as SessionWorker from "../session.worker";
import { AUTH_CALLBACK_URL, BENTO_URL_NO_TRAILING_SLASH, CLIENT_ID, OPENID_CONFIG_URL } from "../config";
import { BentoAuthContext } from "./contexts";

// Session worker creator function must be in a constant for useSessionWorkerTokenRefresh
const createSessionWorker = () => new SessionWorker();
Expand All @@ -65,12 +66,11 @@ const App = () => {
const openIdConfig = useOpenIdConfig(OPENID_CONFIG_URL);

// Opens sign-in window
const userSignIn = useOpenSignInWindowCallback(
signInWindow, openIdConfig, CLIENT_ID, AUTH_CALLBACK_URL, SIGN_IN_WINDOW_FEATURES);
const userSignIn = useOpenSignInWindowCallback(signInWindow, SIGN_IN_WINDOW_FEATURES);

// Create the auth callback for the application's URL
const popupOpenerAuthCallback = usePopupOpenerAuthCallback(BENTO_URL_NO_TRAILING_SLASH);
const popupOpenerAuthCallback = usePopupOpenerAuthCallback();

const isInAuthPopup = checkIsInAuthPopup(BENTO_URL_NO_TRAILING_SLASH);

// Assuming fetchUserDependentData is a thunk creator:
Expand All @@ -88,19 +88,17 @@ const App = () => {
);

// Token handoff with Proof Key for Code Exchange (PKCE) from the sing-in popup
useSignInPopupTokenHandoff(BENTO_URL_NO_TRAILING_SLASH, AUTH_CALLBACK_URL, CLIENT_ID, windowMessageHandler);
useSignInPopupTokenHandoff(windowMessageHandler);

// Session worker tokens refresh
useSessionWorkerTokenRefresh(
CLIENT_ID,
sessionWorker,
createSessionWorker,
onAuthSuccess,
createSessionWorker,
onAuthSuccess,
);

// Get user auth status
const { accessToken, idTokenContents } = useSelector((state) => state.auth);
const isAuthenticated = getIsAuthenticated(idTokenContents);
const isAuthenticated = useIsAuthenticated();

return (
<>
Expand All @@ -112,6 +110,19 @@ const App = () => {
</>
);
}

const AppWithContext = () => (
<BentoAuthContext {{
applicationUrl: "(...)",
openIdConfigUrl: "(...)",
clientId: "(...)",
scope: "openid email",
postSignOutUrl: "/",
authCallbackUrl: "(...)/callback",
}}>
<App />
</BentoAuthContext>
);
```

### Authorization for a signed-in user
Expand Down
Loading