react-google-login-ts

React Google Login Hook

A lightweight React hook package for implementing Google OAuth2 login functionality in React applications.

Features

Easy-to-use React hooks for Google OAuth2 integration
Handle Google login flow with minimal setup
Automatic window message handling
TypeScript support
Zero dependencies (other than React)

Installation

npm install react-google-login-ts

Or using yarn:

yarn add react-google-login-ts

Note: This package requires React 16.8.0 or higher as a peer dependency.

Usage

1. Set Up Google OAuth2

First, set up your Google OAuth2 credentials in the Google Cloud Console and get your Client ID.

2. Implement Login Button

import { googleLoginClick } from 'react-google-login-ts';

function LoginButton() {
   const handleLogin = () => {
      const clientId = 'YOUR_GOOGLE_CLIENT_ID';
      const redirectPath = 'http://your-domain.com/auth/callback';
      googleLoginClick(clientId, redirectPath);
   };

   return <button onClick={handleLogin}>Login with Google</button>;
}

3. Handle Redirect Page

Create a callback page component:

import { useRedirectPageGoogleLogin } from 'react-google-login-ts';

function GoogleCallback() {
   useRedirectPageGoogleLogin('YOUR_BACKEND_URL');
   return <div>Processing login...</div>;
}

4. Get Login Data

In your main component or where you need the login data:

import { useGetDataFromGoogleLogin } from 'react-google-login-ts';

function App() {
   const loginData = useGetDataFromGoogleLogin((data) => {
      console.log('Login successful:', data);
   });

   return <div>{loginData ? <div>Welcome, {loginData.name}!</div> : <LoginButton />}</div>;
}

API Reference

`googleLoginClick`

function googleLoginClick(clientId: string, redirectPath: string): void;

Opens the Google login window.

clientId: Your Google OAuth2 client ID
redirectPath: The URL where Google will redirect after authentication

`useRedirectPageGoogleLogin`

function useRedirectPageGoogleLogin(backendUrl: string): void;

Hook for handling the OAuth2 callback.

backendUrl: Your backend endpoint that handles the OAuth2 code exchange

`useGetDataFromGoogleLogin`

function useGetDataFromGoogleLogin(callback?: (data: any) => any): any;

Hook for receiving the login data.

callback: Optional callback function that runs when login data is received
Returns the login data object

📄 License

"This project is licensed under the MIT License - see the LICENSE.md file or details.

Made with ❤️ using TypeScript