Hi, I'm following the nexjs guide exactly and got ...
# support-questions
j
Hi, I'm following the nexjs guide exactly and got to this step: https://supertokens.com/docs/thirdparty/nextjs/setting-up-backend Clicking on the third party sign on or the email sign on just pops up with "something went wrong", network monitor shows the api path is returning 404 which looks like what should be happening in the api path. Does the documentation need to be updated?
r
hey @Judas Moses
the docs are correct and updated
can you enable debug logging on the backend and make the API call?
What are the logs output?
j
The only logs you get from nextjs are compilation logs
Copy code
> next dev

Debugger attached.
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\liam.boreback\personal\graphql-crud\.env
wait  - compiling...
event - compiled client and server successfully in 677 ms (312 modules)
wait  - compiling /api/auth/[[...path]]...
wait  - compiling...
event - compiled client and server successfully in 125 ms (329 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 150 ms (330 modules)
wait  - compiling /auth/[[...path]] (client and server)...
wait  - compiling...
event - compiled client and server successfully in 122 ms (343 modules)
@rp
r
How have you enabled debug logs?
j
I'm not really sure what you mean by that
j
apologies had trouble getting the debugger to work with the new confi
Copy code
com.supertokens {t: "2022-05-19T05:52:32.822Z", message: "Started SuperTokens with debug logging (supertokens.init called)", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:270:18" sdkVer: "9.2.
0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.823Z", message: "appInfo: {"appName":"graphql-crud","websiteDomain":"http://localhost:3000","apiDomain":"http://localhost:3000","apiBasePath":"/api/auth/"}", file: "C:\Users\user\personal\graphql-crud\no
de_modules\supertokens-node\lib\build\supertokens.js:271:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.824Z", message: "framework: express", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:273:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.826Z", message: "session init: antiCsrf: NONE", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:164:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.826Z", message: "session init: cookieDomain: undefined", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:165:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.827Z", message: "session init: cookieSameSite: lax", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:166:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.827Z", message: "session init: cookieSecure: false", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:167:18" sdkVer: "9.2.0"} +0ms
Copy code
com.supertokens {t: "2022-05-19T05:52:32.828Z", message: "session init: refreshTokenPath: /api/auth/session/refresh", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:168:18" sdkVer: "9
.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.828Z", message: "session init: sessionExpiredStatusCode: 401", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\recipe\session\recipe.js:171:18" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.847Z", message: "middleware: Started", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:158:26" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.848Z", message: "middleware: requestRID is: thirdpartyemailpassword", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:172:26" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.849Z", message: "middleware: Checking recipe ID for match: thirdparty", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:181:34" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.850Z", message: "middleware: Checking recipe ID for match: session", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:181:34" sdkVer: "9.2.0"} +0ms

  com.supertokens {t: "2022-05-19T05:52:32.850Z", message: "middleware: Not handling because no recipe matched", file: "C:\Users\user\personal\graphql-crud\node_modules\supertokens-node\lib\build\supertokens.js:190:34" sdkVer: "9.2.0"} +0ms
Not sure why the recipe is not installed
r
You need to initialise the same recipe on the frontend and on the backend
same set of recipes*
j
I have I think
Copy code
import ThirdPartyNode from "supertokens-node/recipe/thirdparty";
import SessionNode from "supertokens-node/recipe/session";
import { appInfo } from "./appInfo";
import { TypeInput } from "supertokens-node/types";
import { env } from "process";

export const backendConfig = (): any => {
  return {
    enableDebugLogs: true,
    framework: "express",
    supertokens: {
      connectionURI: env.SUPERTOKENS_CONNECTIONURI!,
      apiKey: env.SUPERTOKENS_APIKEY,
    },
    appInfo,
    recipeList: [
      ThirdPartyNode.init({
        signInAndUpFeature: {
          providers: [
            // We have provided you with development keys which you can use for testsing.
            // IMPORTANT: Please replace them with your own OAuth keys for production use.
            ThirdPartyNode.Google({
              clientId: env.GOOGLE_OAUTH_CLIENTID!,
              clientSecret: env.GOOGLE_OATH_CLIENTSECRET!,
            }),
            // ThirdPartyNode.Github({
            //   clientId: "467101b197249757c71f",
            //   clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
            // }),
          ],
        },
      }),
      SessionNode.init(),
    ],
    isInServerlessEnv: true,
  };
};
I initialised google in backend
Copy code
import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import SessionReact from "supertokens-auth-react/recipe/session";
import { appInfo } from "./appInfo";

export let frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
      ThirdPartyEmailPasswordReact.init({
        emailVerificationFeature: {
          mode: "REQUIRED",
        },
        signInAndUpFeature: {
          providers: [
            ThirdPartyEmailPasswordReact.Google.init(),
            // ThirdPartyEmailPasswordReact.Github.init(),
          ],
        },
      }),
      SessionReact.init(),
    ],
  };
};
and google in frontend
r
You are using
thirdparty
on the backend but
thirdpartyemailpassword
on the frontend
that's why it's not working
you need to use thirdparty on the frontend as well (see the config guide here: https://supertokens.com/docs/thirdparty/nextjs/init)
j
Thanks! I've got another error about certificates now but pretty sure that's related to my vpn 🙂
5 Views