Where are the TypeScript type declarations for Sign in With Google (GSI) library?

user_229792 0
Viewed 1941

I'm implementing "Sign in with Google" using the Google "GSI" library. My application uses Next.js and TypeScript, so I'm looking for:

  1. An npm package including the GSI client library.
  2. TypeScript type declarations for the GSI client library.

I haven't been able to find either of these: I only see a script to load from https://accounts.google.com/gsi/client, and an informal API reference here.

Where can I find the GSI library and type declarations on npm?

google-signin npm typescript
4 Answers

Types are at @types/google-one-tap and can be used like so:

declare global {
  const google: typeof import('google-one-tap');
}

I don't know where to find the actual library on npm, though.

user_2297920
  1. An NPM package for accounts.google.com/gsi/client does not exist, at least not yet. The only way of using it is via script tag.
  2. In addition to @types/google-one-tap from jameshfisher's answer, there is also @types/google.accounts.

Both google-one-tap or google.accounts can be added to tsconfig types.

tsconfig.json

"types": ["google-one-tap", "google.accounts"]
user_98688080
user_80824090

If you dont want to use the unofficial types libraries, you have an alternative as follows.

// initialize gsi client
(window as any).google.accounts.id.initialize({
  client_id: GOOGLE_CLIENT_ID,
  callback: onSuccess
})
// render the login button
(window as any).google.accounts.id.renderButton(
  document.getElementById('sign-in-div'),
  {
    type: 'standard'
  }
)

You can use (window as any) before you access the google object. But you need to use this only after you know the google object will be available.

user_5071360
Related