Auth0의 Proted Route를 react-router-domv6에 대응

Auth0 React SDK를 사용하는 프로그램은 react-router-dom을 v5에서 v6로 업데이트한 후 실행하지 않습니다.
Auth0의 블로그와 견본 코드를 수정해야 하기 때문에 수정 요점을 씁니다.

이 문장의 전제

루트 사용react-router-dom

Auth0 React SDK

사용자 인증 사용

react-router-domv5의 쓰기

Auth0의 샘플 코드에 있는 방법이지만 사용자 정의 로트 구성 요소를 제작하여 인증이 필요한 경로를 보호합니다.
react-router-domv5의 작법은 다음과 같다.

// ProtectedRoute.js
import { withAuthenticationRequired } from "@auth0/auth0-react";
import { Route } from "react-router-dom"; // v5

const ProtectedRoute = ({ component, ...options }) => {
  return <Route component={withAuthenticationRequired(component, {})} {...options} />;
};
export default ProtectedRoute;

사용자 정의 Route 어셈블리(Proteted Route)를 사용하는 경로는 다음과 같습니다.

// App.js
import ProtectedRoute from './ProtectedRoute';
import { BrowserRouter, Switch, Route } from 'react-router-dom'; // v5

function App() {
  return (
    <BrowserRouter>
      <Switch>
        {/* 認証が必要なパス */}
        <ProtectedRoute exact path='/' component={Home} />
        {/* 認証がいらないパス */}
	<Route path='/logout' component={Logout} />
      </Switch>
    </BrowserRouter>
  );
}
export default App;

react-router-domv6의 쓰기

react-router-dom을 v6로 업데이트한 후 기법이 바뀌었기 때문에 다음과 같은 코드 수정이 필요합니다.

// ProtectedRoute.js
import { withAuthenticationRequired } from '@auth0/auth0-react';

function ProtectedRoute({ component }) {
  const Component = withAuthenticationRequired(component, {});
  return <Component />; // Routeではなく、Componentにする
}
export default ProtectedRoute;

v6에 도착한 후 재현할 요소가 element로 지정되었기 때문에 위의 구성 요소를 사용하면 다음과 같다.

// App.js
import ProtectedRoute from './components/ProtectedRoute';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // v6

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 認証が必要なパス */}
        <Route index element={<ProtectedRoute component={Home} />} />
        {/* 認証がいらないパス */}
        <Route path="logout" element={<Logout />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

Auth0 Provider의 onRedirect Calleback의 실현

Auth0 React SDK의 샘플 코드에는 인증 후 사용자가 액세스하는 경로로 마이그레이션할 수 있도록 콜백이 설정되어 있습니다.
react-router-domv6에서는 Browser Router에 Auth0 Provider를 추가하여 같은 호출을 할 수 있습니다.

// Auth0Provider.js
import { Auth0Provider as Provider } from '@auth0/auth0-react';
import { useNavigate } from 'react-router-dom'; // v6

function Auth0Provider({ children }) { // 任意：カスタムのAuth0Provider
  const navigate = useNavigate();
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

  const onRedirectCallback = (appState) => {
    // navigationはBrowserRouterの中なら使用可能
    navigate(appState?.returnTo || window.location.pathname);
  };
  ...
  return (
    <Provider domain={domain} clientId={clientId} redirectUri={window.location.origin} onRedirectCallback={onRedirectCallback}>
      {children}
    </Provider>
  );
}
export default Auth0Provider;

// index.js
import Auth0Provider from './hooks/Auth0Provider'; // カスタムのAuth0Provider
import { BrowserRouter } from 'react-router-dom';
import App from './App';
...
root.render(
  <React.StrictMode>
    <BrowserRouter>
      {/* BrowserRouterの中に入れる */}
      <Auth0Provider>
        <App />
      </Auth0Provider>
    </BrowserRouter>
  </React.StrictMode>
);

이번 보도는 Auth0 Developer Hub의 샘플 코드를 참고했습니다.

React/JavaScript Authentication: React Router 6 Code Sample