funk101
05/11/2022, 4:51 PMimport React from "react";
import dynamic from "next/dynamic";
import SuperTokensReact from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { frontendConfig } from "../config/frontendConfig";
if (typeof window !== "undefined") {
// we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
SuperTokensReact.init(frontendConfig());
}
const EmailPasswordAuthNoSSR = dynamic(
new Promise((res) => res(EmailPassword.EmailPasswordAuth)),
{ ssr: false }
);
function MyApp({ Component, pageProps }) {
return (
<EmailPasswordAuthNoSSR>
<Component {...pageProps} />;
</EmailPasswordAuthNoSSR>
);
}
export default MyApp;
rp
05/11/2022, 4:53 PMfunk101
05/11/2022, 4:53 PMrp
05/11/2022, 4:53 PMrequireAuth={false}
prop to EmailPasswordAuthNoSSR
funk101
05/11/2022, 4:53 PMrp
05/11/2022, 4:54 PM<EmailPasswordAuthNoSSR requireAuth={false}>
<Component {...pageProps} />;
</EmailPasswordAuthNoSSR>
funk101
05/11/2022, 4:54 PMrp
05/11/2022, 4:57 PMfunk101
05/11/2022, 4:57 PMexport default function MyProtectedPage() {
const { userId, doesSessionExist } = useSessionContext();
console.log(userId, doesSessionExist);
if (!doesSessionExist) {
return (window.location.href = "/auth");
}
return <div>My Protected Page</div>;
}
rp
05/11/2022, 5:06 PMEmailPasswordAuthNoSSR
.
You should only wrap the routes you want protected to be in EmailPasswordAuthNoSSR
WITHOUT requireAuth=false
-> this will redirect the user to the login page automatically (if they are not logged in).
If there is a route that can handle logged out users as well, only then you should pass requireAuth=false
EmailPasswordAuthNoSSR requireAuth={false}
around the whole app, then what you have done is fine, except you should use this: https://v5.reactrouter.com/web/api/Redirectfunk101
05/11/2022, 5:08 PMrp
05/11/2022, 5:08 PMrp
05/11/2022, 5:10 PM