Hi, i have implemented custom UI with ThirdPartyEm...
# support-questions-legacy
g
Hi, i have implemented custom UI with ThirdPartyEmailPassword recipe - react app. i'm getting this error when i try to signin/up with github.
Copy code
Error: Getting userInfo failed with 401: {"message":"Bad credentials","documentation_url":"https://docs.github.com/rest"}
    at Object.originalImplementation.getUserInfo (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\recipe\thirdparty\providers\github.js:86:23)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Object.signInUpPOST (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\recipe\thirdparty\api\implementation.js:35:30)
    at Object.signInUpAPI [as default] (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\recipe\thirdparty\api\signinup.js:68:18)
    at Recipe.handleAPIRequest (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\recipe\thirdparty\recipe.js:73:24)
    at Recipe.handleAPIRequest (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\recipe\thirdpartyemailpassword\recipe.js:63:24)
    at SuperTokens.middleware (C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\supertokens.js:195:38)
    at C:\Users\gouta\supertokens-customapp\backend\node_modules\supertokens-node\lib\build\framework\express\framework.js:128:28
anyone faced the same issue and got it resolved kindly share the solution. thanks
r
hey @gsj
this usually happens if you have provided wrong client id and secret
or if you are callling the signinup API twice (which can happen if you add it in a useEffect and are running react in dev build, with strict mode)
g
here is the code to handlecallback
Copy code
import React, { useEffect } from 'react';
import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword';
const AuthCallbackView: React.FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
          const response = await ThirdPartyEmailPassword.thirdPartySignInAndUp({});

          if (response.status === "OK") {
              console.log(response.user)
              if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) {
                  // sign up successful
                  console.log('sign up successful------------------>');
              } else {
                  // sign in successful
                  console.log('sign in successful------------------>');
              }
              window.location.assign("/homepage");
          } else if (response.status === "SIGN_IN_UP_NOT_ALLOWED") {
              // this can happen due to automatic account linking. Please see our account linking docs
          } else {
              // SuperTokens requires that the third party provider
              // gives an email for the user. If that's not the case, sign up / in
              // will fail.
              // As a hack to solve this, you can override the backend functions to create a fake email for the user.

              window.alert("No email provided by social login. Please use another form of login");
              window.location.assign("/auth"); // redirect back to login page
          }
      } catch (err: any) {
          if (err.isSuperTokensGeneralError === true) {
              // this may be a custom error message sent from the API by you.
              window.alert(err.message);
          } else {
              window.alert("Oops! Something went wrong with SSO Auth.");
          }
      }
    };
    fetchData();
  }, []);

  return null; // Or you can render some loading indicator if needed
};

export default AuthCallbackView;
r
check if useEffect is being called twice or not.
g
i'll check.
Yes it's being called twice. how can i prevent that?
r
google it. It's a react thing
g
okay, thanks for the quick response.
Hy @rp_st another doubt, is the useEffect being called twice is the same issue throwing this error also?
r
Yes
Cause the code can only be consumed once as per the OAuth protocol
So consuming it again with the api call will result in an error the second time
g
oh okay. i'll fix it. thanks for the help.
5 Views