https://supertokens.com/ logo
Join Discord
Powered by
I'm using NextJS. In the supertokens example it us...
# general
f
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
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
ok then, why the error? I've followed the example
r
from where is this error coming?
for example, is it coming when you use EmailPasswordAuth wrapper component?
f
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
can you show me the imports?
f
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
are you doing supertokens.init() in _app.tsx?
f
`import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
export default function SignIn() { return ( ); }
r
this.
f
no, not in _app.js
r
you should make sure that the init is happening in all frontend routes
f
wait, this is my _app.js file
r
one way of doing that is to put the supertokens.init in _app.js
f
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
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
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
this is more of a nextjs issue
check out the 
dynamic
HOC provided by nextjs
f
I actually am using that for protecting pages
r
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
I appreciate your help, but it's not clear what that dynamic() would be
to me
r
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
Ah man, thanks so much. I see it now
r
coool
f
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
you are approaching this incorrectly
check out styling change guide in our docs
and also advanced customisation -> react component override section
f
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
yea..
4 Views
PreviousNext
Powered by