Use your own Google Cloud project

This guide connects a self-hosted copy of this website to your own Google OAuth client. The site asks only for drive.file, which lets OGD Sync manage files it creates or opens instead of all files in your Drive.

A custom client cannot be installed into the public OGD Sync site from the browser. You must deploy your own copy because the OAuth client secret is used by the server and must never be committed, pasted into client-side code, or exposed through a public environment variable.

1. Create a Google Cloud project

Open the Google Cloud Console, select the project menu at the top, and choose New Project.
Give the project a recognizable name, create it, and select it.
Open the Google Drive API library page and click Enable.

No billing account or API key is needed for this OAuth flow.

2. Configure the consent screen

Go to Google Auth Platform and click Get started. Google may instead show the existing Branding, Audience, and Data Access pages.

Under Branding, enter an app name, support email, and developer contact email. For a public deployment, also provide your homepage and privacy-policy URLs.
Under Audience, choose External for ordinary Google accounts. Choose Internal only if every user belongs to your Google Workspace organization.
If the app is External and in Testing, add every Google account that will use OGD Sync under Test users.
Under Data Access, add https://www.googleapis.com/auth/drive.file and save. Do not substitute the broader drive scope.

External apps left in Testing issue refresh tokens that normally expire after seven days. This is fine for a quick test, but it will force OGD Sync to sign in again each week. Move the app to Production when it is ready; follow Google's verification instructions if you plan to offer it publicly.

3. Create an OAuth client

Open Google Auth Platform → Clients, click Create client, and select Web application.
Add each site origin under Authorized JavaScript origins:
```
http://localhost:3000
https://your-domain.example
```

Add the matching callback URLs under Authorized redirect URIs:

http://localhost:3000/loading
https://your-domain.example/loading

Click Create, then copy the Client ID and Client secret. The redirect URI must match the site origin exactly, including scheme, hostname, port, and the /loading path.

4. Configure this website

Clone or fork the website, install its dependencies, and replace the exported clientId in src/helpers/constants.ts with the new client ID. Client IDs are public identifiers, so this value may be included in the browser bundle.

export const clientId =
  'YOUR_CLIENT_ID.apps.googleusercontent.com';

Create .env.local at the repository root and add the secret there. This repository already ignores .env.local.

CLIENT_SECRET=YOUR_CLIENT_SECRET

For a hosted deployment, add the same CLIENT_SECRET as a server-side environment variable in your hosting provider. Do not prefix it with NEXT_PUBLIC_. Then deploy again so the server can exchange authorization codes and refresh tokens.

5. Run and test it

yarn
yarn dev

Visit http://localhost:3000 and click Sign in.
Use an account allowed by the Audience settings.
Approve the Google Drive permission.
After Google returns to /loading, copy the refresh token shown by the site into the OGD Sync plugin settings.

Repeat the test on your deployed URL. Localhost and production are separate redirect URIs, so both must be registered if you use both.

6. Troubleshooting

Error 400: redirect_uri_mismatch: Add the exact URL shown in the request to the client's Authorized redirect URIs. Check http versus https, ports, subdomains, and trailing slashes.
Error 403: access_denied: Add the signed-in account as a test user, or check whether a Google Workspace administrator has blocked the app.
No refresh token or it stops working: Revoke the app in your Google Account permissions and sign in again. If the app is External and Testing, remember the seven-day refresh-token limit.
Token exchange fails after deployment: Confirm CLIENT_SECRET is set in the deployment environment and belongs to the same OAuth client as the client ID in constants.ts.

Back to OGD Sync Google OAuth web-server guide Google Drive scope guide