https://supertokens.com/ logo
Join Discord
Powered by
`import React from "react"; import dynamic from "n...
# support-questions-legacy
f
Copy code
import 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;
r
hey
f
yes
r
You should add the 
requireAuth={false}
prop to 
EmailPasswordAuthNoSSR
f
i thought so, but no docs about that
in the implementation? next so ssr: false ?
r
Copy code
<EmailPasswordAuthNoSSR requireAuth={false}>
      <Component {...pageProps} />;
    </EmailPasswordAuthNoSSR>
f
ah ok
ok, so are there any docs on accessTokenPayload? roles? etc?
r
Yup. Check the common customisation section
And the session section inside it
f
thanks
is there a more elegant way to do this in supertokens?...
Copy code
export default function MyProtectedPage() {
  const { userId, doesSessionExist } = useSessionContext();
  console.log(userId, doesSessionExist);
  if (!doesSessionExist) {
    return (window.location.href = "/auth");
  }
  return <div>My Protected Page</div>;
}
r
You shouldn't wrap the entire app in 
EmailPasswordAuthNoSSR
. 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
If you want to keep 
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/Redirect
f
I'm not using react-router, using the nextjs routing
there's not one place for routes to be declared
r
Right. Then you should render null and redirect the user in a useEffect
f
but still -> don't wrap the entire app in ?
r
You can. If u r checking for session existing and redirecting in case it doesn’t for routes that NEED a session to exist
7 Views
PreviousNext
Powered by