https://supertokens.com/ logo
#general
Title
# general
f

funk101

05/06/2022, 8:37 AM
I'm using NextJS. In the supertokens example it uses
EmailPasswordReact
and
SessionReact
. However, when trying to customize the SignIn UI, I'm getting an error:
Error: No instance of EmailPassword found. Make sure to call the EmailPassword.init method
. Do I need to modify the code to use
EmailPassword
and not
EmailPasswordReact
?
r

rp

05/06/2022, 8:38 AM
hey!
You don't need to.. emailpasswordreact is just an alias for emailpassword
you should just make sure that you call the init function
f

funk101

05/06/2022, 8:39 AM
ok then, why the error? I've followed the example
r

rp

05/06/2022, 8:39 AM
from where is this error coming?
for example, is it coming when you use EmailPasswordAuth wrapper component?
f

funk101

05/06/2022, 8:40 AM
Copy code
export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
      EmailPasswordReact.init({
        signInAndUpFeature: {
          disableDefaultImplementation: true,
        },
        getRedirectionURL: async (context) => {
          if (context.action === "SIGN_IN_AND_UP") {
            return "/signin";
          }
        },
      }),
      SessionReact.init(),
    ],
  };
};
frontendConfig
r

rp

05/06/2022, 8:40 AM
can you show me the imports?
f

funk101

05/06/2022, 8:40 AM
import EmailPasswordReact from "supertokens-auth-react/recipe/emailpassword"; import SessionReact from "supertokens-auth-react/recipe/session"; import { appInfo } from "./appInfo";
and in my signin.jsx ...
r

rp

05/06/2022, 8:41 AM
are you doing supertokens.init() in _app.tsx?
f

funk101

05/06/2022, 8:41 AM
`import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
export default function SignIn() { return ( ); }
r

rp

05/06/2022, 8:41 AM
this.
f

funk101

05/06/2022, 8:42 AM
no, not in _app.js
r

rp

05/06/2022, 8:42 AM
you should make sure that the init is happening in all frontend routes
f

funk101

05/06/2022, 8:42 AM
wait, this is my _app.js file
r

rp

05/06/2022, 8:42 AM
one way of doing that is to put the supertokens.init in _app.js
f

funk101

05/06/2022, 8:42 AM
Copy code
import React from "react";

import SuperTokensReact from "supertokens-auth-react";

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());
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;
r

rp

05/06/2022, 8:43 AM
ok
so thew issue is that the
SignIn
component you have made is getting server side rendered
and in the server, supertokens.init is not happening
so you need to make sure to render
SignIn
only if it's on the client side
f

funk101

05/06/2022, 8:45 AM
hmm
I wish the docs were more clear on this, I really don't know where/how to do that since supertokens is new to me
do I run in a useEffect() ?
r

rp

05/06/2022, 8:46 AM
this is more of a nextjs issue
check out the
dynamic
HOC provided by nextjs
f

funk101

05/06/2022, 8:50 AM
I actually am using that for protecting pages
r

rp

05/06/2022, 8:50 AM
right yea.. so wrap the sign in component you made with dynamic
it will prevent it to render on server side. solving your issue
f

funk101

05/06/2022, 8:51 AM
I appreciate your help, but it's not clear what that dynamic() would be
to me
r

rp

05/06/2022, 8:54 AM
Copy code
import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
import dynamic from 'next/dynamic'

const SignInAndUpNoSSR = dynamic(
  new Promise<any>((res) =>
    res(SignInAndUp)
  ),
  { ssr: false }
)

export default function SignIn() {
  return (
    <div>
      <SignInAndUpNoSSR />
    </div>
  );
}
f

funk101

05/06/2022, 8:57 AM
Ah man, thanks so much. I see it now
r

rp

05/06/2022, 9:02 AM
coool
f

funk101

05/06/2022, 9:03 AM
so it's not as simple as doing something like this I see:
Copy code
<SignInAndUpNoSSR>
      <div>
        <input type="email" />
      </div>
      <div>
        <input type="password" />
      </div>
      <div>
        <button>Sign In</button>
      </div>
    </SignInAndUpNoSSR>
I'm trying to customize the signin form
r

rp

05/06/2022, 9:03 AM
you are approaching this incorrectly
check out styling change guide in our docs
and also advanced customisation -> react component override section
f

funk101

05/06/2022, 9:04 AM
ok thanks
so really, the whole dynamic thing I don't need in this case, just restyle, and form fields if I want
*add form fields
(add form fields for some other info I may need to capture)
r

rp

05/06/2022, 9:28 AM
yea..
2 Views