Auth0ユニバーサルコンポーネント

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import "@auth0/universal-components-react/styles";

const authDetails = {
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
};

function App() {
  return (
    <Auth0Provider
      domain={authDetails.domain}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider authDetails={authDetails}>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

import { useAuth0 } from "@auth0/auth0-react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";

function OrganizationManagementPage() {
  const { isAuthenticated, isLoading } = useAuth0();

  if (isLoading) return <div>読み込み中...</div>;
  if (!isAuthenticated) return <div>ログインしてください</div>;

  return (
    <div>
      <OrganizationDetailsEdit />
    </div>
  );
}