DEV Community: Tapan Kumar Swain

Google Drive Integration: From OAuth Setup to Background Sync

Tapan Kumar Swain — Thu, 16 Apr 2026 10:44:37 +0000

Integrating Google Drive isn't just about adding a "File Upload" button. It's about building a seamless, automated bridge between your user's cloud universe and your application's logic.

This guide will walk you through everything from clicking the first button in the Google Console to handling background token refreshes like a pro.

1. The Foundation (Google Cloud Console)
2. The Environment Map
3. The OAuth "Handshake"
4. The "Eternal" Connection (Token Refresh)
5. The Sync Engine (Architecture)
Best Practices Checklist

1: The Foundation (Google Cloud Console)

Before we write a single line of code, we need to tell Google who we are.

Click here for the step-by-step Console setup

1. Create Your Project

Head over to the Google Cloud Console.
Create a New Project. Give it a name you'll recognize, like My-Awesome-App-Sync.
The ID Card: Once created, go to the Dashboard and find your Project Number.
In our code, this is: NEXT_PUBLIC_GOOGLE_APP_ID.

2. Turn on the "Lights" (Enable APIs)

Your project starts empty. You need to enable the specific tools we'll use:

Go to Library.
Search and Enable:
- Google Drive API: For the backend to read/sync files.
- Google Picker API: For that beautiful file-selection popup on the frontend.

3. The "Permissions" Screen (OAuth Consent)

Go to OAuth consent screen.
Choose External (standard for most apps).
Fill in your App Name and Support Email.
Scopes: This is crucial. Add https://www.googleapis.com/auth/drive.readonly. This tells the user exactly what you'll be doing (only reading files, not deleting them!).

4. Getting Your Keys (Credentials)

You need two things here:

A. OAuth 2.0 Client ID

Create Credentials > OAuth client ID.
Application type: Web application.
Origins: http://localhost:port (for dev).
Redirect URIs: http://localhost:port/route_name.

B. API Key

Create Credentials > API Key.
Restrict it: Under "API restrictions", select Google Picker API. This ensures your key can't be stolen and used for other expensive services.

2: The Environment Map

Take those keys and drop them into your .env files. We use a card here to keep your configuration organized.

🔑 Environment Variables

Backend (backend/.env)

env
GOOGLE_CLIENT_ID="xxx-yyy.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-your-secret"
GOOGLE_CALLBACK_URL="http://localhost:port/route_name"
Frontend (frontend/.env)

NEXT_PUBLIC_GOOGLE_CLIENT_ID="xxx-yyy.apps.googleusercontent.com"
NEXT_PUBLIC_GOOGLE_API_KEY="AIza-your-api-key"
NEXT_PUBLIC_GOOGLE_APP_ID="your-project-number

3: The OAuth "Handshake" (How it Works)
This is where the magic happens. We use a Hybrid Flow for maximum security and longevity.

The Frontend "Ask" The user clicks "Connect". We use the Google Identity Services (GIS) library to open a popup.

Initialization URL: https://accounts.google.com/gsi/client

const client = google.accounts.oauth2.initCodeClient({
  client_id: GOOGLE_CONFIG.CLIENT_ID,
  scope: 'https://www.googleapis.com/auth/drive.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    // This gives us an 'authorization_code'
    sendCodeToBackend(response.code);
  },
});
client.requestCode();

The Backend "Exchange" Your frontend sends that code to your backend. Your backend then talks to Google privately to get the "Keys to the Kingdom."

Token Exchange URL: POST https://oauth2.googleapis.com/token

Example Request (Node.js/Fetch):

const response = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    code: authCodeFromFrontend,
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET,
    redirect_uri: 'postmessage', // Crucial for GIS popup flow
    grant_type: 'authorization_code',
  }),
});

const tokens = await response.json(); 

// Returns: access_token, refresh_token, expires_in (usually 3599)

4: The "Eternal" Connection (Token Refresh)
Google's access_token is like a temporary pass—it expires in 1 hour (3600 seconds). To keep syncing files while the user is asleep, you need the refresh_token.

How to get a new Access Token
When your database shows the expiresAt is near, or you get a 401 Unauthorized from Google, call this:

Token Refresh URL: POST https://oauth2.googleapis.com/token

Example Request:

const params = new URLSearchParams({
  grant_type: 'refresh_token',
  refresh_token: encryptedStoredRefreshToken,
  client_id: process.env.GOOGLE_CLIENT_ID,
  client_secret: process.env.GOOGLE_CLIENT_SECRET,
});

const response = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: params.toString(),
});

const data = await response.json(); // New access_token received!

// Update your DB with the new token and new expiry time

Note: Always refresh the token 5-10 minutes before it expires to account for network lag and ensure your background jobs never fail.

5: The Sync Engine (Architecture)
Once authenticated, our platform uses a Recursive Crawler to map the user's Drive.

Recursive Traversal: Google Drive is "flat." We start at the folder the user picked and recursively call drive.files.list for every sub-folder.
Encryption at Rest: We never store raw tokens. Everything is encrypted using AES-256-GCM before hitting the database.
Background Jobs: We queue the files for processing so the user doesn't have to wait for the sync to finish.

Best Practices Checklist

The "Pro" Checklist:

[x] Restrict API Keys: Limit your key to the "Google Picker API" only in the Google Console.
[x] Encrypt Everything: Store tokens using AES-256-GCM or a similar standard.
[x] Offline Access: Always ensure you are requesting access_type: 'offline' to receive that vital refresh token.

Critical Mistakes:

Never commit your GOOGLE_CLIENT_SECRET to GitHub or expose it in frontend code.
Never hardcode your redirect URIs; always use environment variables to switch between dev and production.
Don't Forget: Handle the case where a user revokes access from their Google Account settings manually.

Google Drive Integration: From OAuth Setup to Background Sync

Tapan Kumar Swain — Thu, 16 Apr 2026 10:33:03 +0000

Integrating Google Drive isn't just about adding a "File Upload" button. It's about building a seamless, automated bridge between your user's cloud universe and your application's logic.

This guide will walk you through everything from clicking the first button in the Google Console to handling background token refreshes like a pro.

1. The Foundation (Google Cloud Console)
2. The Environment Map
3. The OAuth "Handshake"
4. The "Eternal" Connection (Token Refresh)
5. The Sync Engine (Architecture)
Best Practices Checklist

1: The Foundation (Google Cloud Console)

Before we write a single line of code, we need to tell Google who we are.

Click here for the step-by-step Console setup

1. Create Your Project

Head over to the Google Cloud Console.
Create a New Project. Give it a name you'll recognize, like My-Awesome-App-Sync.
The ID Card: Once created, go to the Dashboard and find your Project Number.
In our code, this is: NEXT_PUBLIC_GOOGLE_APP_ID.

2. Turn on the "Lights" (Enable APIs)

Your project starts empty. You need to enable the specific tools we'll use:

Go to Library.
Search and Enable:
- Google Drive API: For the backend to read/sync files.
- Google Picker API: For that beautiful file-selection popup on the frontend.

3. The "Permissions" Screen (OAuth Consent)

Go to OAuth consent screen.
Choose External (standard for most apps).
Fill in your App Name and Support Email.
Scopes: This is crucial. Add https://www.googleapis.com/auth/drive.readonly. This tells the user exactly what you'll be doing (only reading files, not deleting them!).

4. Getting Your Keys (Credentials)

You need two things here:

A. OAuth 2.0 Client ID

Create Credentials > OAuth client ID.
Application type: Web application.
Origins: http://localhost:port (for dev).
Redirect URIs: http://localhost:port/route_name.

B. API Key

Create Credentials > API Key.
Restrict it: Under "API restrictions", select Google Picker API. This ensures your key can't be stolen and used for other expensive services.

2: The Environment Map

Take those keys and drop them into your .env files. We use a card here to keep your configuration organized.

🔑 Environment Variables

Backend (backend/.env)

env
GOOGLE_CLIENT_ID="xxx-yyy.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-your-secret"
GOOGLE_CALLBACK_URL="http://localhost:port/route_name"
Frontend (frontend/.env)

NEXT_PUBLIC_GOOGLE_CLIENT_ID="xxx-yyy.apps.googleusercontent.com"
NEXT_PUBLIC_GOOGLE_API_KEY="AIza-your-api-key"
NEXT_PUBLIC_GOOGLE_APP_ID="your-project-number

3: The OAuth "Handshake" (How it Works)

This is where the magic happens. We use a Hybrid Flow for maximum security and longevity.

The Frontend "Ask" The user clicks "Connect". We use the Google Identity Services (GIS) library to open a popup.

Initialization URL: https://accounts.google.com/gsi/client

const client = google.accounts.oauth2.initCodeClient({
  client_id: GOOGLE_CONFIG.CLIENT_ID,
  scope: 'https://www.googleapis.com/auth/drive.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    // This gives us an 'authorization_code'
    sendCodeToBackend(response.code);
  },
});
client.requestCode();

The Backend "Exchange" Your frontend sends that code to your backend. Your backend then talks to Google privately to get the "Keys to the Kingdom."

Token Exchange URL: POST https://oauth2.googleapis.com/token

Example Request (Node.js/Fetch):

const response = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    code: authCodeFromFrontend,
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET,
    redirect_uri: 'postmessage', // Crucial for GIS popup flow
    grant_type: 'authorization_code',
  }),
});

const tokens = await response.json(); 

// Returns: access_token, refresh_token, expires_in (usually 3599)

4: The "Eternal" Connection (Token Refresh)

Google's access_token is like a temporary pass—it expires in 1 hour (3600 seconds). To keep syncing files while the user is asleep, you need the refresh_token.

How to get a new Access Token
When your database shows the expiresAt is near, or you get a 401 Unauthorized from Google, call this:

Token Refresh URL: POST https://oauth2.googleapis.com/token

Example Request:

const params = new URLSearchParams({
  grant_type: 'refresh_token',
  refresh_token: encryptedStoredRefreshToken,
  client_id: process.env.GOOGLE_CLIENT_ID,
  client_secret: process.env.GOOGLE_CLIENT_SECRET,
});

const response = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: params.toString(),
});

const data = await response.json(); // New access_token received!

// Update your DB with the new token and new expiry time

Note: Always refresh the token 5-10 minutes before it expires to account for network lag and ensure your background jobs never fail.

5: The Sync Engine (Architecture)

Once authenticated, our platform uses a Recursive Crawler to map the user's Drive.

Recursive Traversal: Google Drive is "flat." We start at the folder the user picked and recursively call drive.files.list for every sub-folder.
Encryption at Rest: We never store raw tokens. Everything is encrypted using AES-256-GCM before hitting the database.
Background Jobs: We queue the files for processing so the user doesn't have to wait for the sync to finish.

Best Practices Checklist

The "Pro" Checklist:

[x] Restrict API Keys: Limit your key to the "Google Picker API" only in the Google Console.
[x] Encrypt Everything: Store tokens using AES-256-GCM or a similar standard.
[x] Offline Access: Always ensure you are requesting access_type: 'offline' to receive that vital refresh token.

Critical Mistakes:

Never commit your GOOGLE_CLIENT_SECRET to GitHub or expose it in frontend code.
Never hardcode your redirect URIs; always use environment variables to switch between dev and production.
Don't Forget: Handle the case where a user revokes access from their Google Account settings manually.

How to Store VideoSDK Cloud Recordings Securely on AWS S3

Tapan Kumar Swain — Thu, 08 Jan 2026 06:18:31 +0000

When using VideoSDK Live for video conferencing or live streaming, cloud recording is a common requirement. VideoSDK supports direct upload of recorded videos to AWS S3, but to enable this securely, a specific AWS configuration is required.

This guide walks you through the complete AWS setup, from creating an IAM user with minimal permissions to configuring storage in the VideoSDK dashboard.

Why a Dedicated IAM User Is Required

For security best practices, VideoSDK should never use your AWS root account. Instead, create a dedicated IAM user with restricted permissions so it can:

Upload video recordings
Read or delete recordings if required
Access only one specific S3 bucket

Benefits

Least-privilege security
Easy credential rotation
Reduced blast radius

Step 1: Create an IAM User for VideoSDK

Log in to the AWS Console
Navigate to Services → Security, Identity & Compliance → IAM
Click Users → Create user

User Details

User name: videosdk-storage
Access type:
- Programmatic access
- Console access (not required)

Click Next

Step 2: Create a Custom S3 Policy

To restrict access to only the required bucket and actions, create a custom IAM policy.

On the permissions page:
- Select Attach policies directly
- Click Create policy
Switch to the JSON tab and paste the following:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:PutObjectAcl",
        "s3:GetObject",
        "s3:DeleteObject"
      ],
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    },
    {
      "Effect": "Allow",
      "Action": ["s3:ListBucket"],
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME"
    }
  ]
}

Replace Bucket Name

Replace YOUR-BUCKET-NAME with your actual S3 bucket name.

Example:

arn:aws:s3:::my-video-recordings/*

Save the Policy

Name: VideoSDK-S3-Access
Description: S3 access for VideoSDK recordings

Click Create policy

Step 3: Attach the Policy to the IAM User

This step ensures the IAM user actually has permission to access your S3 bucket.

Return to the IAM user creation screen
Refresh the policy list
Search for VideoSDK-S3-Access
Select the policy
Click Next → Create user

Your IAM user is now correctly permissioned.

Step 4: Generate AWS Access Keys

After the user is created:

Open the user: videosdk-storage
Go to the Security credentials tab
Click Create access key
Select Third-party service
Confirm and continue

Save These Credentials

Access Key ID
Secret Access Key

⚠️ The secret key will be shown only once.

Download the .csv file for backup.

Step 5: Create an S3 Bucket (If Needed)

If you don’t already have an S3 bucket:

Go to Services → S3
Click Create bucket

Bucket Configuration

Bucket name: your-videosdk-recordings (must be globally unique)
Region: Choose and remember this
Block all public access: Enabled

Click Create bucket

Step 6: Configure AWS S3 in VideoSDK Dashboard

VideoSDK Live supports cloud recording with direct S3 upload.

Configuration Steps

Open VideoSDK Dashboard
Go to API Keys
Select your project
Scroll to Storage Configuration
Add your AWS S3 details:

{
  "bucket": "your-recordings-bucket",
  "region": "us-east-1",
  "accessKeyId": "YOUR_ACCESS_KEY",
  "secretAccessKey": "YOUR_SECRET_KEY",
  "acl": "private"
}

Field Explanation

bucket – Your S3 bucket name
region – Bucket region
accessKeyId – IAM access key
secretAccessKey – IAM secret key
acl – Use private (recommended)

Save the configuration.

Integrating Health Connect in Android + React Native Apps

Tapan Kumar Swain — Mon, 01 Dec 2025 09:06:47 +0000

Health Connect is Google’s unified API for managing health and fitness data on Android.
Instead of working with multiple SDKs, you can now use one standard interface to read and write health metrics such as steps, heart rate, workouts, calories, sleep, and much more.

Why Health Connect?

One central location for all health data.
Compatible with major apps and devices.
User-controlled permissions to ensure privacy.
Secure storage protected by device lock.

Note: Health Connect is available only on Android. iOS uses HealthKit, which is not related.

Prerequisites

A React Native project set up (0.71+ is recommended).
Android Studio installed.
A device or emulator running Android 13 or higher (the Health Connect app is needed on Android 13).
Screen lock enabled on the device.

1. Installing Health Connect

For Android 13 (API 33) and lower: Download the Health Connect app from the Play Store.
For Android 14 and above: Health Connect is already included.
Tip: Check availability with:

import { isAvailable } from "react-native-health-connect";
const available = await isAvailable();

2. Add SDK Dependency

Add the following in app/build.gradle:

dependencies {
    implementation "androidx.health.connect:connect-client:1.1.0-alpha11"
}

3. Configure Permissions

Include necessary permissions in AndroidManifest.xml.
Example for heart rate and steps:

<!-- TODO: Required to specify which Health Connect permissions the app can request -->
  <uses-permission android:name="android.permission.health.READ_HEART_RATE"/>
  <uses-permission android:name="android.permission.health.WRITE_HEART_RATE"/>
  <uses-permission android:name="android.permission.health.READ_STEPS"/>
  <uses-permission android:name="android.permission.health.WRITE_STEPS"/>
  <uses-permission android:name="android.permission.health.READ_EXERCISE"/>
  <uses-permission android:name="android.permission.health.WRITE_EXERCISE"/>
  <uses-permission android:name="android.permission.health.READ_TOTAL_CALORIES_BURNED"/>
  <uses-permission android:name="android.permission.health.WRITE_TOTAL_CALORIES_BURNED"/>
  <uses-permission android:name="android.permission.health.READ_WEIGHT"/>
  <uses-permission android:name="android.permission.health.WRITE_WEIGHT"/>

<!-- TODO: declare Health Connect visibility -->
<queries>
   <package android:name="com.google.android.apps.healthdata" />
</queries>

<!-- TODO: Add intent filter to handle permission rationale intent -->
<!-- Permission handling for Android 13 and before -->
<intent-filter>
  <action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
</intent-filter>

<!-- Permission handling for Android 14 and later -->
<intent-filter>
  <action android:name="android.intent.action.VIEW_PERMISSION_USAGE"/>
  <category android:name="android.intent.category.HEALTH_PERMISSIONS"/>
</intent-filter>

Tip: Each data type requires explicit read and write permissions.
Android 14 and above requires an activity-alias for permission rationale.

4. Update MainActivity.kt

React Native requires a permission delegate:

HealthConnectPermissionDelegate.setPermissionDelegate(this);

Place it inside onCreate() of MainActivity.

5. Build Configurations

Minimum SDK version: 26
Compile SDK version: 35+

minSdkVersion 26
compileSdkVersion 35

6. Using Health Connect in React Native

Request Permissions

import { requestPermission } from "react-native-health-connect";

await requestPermission([
  { accessType: "read", recordType: "Steps" },
  { accessType: "write", recordType: "HeartRate" }
]);

Read Records

import { readRecords } from "react-native-health-connect";
const steps = await readRecords("Steps");

Write Records

import { writeRecords } from "react-native-health-connect";
await writeRecords("HeartRate", [{ value: 72, startTime: new Date() }]);

Tip: Always check if you have permission before reading or writing.

7. Common Issues & Fixes

Issue	Cause	Solution
SDK_UNAVAILABLE	Health Connect is not installed	Install Health Connect (for Android 13 and lower)
Permission screen not opening	Permission delegate missing	Add the delegate to MainActivity.kt
Crash on Android 14	Missing activity-alias	Add the alias block mentioned above
Cannot request permissions again	User denied twice	User must reset permissions in Health Connect settings

8. Tips & Best Practices

Test on actual devices; emulators have limited support.
Encourage users to enable a screen lock.
Always handle denied permissions in a user-friendly way.
Consider batching reads and writes to minimize unnecessary API calls.
Respect user privacy; never send raw health data to outside servers without consent.

9. References

Official Android Health Connect Documentation
React Native Health Connect Library

DEV Community: Tapan Kumar Swain

Google Drive Integration: From OAuth Setup to Background Sync

Table Of Contents

1: The Foundation (Google Cloud Console)

1. Create Your Project

2. Turn on the "Lights" (Enable APIs)

3. The "Permissions" Screen (OAuth Consent)

4. Getting Your Keys (Credentials)

A. OAuth 2.0 Client ID

B. API Key

2: The Environment Map

🔑 Environment Variables

Best Practices Checklist

Google Drive Integration: From OAuth Setup to Background Sync

Table Of Contents

1: The Foundation (Google Cloud Console)

1. Create Your Project

2. Turn on the "Lights" (Enable APIs)

3. The "Permissions" Screen (OAuth Consent)

4. Getting Your Keys (Credentials)

A. OAuth 2.0 Client ID

B. API Key

2: The Environment Map

🔑 Environment Variables

3: The OAuth "Handshake" (How it Works)

4: The "Eternal" Connection (Token Refresh)

5: The Sync Engine (Architecture)

Best Practices Checklist

How to Store VideoSDK Cloud Recordings Securely on AWS S3

Why a Dedicated IAM User Is Required

Benefits

Step 1: Create an IAM User for VideoSDK

User Details

Step 2: Create a Custom S3 Policy

Replace Bucket Name

Save the Policy

Step 3: Attach the Policy to the IAM User

Step 4: Generate AWS Access Keys

Save These Credentials

Step 5: Create an S3 Bucket (If Needed)

Bucket Configuration

Step 6: Configure AWS S3 in VideoSDK Dashboard

Configuration Steps

Field Explanation

Integrating Health Connect in Android + React Native Apps

Why Health Connect?

Prerequisites