https://supertokens.com/ logo
Join Discord
Powered by
Hi, I am facing an issue with Google sign-in, emai...
# support-questions-legacy
m
Hi, I am facing an issue with Google sign-in, email password sign is working. Below is my config
r
Hi, I am facing an issue with Google sign-in, email password sign is working. Below is my config
hey!
@maheshmogal let's talk here
m
Sure, let me share my code
I am new to discord so let me figure out how to add code block
Copy code
const appInfo = {
    // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
    appName: "Super token test",
    apiDomain: "http://localhost:4000",
    websiteDomain: "http://localhost:3000",
    apiBasePath: "/auth",
    websiteBasePath: "/auth"
  }


export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
      ThirdPartyEmailPasswordReact.init({
        useShadowDom: false,
        signInAndUpFeature: {
          signUpForm: {
            termsOfServiceLink: "https://example.com/terms-of-service",
            privacyPolicyLink: "https://example.com/privacy-policy"
          },
          providers: [
            ThirdPartyEmailPasswordReact.Google.init(),
          ],
        },
      }),
      SessionReact.init(),
    ],
  }
}
Below is backend code
Copy code
framework: 'express',
  // isInServerlessEnv: true,
  supertokens: {
    // try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
    connectionURI:
      '#URL',
    apiKey: '#API_KEY',
  },
  appInfo: {
    // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
    appName: 'Super token test',
    apiDomain: 'http://localhost:4000',
    websiteDomain: 'http://localhost:3000',
    apiBasePath: '/auth',
    websiteBasePath: '/auth',
  },
Copy code
recipeList: [
    ThirdPartyEmailPassword.init({
      providers: [
        Google({
          clientId:
            '1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com',
          clientSecret: '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',
        }),
      ],
      override: {
        apis: (originalImplementation) => {
          return {
            ...originalImplementation,
            emailPasswordSignUpPOST: async function (input) {
              if (
                originalImplementation.emailPasswordSignUpPOST === undefined
              ) {
                throw Error('Should never come here')
              }
              let response =
                await originalImplementation.emailPasswordSignUpPOST(input)
              if (response.status === 'OK') {
                // TODO check if user exists in table
                console.log('FROM emailPasswordSignUpPOST: ', response)
                const doesUserExist = await checkUserExists(response.user.email)
                if (!doesUserExist) {
                  await onNewUserSignUp(response.user.email, response.user.id)
                }
              }
              return response
            },
            thirdPartySignInUpPOST: async function (input) {
              if (originalImplementation.thirdPartySignInUpPOST === undefined) {
                throw Error('Should never come here')
              }
              let response =
                await originalImplementation.thirdPartySignInUpPOST(input)

              console.log('FROM thirdPartySignInUpPOST: ', response)

              if (response.status === 'OK') {
                if (response.createdNewUser) {
                  // console.log('FROM thirdPartySignInUpPOST: ', response)
                  await onNewUserSignUp(response.user.email, response.user.id)
                }
              }
              return response
            },
          }
        },
      },
    }),
r
you should probably remopve your API key
m
😅
removed
r
the config seem about right.
m
Copy code
Session.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,
            createNewSession: async function (input) {
              let userId = input.userId
              let teamId = 1
              input.accessTokenPayload = {
                ...input.accessTokenPayload,
                teamId,
              }
              return originalImplementation.createNewSession(input)
            },
          }
        },
      },
    }), //
This is last part
Yes this was working in my previous test and now it is not working
r
Can you change the providers array on the backend to be like:
Copy code
let google = Google({...});

providers: [
                {
                    ...google,
                    get: function (redirectURI: string | undefined, authCodeFromRequest: string | undefined, userContext: any) {
                        const getResult = google.get(redirectURI, authCodeFromRequest, userContext);
                        return {
                            ...getResult,
                            getProfileInfo: async function (authCodeResponse: any, userContext: any) {
                                try {
                                    const result = await getResult.getProfileInfo(authCodeResponse, userContext);
                                    console.log(result);
                                    return result;
                                } catch (err) {
                                    console.log(err);
                                    throw err;
                                }
                            }
                        };
                    }
                },
            ],
And what is the console output when you try and login with google
m
It comes to thirdPartySignInUpPOST and I see response log but before that I see below error
Copy code
Error: Request failed with status code 400
    at createError (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\createError.js:16:15)
    at settle (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\settle.js:17:12)
    at IncomingMessage.handleStreamEnd (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\adapters\http.js:269:11)
    at IncomingMessage.emit (node:events:532:35)
    at endReadableNT (node:internal/streams/readable:1346:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
r
Yea. Can you make the change to your code as per my code snippet above
and then show me what the output is
m
ok trying out
Copy code
Error: Request failed with status code 400
    at createError (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\createError.js:16:15)
    at settle (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\settle.js:17:12)
    at IncomingMessage.handleStreamEnd (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\adapters\http.js:269:11)
    at IncomingMessage.emit (node:events:532:35)
    at endReadableNT (node:internal/streams/readable:1346:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
{
  id: '101773664706409242493',
  email: { id: 'mogal.mahesh33@gmail.com', isVerified: true }
}
r
hmm. So there is no issue with getting the profile info
m
yes, On frontend I got this error
http://localhost:4000/auth/signinup 500 (Internal Server Error)
r
Can you comment out your override for thirdPartySignInUpPOST and see if you still get this same error?
m
I removed all overrides
still same error
I also tried with different email
r
Can you add back the overrides
and then surround this line with a try / catch and see what the error is?
Copy code
let response =
                await originalImplementation.thirdPartySignInUpPOST(input)
(in your thirdPartySignInUpPOST override function)
m
ok
this function is throwing below error
Copy code
Error: Request failed with status code 400
    at createError (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\createError.js:16:15)
    at settle (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\core\settle.js:17:12)
    at IncomingMessage.handleStreamEnd (D:\code\projects\node\neospeak-backend\backend\node_modules\axios\lib\adapters\http.js:269:11)
r
Hmm okay. Can you open an issue about this on our GitHub? I’ll have a look tonight
m
sure
Thanks @rp_st
r
By the way, what is the redirect uri that u have configured on Google’s dashboard?
And what’s the request body for this API call?
m
I am using the google client id and secret provided by Supertoken. I also tried creating a new project that time I used this URL 
http://localhost:3000/auth/callback/google
I am not passing any request data to sign in with google request
r
Can I see the request body to the signInUp api call?
Oh! Are you using react 18?
m
Yes react 18
r
You need to disable reactStrictMode
Then it will work
Our SDK as some issues with compatibility with react 18 in dev mode when reactStrictMode is true. In prod build it works just fine
We are working on fixing the SDK to be compatible with react 18
m
Oh Man 😅
It worked after disabling react strict mode
One more question, do we need to add 
Authorized JavaScript origins
when setting up the google console project?
and redirect URL is 
http://localhost:3000/auth/callback/{social_provider}
r
Yes.
/auth/callback/google
In our docs, there is a link to a. Guide for configuring stuff on the google dashboard
m
Ok I will find that out 👍
Thanks again @rp_st
12 Views
PreviousNext
Powered by