Next.jsで認証してないユーザーはアクセスできないページを作る
基本は_app.tsxのuseEffectでチェックしてリダイレクトするんだけど、この記事のようにやるとuseEffectはdidComponentMountなので一瞬だけ隠したいページがチラつく。
なのでこの記事のように<Component />をRouteGuardで囲って、認証が終わるまでは子コンポーネントを隠すようにするとチラつきを防げるようにできた。
importとか省いてるけど具体的にはこんな感じでやった↓
code:_app.tsx
function RouteGuard({ children }: { children: ReactNode }) {
const router = useRouter();
useEffect(() => {
setAuthorized(false);
const session = supabase.auth.user();
if (session) {
setAuthorized(true);
return;
}
if (router.pathname === "/") {
setAuthorized(true);
return;
}
router.push("/");
return (
<>
{authorized ? (
children
) : (
<Flex h="100vh" justifyContent={"center"} alignItems={"center"}>
<Spinner size={"lg"} />
</Flex>
)}
</>
);
}
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<ChakraProvider>
<Header />
<RouteGuard>
<Component {...pageProps} />
</RouteGuard>
<Footer />
</ChakraProvider>
</RecoilRoot>
);
}