From 86afb2b534cb4f90903f4ce46040c9dd5d3e70ea Mon Sep 17 00:00:00 2001 From: Denys Oblohin Date: Thu, 19 May 2022 14:18:10 +0300 Subject: [PATCH 1/3] Add note to README about memoizing callbacks passed to --- README.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index e34edf14..9276fc66 100644 --- a/README.md +++ b/README.md @@ -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'; @@ -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 ( @@ -389,16 +389,17 @@ 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). Recommended to memoize callback with `useCallback` hook. #### 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). Recommended to memoize callback with `useCallback` hook. #### Example ```jsx import { useHistory } from 'react-router-dom'; +import { useCallback } from 'react'; import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js'; const oktaAuth = new OktaAuth({ @@ -410,15 +411,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 ( { const history = useHistory(); - const restoreOriginalUri = async (_oktaAuth, originalUri) => { + const restoreOriginalUri = useCallback(async (_oktaAuth, originalUri) => { history.replace(toRelativeUrl(originalUri, window.location.origin)); - }; + }, []); return ( { **Note:** If you use `basename` prop for ``, 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 From f052731f07118cdf40a4a9568b3e1a0b0d577583 Mon Sep 17 00:00:00 2001 From: Denys Oblohin Date: Fri, 20 May 2022 02:34:07 +0300 Subject: [PATCH 2/3] . --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9276fc66..872ff614 100644 --- a/README.md +++ b/README.md @@ -389,11 +389,13 @@ 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). Recommended to memoize callback with `useCallback` hook. +*(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). Recommended to memoize callback with `useCallback` hook. +*(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 From f630ed6e8e30046f69eb3ad393aaa9bf2a61f42c Mon Sep 17 00:00:00 2001 From: Denys Oblohin Date: Fri, 20 May 2022 03:48:20 +0300 Subject: [PATCH 3/3] useCallback - todo! --- test/apps/test-harness-app/src/App.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/apps/test-harness-app/src/App.tsx b/test/apps/test-harness-app/src/App.tsx index bf3f7921..7dbeb4d2 100644 --- a/test/apps/test-harness-app/src/App.tsx +++ b/test/apps/test-harness-app/src/App.tsx @@ -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 (