<@498057949541826571> I am trying to add one-tap-...
# support-questions-legacy
s
@rp_st I am trying to add one-tap-google apart for default social login, but I needs to modify the pop-up, can you help here,
s
I checked this demo, but not able to find,
how to customize the pop-up
r
i don't think you can customise the popup. It's served by google
s
oh I got it, the text "Sign in to SuperToken Demo with google" is served by google? is that so?
and I have one que also, will, the same client_id will work for one-tap-sign or need to create new. @rp_st
by the way you guys are very supportive, I must say
r
> oh I got it, the text "Sign in to SuperToken Demo with google" is served by google? > is that so? Yea. Thats cause you are using our dev credentials for google oauth. Use your own, so you can configre the text on google's dashboard.
> and I have one que also, will, the same client_id will work for one-tap-sign or need to create new. Same should work
s
ok, I have replaced the client_id with ours one, but not able to see the pop-up used like below
Copy code
<ParentComponenet>
     <GoogleOneTapLogin
            onSuccess={doLogin}
            googleAccountConfigs={{
              client_id:
                "my_id",
            prompt_parent_id: "google-onetap-container",
            cancel_on_tap_outside: false,
            }}
      />
<SocialLogin/>
</ParentComponent>
can you suggest, at what steps I am doing wrong.?
r
@sattvikc can you help here?
s
do you see any error in the browser console?
also please check if you have missed out
<div id="google-onetap-container"></div>
s
getting below two errors
Copy code
client:48 [GSI_LOGGER]: The given origin is not allowed for the given client ID.
and
Copy code
GET https://accounts.google.com/gsi/status?client_id=997955211260-7sno3fvvbgmbmpfk0.apps.googleusercontent.com&as=S3VXo5FH%2BR3lHeiZxYkjbw 403 (Forbidden)
s
you will need to set authorised JavaScript origins in the google cloud console
s
the below error I am still getting when trying to sign via default social sign-on. but still able to redirect the login page of google
Copy code
GET https://accounts.google.com/gsi/status?client_id=997955211260-7sno3fvvbgmbmpfk0.apps.googleusercontent.com&as=S3VXo5FH%2BR3lHeiZxYkjbw 403 (Forbidden)
s
have you added the javascript origins ?
s
yes yes already.
s
also try adding
http://localhost
if you are testing it from localhost
s
added there
s
not very sure then, you might need to check the google documentation for it
s
Hi, @sattvikc I am usign thirdpartypasswordless recipe, for one-tap-sign up, also keeping the default third party google sign, but getting
Error: Auth state verification failed. The auth provider responded with an invalid state
can you help here, what needs to be done on backend side, please
s
isn't that error on the frontend?
s
yes yes
s
can you show me your doLogin code ?
s
sure
Copy code
const doLogin = async (data) => {
    console.log("data", data);
    if (data.credential) {
      // we do this call so that the state is created and saved in storage.
      await getThirdPartyAuthorisationURLWithQueryParamsAndSetState({
        thirdPartyId: "google",
        frontendRedirectURI: window.location.toString(),
      });
      const stateInfo = await getThirdPartyStateAndOtherInfoFromStorage();
      console.log("stateInfo", stateInfo);
      if (data.credential && stateInfo !== undefined) {
        const response = await thirdPartySignInAndUp({
          userContext: {
            id_token: data.credential,
            state: stateInfo.stateForAuthProvider,
          },
        });
        console.log("response", response);
        document.location.href = "/";
      }
    }
  };
please ignor console
s
the state is not being passed in the right place
one sec
are you following our example?
s
yes
s
do I need to add below as well?
Copy code
preAPIHook: async (context) => {
                if (context.action === "THIRD_PARTY_SIGN_IN_UP") {
                    if (typeof context.requestInit.body !== "string") {
                        throw new Error("should not happen");
                    }
                    let body = JSON.parse(context.requestInit.body);

                    body!.redirectURIInfo = undefined;
                    body!.oAuthTokens = { id_token: context.userContext.id_token };

                    context.requestInit.body = JSON.stringify(body);
                }
                return context;
            },
this as well?
and I have call the thirdPartyPasswordless like below
Copy code
ThirdPartyPasswordless.init({
      preAPIHook: async (context) => {
        let url = context.url;

        // is the fetch config object that contains the header, body etc..
        let requestInit = context.requestInit;

        let action = context.action;
        console.log("actions", context);
        if (action === "EMAIL_EXISTS") {
        } else if (action === "PASSWORDLESS_CONSUME_CODE") {
        } else if (action === "PASSWORDLESS_CREATE_CODE") {
        } else if (action === "PASSWORDLESS_RESEND_CODE") {
        } else if (action === "PHONE_NUMBER_EXISTS") {
        }

        // events such as sign out are in the
        // session recipe pre API hook (See the info box below)
        return {
          requestInit,
          url,
        };
      },
      override: {
        functions: (oI) => {
          return {
            ...oI,
            getThirdPartyAuthStateFromURL: (input) => {
              if (input.userContext.state) {
                return input.userContext.state;
              }
              return oI.getThirdPartyAuthStateFromURL(input);
            },
          };
        },
      },
    }),
s
yes the preAPIHook is required
we are modifying the request body to send oAuthTokens instead of code
s
but this will break the default google sign-up process?
s
yes
s
but there is a business requrement to have it both, please help
s
but you can inspect the userContext and decide
s
means at the backend?
s
no, in the frontend
s
can you tell me please how?
s
the preAPIHook can be like this:
Copy code
preAPIHook: async (context) => {
    if (context.action === "THIRD_PARTY_SIGN_IN_UP") {
        if (context.userContext.id_token !== undefined) {
            if (typeof context.requestInit.body !== "string") {
                throw new Error("should not happen");
            }
            let body = JSON.parse(context.requestInit.body);
    
            body!.redirectURIInfo = undefined;
            body!.oAuthTokens = { id_token: context.userContext.id_token };
    
            context.requestInit.body = JSON.stringify(body);
        }
    }
    return context;
},
14 Views