Gmail API in a React

by
with no comment
React

To send an email using the Gmail API in a React application, you must go through the following steps:

1. Setup Google API Project

  1. Enable Gmail API:
    • Visit the Google Cloud Console.
    • Create or select a project.
    • Go to APIs & Services > Library and enable the Gmail API.
  2. Create OAuth 2.0 Credentials:
    • Go to APIs & Services > Credentials.
    • Click Create Credentials > OAuth 2.0 Client IDs.
    • Choose Web Application and set the redirect URI (e.g., http://localhost:3000 for development).
    • Save the Client ID and Client Secret.

2. Install Required Dependencies

Install the Google API client library:

npm install gapi-script

3. React Code to Send Email

Here’s the detailed code:

Step 1: OAuth2 Authentication

First, authenticate the user and get an access token.

import React, { useEffect, useState } from 'react';
import { gapi } from 'gapi-script';

const CLIENT_ID = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
const API_KEY = 'YOUR_API_KEY';
const SCOPES = 'https://www.googleapis.com/auth/gmail.send';

const App = () => {
  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    // Load the Google API client
    function initGapiClient() {
      gapi.load('client:auth2', async () => {
        await gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          scope: SCOPES,
        });

        const authInstance = gapi.auth2.getAuthInstance();
        setIsAuthorized(authInstance.isSignedIn.get());
        authInstance.isSignedIn.listen(setIsAuthorized); // Listen for sign-in state changes
      });
    }

    initGapiClient();
  }, []);

  const handleLogin = () => {
    const authInstance = gapi.auth2.getAuthInstance();
    authInstance.signIn();
  };

  const handleLogout = () => {
    const authInstance = gapi.auth2.getAuthInstance();
    authInstance.signOut();
  };

  return (
    <div>
      <h1>Send Email with Gmail API</h1>
      {!isAuthorized ? (
        <button onClick={handleLogin}>Login with Google</button>
      ) : (
        <>
          <button onClick={handleLogout}>Logout</button>
          <SendEmail />
        </>
      )}
    </div>
  );
};

export default App;

Step 2: Send Email

Once authenticated, use the gmail.users.messages.send endpoint to send an email.

const SendEmail = () => {
  const sendEmail = async () => {
    try {
      const rawEmail = `
From: "Your Name" <your-email@gmail.com>
To: recipient-email@gmail.com
Subject: Test Email
Content-Type: text/plain; charset="UTF-8"

This is a test email sent from a React application using the Gmail API.
`;

      const encodedEmail = btoa(rawEmail)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=+$/, ''); // Base64 URL encoding

      const response = await gapi.client.gmail.users.messages.send({
        userId: 'me',
        resource: {
          raw: encodedEmail,
        },
      });

      console.log('Email sent successfully:', response);
    } catch (error) {
      console.error('Error sending email:', error);
    }
  };

  return (
    <div>
      <button onClick={sendEmail}>Send Email</button>
    </div>
  );
};

export default SendEmail;

Key Points

  1. Base64 Encoding:
    • Emails sent through the Gmail API must be Base64 URL-encoded.
    • Use btoa() to encode the email and replace characters for URL safety.
  2. Scopes:
    • The scope https://www.googleapis.com/auth/gmail.send is required to send emails.
  3. Authorization:
    • Users must grant permission to send emails on their behalf.
  4. Google Limits:
    • Ensure your app complies with Google’s policies to avoid quota or spam restrictions.

Complete Code

Below is the complete implementation for sending an email using the Gmail API in a React app:

import React, { useEffect, useState } from 'react';
import { gapi } from 'gapi-script';

const CLIENT_ID = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
const API_KEY = 'YOUR_API_KEY';
const SCOPES = 'https://www.googleapis.com/auth/gmail.send';

const App = () => {
  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    function initGapiClient() {
      gapi.load('client:auth2', async () => {
        await gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          scope: SCOPES,
        });

        const authInstance = gapi.auth2.getAuthInstance();
        setIsAuthorized(authInstance.isSignedIn.get());
        authInstance.isSignedIn.listen(setIsAuthorized); // Listen for sign-in state changes
      });
    }

    initGapiClient();
  }, []);

  const handleLogin = () => {
    const authInstance = gapi.auth2.getAuthInstance();
    authInstance.signIn();
  };

  const handleLogout = () => {
    const authInstance = gapi.auth2.getAuthInstance();
    authInstance.signOut();
  };

  const sendEmail = async () => {
    try {
      const rawEmail = `
From: "Your Name" <your-email@gmail.com>
To: recipient-email@gmail.com
Subject: Test Email
Content-Type: text/plain; charset="UTF-8"

This is a test email sent from a React application using the Gmail API.
`;

      const encodedEmail = btoa(rawEmail)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=+$/, ''); // Base64 URL encoding

      const response = await gapi.client.gmail.users.messages.send({
        userId: 'me',
        resource: {
          raw: encodedEmail,
        },
      });

      console.log('Email sent successfully:', response);
    } catch (error) {
      console.error('Error sending email:', error);
    }
  };

  return (
    <div>
      <h1>Send Email with Gmail API</h1>
      {!isAuthorized ? (
        <button onClick={handleLogin}>Login with Google</button>
      ) : (
        <>
          <button onClick={handleLogout}>Logout</button>
          <button onClick={sendEmail}>Send Email</button>
        </>
      )}
    </div>
  );
};

export default App;

Important Notes

  1. CORS Issues:
    • Since Gmail API requests are made directly from the browser, ensure CORS is enabled for your credentials in Google Cloud Console.
  2. Production:
    • Replace localhost redirect URI with your production domain.
    • Use HTTPS in production.
  3. Email Quota:
    • Gmail API limits the number of emails you can send per day for free accounts. Use G Suite for higher quotas.

Let me know if you need further help!

Google API authentication in a React app and generate a client email signature

To integrate Google API authentication in a React app and generate a client email signature, you need to:

  1. Authenticate the user using Google’s OAuth 2.0.
  2. Retrieve an access token.
  3. Use the Google API to interact with the Gmail service for email signatures.

Below is a detailed implementation:

1. Install Required Packages

Install the following dependencies:

npm install gapi-script @react-oauth/google

2. Configure Google API

Ensure you have a Google Cloud project with the Gmail API enabled and an OAuth 2.0 Client ID.

3. React Code for Authentication and Fetching Email Signature

import React, { useEffect, useState } from "react";
import { gapi } from "gapi-script";
import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

const CLIENT_ID = "YOUR_GOOGLE_CLIENT_ID"; // Replace with your Google OAuth Client ID

const App = () => {
  const [accessToken, setAccessToken] = useState(null);
  const [signature, setSignature] = useState(null);

  useEffect(() => {
    // Load the Google API client on component mount
    const initClient = () => {
      gapi.load("client:auth2", () => {
        gapi.client.init({
          clientId: CLIENT_ID,
          scope: "https://www.googleapis.com/auth/gmail.settings.basic",
        });
      });
    };
    initClient();
  }, []);

  const handleLoginSuccess = (response) => {
    const token = response.credential;
    setAccessToken(token);

    // Initialize gapi with the token
    gapi.auth.setToken({ access_token: token });
    gapi.client.setApiKey(CLIENT_ID);

    // Load Gmail API and fetch email signature
    fetchEmailSignature();
  };

  const handleLoginError = () => {
    console.error("Login Failed");
  };

  const fetchEmailSignature = async () => {
    try {
      await gapi.client.load("gmail", "v1"); // Load the Gmail API

      const response = await gapi.client.gmail.users.settings.sendAs.list({
        userId: "me",
      });

      if (response.result && response.result.sendAs) {
        const signatureData = response.result.sendAs.find(
          (item) => item.isPrimary
        );

        if (signatureData) {
          setSignature(signatureData.signature || "No signature found.");
        }
      }
    } catch (error) {
      console.error("Error fetching email signature:", error);
    }
  };

  return (
    <GoogleOAuthProvider clientId={CLIENT_ID}>
      <div>
        <h1>Google API Email Signature</h1>
        {!accessToken ? (
          <GoogleLogin
            onSuccess={handleLoginSuccess}
            onError={handleLoginError}
          />
        ) : (
          <div>
            <h3>Your Email Signature:</h3>
            <p>{signature || "Loading..."}</p>
          </div>
        )}
      </div>
    </GoogleOAuthProvider>
  );
};

export default App;

Explanation

  1. OAuth Integration:
    • GoogleOAuthProvider and GoogleLogin handle user login using OAuth 2.0.
  2. Access Token:
    • Upon successful login, the credential field from the response is the access token.
  3. Gmail API:
    • The Gmail API is loaded using gapi.client.load("gmail", "v1").
    • Email signatures are fetched using the users.settings.sendAs.list method.
  4. Scopes:
    • The scope https://www.googleapis.com/auth/gmail.settings.basic is used to access email settings, including the signature.

Prerequisites

  1. Google Cloud Console:
    • Ensure you have created a project, enabled the Gmail API, and configured the OAuth 2.0 Client ID.
  2. OAuth Consent Screen:
    • Set up the OAuth consent screen in the Google Cloud Console.

Security

Store sensitive data like the CLIENT_ID securely (e.g., in environment variables) and avoid exposing secrets in the client-side code.

Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *