Ok

Hi,I have a question about using SuperTokens in Next.js,When we login or even switch to forget password page,The page was reloaded again,Can we prevent default page loading or not?

hey @User , what router do you use in NextJS? Right now, we support react-router-dom which prevents app page reload, but i don't think that will work with NextJS right?

I am sorry,My English is not very good and I think you didnt realize that what i said,i dont have problem with next routing system,when i use superToken in my nextjs application and when i click to login submit button, page reload again and then redirect to index page,actually I want to use my login withought reload(like SPA),Is it possible?

Yes. It is possible if you use react-router-dom. Do you use that lib?

Thanks,I will check it,I thought that we can not use react-router-dom in Next.js

You can (apparently): https://colinhacks.com/essays/building-a-spa-with-nextjs

Once you have that figured, you can use something like this in the router:

import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; 

render() {
        return (
            <Router>
                <YourNavBar/>
                <Switch>
              {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
                    {...}
                </Switch>
                <YourFooter />
            </Router>
        );
    }

Let me know if this works.. TBH, i'm not even sure making NextJS as an SPA is 100% possible since it's server side rendered..

Thanks a lot!

I use node.js for backend and my sign in api is this,when i submit login botton, i get this error: Something went wrong. Please try again

app.post('/api/auth/signin', function (req, res) { //const user = req.body.username; //const pwd = req.body.password; const user = req.body.formFields[0].value; const pwd = req.body.formFields[1].value; // return 400 status if username/password is not exist if (!user || !pwd) { return handleResponse(req, res, 400, null, "Username and Password required."); } const userData = userList.find(x => x.username === user && x.password === pwd); // return 401 status if the credential is not matched if (!userData) { return handleResponse(req, res, 401, null, "Username or Password is Wrong."); } // get basic user details const userObj = getCleanUser(userData); // generate access token const tokenObj = generateToken(userData); // generate refresh token const refreshToken = generateRefreshToken(userObj.userId); // refresh token list to manage the xsrf token refreshTokens[refreshToken] = tokenObj.xsrfToken; // set cookies res.cookie('refreshToken', refreshToken, COOKIE_OPTIONS); res.cookie('XSRF-TOKEN', tokenObj.xsrfToken); return handleResponse(req, res, 200, { user: userObj, token: tokenObj.token, expiredAt: tokenObj.expiredAt }); });

when i log userData ,everything is fine and finally my backend send response:

{ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjMiLCJuYW1lIjoiQ2x1ZSIsInVzZXJuYW1lIjoiYW1pbkBnbWFpbC5jb20iLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE2MjMwNjEwNDIsImV4cCI6MTYyMzA2MTk0Mn0.Z6N8lxwxjPy2hbQKTUqlsoRRQFStFnz-ySmQH04sr7g', expiredAt: 1623061942908, xsrfToken: 'HPW9JMVfA4XYf0Zn8bayhssO' }

but in login page i took error => Something went wrong. Please try again

@User , I have a related question, do you want to modify the default signin API in someway?

If not, then you don't need to manually implement the API like you have

Yes,We have our backend and our database to store users informations

Got it.

So you should see our signin implementation, and base yours off that. Our signin impl: https://github.com/supertokens/supertokens-node/blob/master/lib/ts/recipe/emailpassword/api/signin.ts

thanks

For example, you don't need to do session management yourself and can use our session recipe. In this API, you would want to call

createNewSession

function after you get the userId info like here: https://github.com/supertokens/supertokens-node/blob/master/lib/ts/recipe/emailpassword/api/signin.ts#L73

And the output of this API must be of type:

{
  status: "OK",
  user: {
    id: string,
    email: string
  }
}

In general, you want to follow the API spec for the APIs as mentioned here: https://github.com/supertokens/frontend-driver-interface/blob/master/v1.8.0.md

This is the API spec for the signin API: https://github.com/supertokens/frontend-driver-interface/blob/master/v1.8.0.md#signin-api

I've also sent you a DM. Please have a look when you get the chance

Would it be possible to use SuperTokens in a headless fashion (meaning we take control of the frontend)?

@User yes. Your frontend can query the APIs exposed by our backend SDK. The APIs are here: https://github.com/supertokens/frontend-driver-interface/blob/master/v1.8.0.md In the above file, APIs are divided by recipe. This being said, you may still want to use our session management lib (supertokens-website, or the session recipe from supertokens-auth-react)

Hello! Is it possible to somehow override default behaviour while accesing a protected page with Nextjs? I don't want to redirect the user immediately, but show some message before that.

Yea.. You can pass the

requireAuth

prop to the auth wrapper component and set it to

false

. Like shown here: https://supertokens.io/docs/thirdpartyemailpassword/common-customizations/sessions/checking-session-front-end#with-react-context (See step 2)

Then in your component, you can use the session context to query if a session exists or not. And show UI accordingly.

Thanks for the answers! I understand what I should do now, but... I am following your guide for nextJS implementation, so i create the wrapper as such:

const ThirdPartyEmailPasswordAuthNoSSR = dynamic(
  new Promise((res) =>
    res(ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth)
  ),
  { ssr: false }
);