How to implement Google One Tap

[irg1008]

Hi, I was wondering how to reuse callback and login endpoint for google auth while using the one tap solution:

I have the next (Next.JS) front code

export const GoogleOneTap = () => {
  const logInUrl = `${config.apiUrl}/auth/google/callback`
  return (
    <>
      <Script src="https://accounts.google.com/gsi/client" async defer />
      <div
        id="g_id_onload"
        data-client_id={config.googleClientID}
        data-login_uri={logInUrl}
        data-cancel_on_tap_outside="false"
      />
    </>
  )
}

I was wondering if there is a built-in solution or how should I parse the data to achieve one tap login

Thank you

[paskal]

This library is backend only, so it can't assist you in that part as it's frontend-only setup, and the only thing from the auth library you need is data-login_uri according to documentation. I've tried to set it up on my website, but the form never displayed. Does it work for you? I think the library could\should be changed only if form displays but you are unable to login after clicking it.

[paskal]

https://remark42.mysite.com/auth/google/callback, you referred to it in the snippet above yourself.

[irg1008]

Yeah I tried with that endpoint but it wouldn't work

[paskal]

Can you please post what the log says? In what way does it not work, do you see webpage with an error rendered by auth package?

[irg1008]

Sure, will do when I get home. But the callback endpoint works when logging in with google and seting the callback on google cloud. It sends the state in a particular way to the auth library. With one tap sign in, google sends the token directly to the front. The said token cannot be passed to the backend (auth library / callback endpoint). We need to parse it somehow and I don't know how.

As I said will post the log, JWT and state after One Tap Sign later at home

[paskal]

@irg1008 could you please check what is going on with the current page and give me the information requested above?