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

Jump to bottom

Updated readme about correct passing of callbacks to <Security /> #234

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Updated readme about correct passing of callbacks to <Security /> #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86afb2b
Add note to README about memoizing callbacks passed to <Security>
denysoblohin-okta May 19, 2022
f052731
.
denysoblohin-okta May 19, 2022
f630ed6
useCallback - todo!
denysoblohin-okta May 20, 2022
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
32 changes: 19 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export default class extends Component {
#### Creating React Router Routes with function-based components

```jsx
import React from 'react';
import React, { useCallback } from 'react';
import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { BrowserRouter as Router, Route, useHistory } from 'react-router-dom';
Expand All @@ -203,9 +203,9 @@ const oktaAuth = new OktaAuth({

const App = () => {
const history = useHistory();
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
const restoreOriginalUri = useCallback(async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
};
}, []);

return (
<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
Expand Down Expand Up @@ -389,16 +389,19 @@ export default MessageList = () => {

#### restoreOriginalUri

*(required)* Callback function. Called to restore original URI during [oktaAuth.handleLoginRedirect()](https://github.com/okta/okta-auth-js#handleloginredirecttokens) is called. Will override [restoreOriginalUri option of oktaAuth](https://github.com/okta/okta-auth-js#restoreoriginaluri)
*(required)* Callback function. Called to restore original URI during [oktaAuth.handleLoginRedirect()](https://github.com/okta/okta-auth-js#handleloginredirecttokens) is called. Will override [restoreOriginalUri option of oktaAuth](https://github.com/okta/okta-auth-js#restoreoriginaluri).
**Note** Recommended to memoize callback with `useCallback` hook. For `react-router v6` please don't set result of `useNavigate` hook as dependency for memoizing `restoreOriginalUri` callback.

#### onAuthRequired

*(optional)* Callback function. Called when authentication is required. If this is not supplied, `okta-react` redirects to Okta. This callback will receive [oktaAuth][Okta Auth SDK] instance as the first function parameter. This is triggered when a [SecureRoute](#secureroute) is accessed without authentication. A common use case for this callback is to redirect users to a custom login route when authentication is required for a [SecureRoute](#secureroute).
*(optional)* Callback function. Called when authentication is required. If this is not supplied, `okta-react` redirects to Okta. This callback will receive [oktaAuth][Okta Auth SDK] instance as the first function parameter. This is triggered when a [SecureRoute](#secureroute) is accessed without authentication. A common use case for this callback is to redirect users to a custom login route when authentication is required for a [SecureRoute](#secureroute).
**Note** Recommended to memoize callback with `useCallback` hook. For `react-router v6` please don't set result of `useNavigate` hook as dependency for memoizing `onAuthRequired` callback.

#### Example

```jsx
import { useHistory } from 'react-router-dom';
import { useCallback } from 'react';
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';

const oktaAuth = new OktaAuth({
Expand All @@ -410,15 +413,15 @@ const oktaAuth = new OktaAuth({
export default App = () => {
const history = useHistory();

const customAuthHandler = (oktaAuth) => {
const customAuthHandler = useCallback((oktaAuth) => {
// Redirect to the /login page that has a CustomLoginComponent
// This example is specific to React-Router
history.push('/login');
};
}, []);

const restoreOriginalUri = async (_oktaAuth, originalUri) => {
const restoreOriginalUri = useCallback(async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
};
}, []);

return (
<Security
Expand Down Expand Up @@ -569,6 +572,7 @@ Example of implementation of this callback for `react-router`:

```jsx
import { Security } from '@okta/okta-react';
import { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';

Expand All @@ -580,9 +584,9 @@ const oktaAuth = new OktaAuth({

export default App = () => {
const history = useHistory();
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
const restoreOriginalUri = useCallback(async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri, window.location.origin));
};
}, []);

return (
<Security
Expand All @@ -598,11 +602,13 @@ export default App = () => {
**Note:** If you use `basename` prop for `<BrowserRouter>`, use this implementation to fix `basename` duplication problem:
```jsx
import { toRelativeUrl } from '@okta/okta-auth-js';
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
import { useCallback } from 'react';

const restoreOriginalUri = useCallback(async (_oktaAuth, originalUri) => {
const basepath = history.createHref({});
const originalUriWithoutBasepath = originalUri.replace(basepath, '/');
history.replace(toRelativeUrl(originalUriWithoutBasepath, window.location.origin));
};
}, []);
```

### Migrating from 3.x to 4.x
Expand Down
12 changes: 6 additions & 6 deletions test/apps/test-harness-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@ const App: React.FC<{
}> = ({ oktaAuth, customLogin, baseUrl }) => {
const history = useHistory();

const onAuthRequired = async () => {
const onAuthRequired = React.useCallback(async () => {
history.push('/login');
};
}, []);

const onAuthResume = async () => {
const onAuthResume = React.useCallback(async () => {
history.push('/widget-login');
};
}, []);

const restoreOriginalUri = async (_oktaAuth: OktaAuth, originalUri: string) => {
const restoreOriginalUri = React.useCallback(async (_oktaAuth: OktaAuth, originalUri: string) => {
history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
};
}, []);

return (
<React.StrictMode>
Expand Down