https://supertokens.com/ logo
Channels
Powered by
f

funk101

05/11/2022, 4:51 PM
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

rp

05/11/2022, 4:53 PM
hey
f

funk101

05/11/2022, 4:53 PM
yes
r

rp

05/11/2022, 4:53 PM
You should add the 
requireAuth={false}
prop to 
EmailPasswordAuthNoSSR
f

funk101

05/11/2022, 4:53 PM
i thought so, but no docs about that
in the implementation? next so ssr: false ?
r

rp

05/11/2022, 4:54 PM
Copy code
<EmailPasswordAuthNoSSR requireAuth={false}>
      <Component {...pageProps} />;
    </EmailPasswordAuthNoSSR>
f

funk101

05/11/2022, 4:54 PM
ah ok
ok, so are there any docs on accessTokenPayload? roles? etc?
r

rp

05/11/2022, 4:57 PM
Yup. Check the common customisation section
And the session section inside it
f

funk101

05/11/2022, 4:57 PM
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

rp

05/11/2022, 5:06 PM
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

funk101

05/11/2022, 5:08 PM
I'm not using react-router, using the nextjs routing
there's not one place for routes to be declared
r

rp

05/11/2022, 5:08 PM
Right. Then you should render null and redirect the user in a useEffect
f

funk101

05/11/2022, 5:09 PM
but still -> don't wrap the entire app in ?
r

rp

05/11/2022, 5:10 PM
You can. If u r checking for session existing and redirecting in case it doesn’t for routes that NEED a session to exist
6 Views
Powered by