如何在Auth0 React sdk中使用onRedirectCallback

Question

由于 onRedirecrCallback，我在重定向 URI 页面上总是得到 isAuthencated false。我不知道如何解决此问题。

const onRedirectCallback = (appState:any) => {
  Navigate(appState?.returnTo || window.location.pathname);
};
ReactDOM.render(
  <React.StrictMode>
   <Auth0Provider domain={domain} clientId={clientId} redirectUri={`${window.location.origin}/review`}  audience="unique identifier">
    <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
    </BrowserRouter>
    </Auth0Provider> 
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

首先，appState 有自己的 TS 类型，它是 AppState。

制作像“AuthProviderWithNavigate”这样的组件是一个很好的做法，并使用“Auth0Provider”作为子包装器。 您可以使用以下代码片段：

import { Auth0Provider, AppState } from '@auth0/auth0-react'
import { useNavigate } from 'react-router-dom'

interface AuthProviderWithNavigateProps {
  children: React.ReactNode
}

const AuthProviderWithNavigate: React.FC<AuthProviderWithNavigateProps> = ({ children }) => {
  const domain = process.env...... as string
  const clientId = process.env....... as string

  const navigate = useNavigate()

  const onRedirectCallback = (appState?: AppState) => {
    navigate(appState?.returnTo || window.location.pathname)
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
      onRedirectCallback={onRedirectCallback}>
      {children}
    </Auth0Provider>
  )
}

export default AuthProviderWithNavigate

然后用 AuthProviderWithNavigate 包装您的 App。