This example shows how to create a basic Google OAuth flow with Google Drive integration as of 2023.
There are three different flows you can use, first is using Drive API directly from the client without API. Works but hard to authenticate data & not possible to run as background tasks. Second is API only, copied directly from their NodeJS example. It's easy to use but it opens the Google login in a separate window and requires using a callback URL which kinda sucks. The third is combination of the two, it first fetches the credentials in the client which the API uses to fetch the data. The best option, IMO.
Used resources:
- https://developers.google.com/drive/api/quickstart/nodejs
- https://developers.google.com/drive/api/v3/reference
- https://bretcameron.medium.com/how-to-use-the-google-drive-api-with-javascript-57a6cc9e5262
- https://cloud.google.com/nodejs/docs/reference/google-auth-library/latest
- https://developers.google.com/identity/gsi/web/guides/personalized-button
There are multitude of errors I received while making this. Some of them that I can still remember are:
The incoming JSON object does not contain a client_email field
This means you are trying to use service account and haven't used your service account email eg ``
Error: No access, refresh token, API key or refresh handler callback is set.
This one threw me off for a long while. It means you haven't configured your credentials properly eg you've only provided an access_token
but not the full payload:
{
access_token: token,
scope: 'https://www.googleapis.com/auth/drive.readonly',
token_type: 'Bearer',
expires_in: 3349
}
Or something like that.
Daily Limit for Unauthenticated Use Exceeded Google Api Drive
I received this error because I used the access_token I received in the client in the API without adding the other parameters (eg expires_in
) properly. Kinda weird.
Node.js >=16 & pnpm installed globally. Google Cloud account.
- Login to your Google Cloud account
- Create a project or select an existing one at: https://console.cloud.google.com/welcome
- Go to: https://console.cloud.google.com/apis/credentials
- Click
CREATE CREDENTIALS
and pickOAuth client ID
- Pick
Web application
- To
Authorised JavaScript origins
add:http://localhost:5174
- To
Authorised redirect URIs
add:http://localhost:5274/callback
(TODO: not used properly) - Click
CREATE
. Download your credentials - Copy
.env-example
inpackages/api
topackages/api/.env
and replaceGOOGLE_CLIENT_ID
&GOOGLE_CLIENT_SECRET
with your values - Enable Google Drive API: https://console.cloud.google.com/marketplace/product/google/drive.googleapis.com
- Copy
packages/client/.env-example
topackages/client/.env
. ReplaceGOOGLE_CLIENT_ID
- You're good to go!
- First:
pnpm i
- Launch the API:
pnpm api
- And client in another terminal:
pnpm client
- Go to
http://localhost:5174/login
- Click
Log in
- Click any of the buttons
- Follow consent screen, bybass the warning if it says "Google hasn't verified this account"
- You should see a list of files