I can't use custom login button

[koraykavruk]

I couldn't use it with custom button. It wants auth provider, but useGoogleLogin cannot be used in auth provider. Can you help me? It would be nice if the client id could be sent as options in useGoogleLogin.

[MomenSherif]

Hello @koraykavruk,

Thank you for being the first one to open an issue :D,

We need to add GoogleOAuthProvider component (step number 3 in how-to-use) and pass clientId as a props, which is normal context provider similar to store provider of redux as an example.

you can add provider any where you like to add it is just context provider which will provide all values to its descendent

if you provided in App component for example

export default function App() {
  return (
    <GoogleOAuthProvider clientId="xxxx">
      <div>
        <h1>@react-oauth/google</h1>
        <LoginPage />
      </div>
    </GoogleOAuthProvider>
  );
}

function LoginPage() {
  const login = useGoogleLogin({
    onSuccess: tokenResponse => {
      console.log(tokenResponse);
    },
  });

  return (
    <div>
      <button onClick={() => login()}>Login with google✌</button>
    </div>
  );
}

useLogin is used in component LoginPage, which is rendered inside GoogleOAuthProvider, it can be at any level of react components tree

if you provided around in react entry file. for example index.js in create-react-app

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <GoogleOAuthProvider clientId='xxxx'>
       <App />
      </GoogleOAuthProvider>
    </React.StrictMode>,
);

and you can use the hook inside you component for example because you are rendered inside the provider.

unfortunately changing useGoogleLogin api to have clientId, will require changes in the hole package which will increase its size and I consider the size to be small as possible (check bundlephobia).

and the effort of adding the <GoogleOAuthProvider /> is a small step.