How to authenticate Google Drive API with client-side JavaScript

Other Questions Google drive
1

I’m working on a client-side web app that needs to connect to Google Drive API using JavaScript. I’ve been looking at the Google API JavaScript client library for handling authentication.

I found some examples and tried to set up the authorization like this:

var authConfig = {
  'client_id': 'your_app_client_id',
  'scope': 'https://www.googleapis.com/auth/drive.file'
};

gapi.auth.authorize(authConfig, function(response) {
  console.log('Auth response:', response);
});

The problem is that my callback function doesn’t seem to execute at all. The Google API library loads fine, but nothing happens when I call the authorize method.

I noticed that server-side examples often include a client secret parameter. Should I be adding that to my config object too? I’m not sure if that’s needed for browser-based authentication.

Has anyone successfully implemented Google Drive authentication in pure JavaScript? What could be causing the callback to not fire? I really need to keep everything on the client side without any server involvement.

Any debugging tips or working examples would be really helpful. Thanks!

2

Hit this same problem building a photo backup tool. That authorize method died in 2020 - that’s why it’s failing silently. Google moved everything to their Identity Services platform.

Ditch the old gapi auth libraries and use the GSI script instead. You’ll need to completely redo your auth flow. Use google.accounts.oauth2.initTokenClient() for setup, then call requestAccessToken() when users authenticate.

Heads up - the new system needs HTTPS for redirect URIs. Won’t work on localhost HTTP during dev. Set up local HTTPS or use ngrok for testing.

Token handling changed too. No more long-lived tokens - you get shorter access tokens and handle refresh logic yourself. And don’t put client secrets in browser code. That’s a huge security risk and only needed server-side anyway.

3

Your callback isn’t firing because that authorize method is deprecated. Google ditched it years ago. I hit this same problem migrating an old project. You need to switch to Google Identity Services. Use google.accounts.oauth2.initTokenClient() to create the client, then call requestAccessToken() for auth. The callback structure’s different now - define your callback function separately and reference it in the config. Also, don’t put your client secret in client-side code! That’s server-side only. For browser apps, you just need the client ID and scopes. Make sure your OAuth2 credentials in Google Console are set up for web applications with the right authorized origins. Check the browser console for errors and verify the Google Identity Services script loads before you try initializing the token client.

4

Hit this same problem last year building a file manager app. gapi.auth.authorize doesn’t exist anymore - that’s why your callback never fires. You’re calling a dead function. Had to completely rewrite my auth flow with Google Identity Services. Ditch the old gapi auth libraries and load the GSI script instead. Use the token client approach - it’s totally different. You set up a token client with your config, then request tokens when you need them. One gotcha: make sure GSI loads completely before trying any auth calls. I added a simple checker that waits for google.accounts to be available. Also check your OAuth consent screen in Google Cloud Console. Mine was stuck in testing mode, which blocks most accounts from authenticating. The new system’s actually better once you get it working - more secure and gives you way more control over auth flow.

5

The gapi.auth.authorize method got deprecated in 2020 - that’s why nothing happens when you call it. I hit this same problem updating a document viewer app. You’ll need to switch to Google Identity Services (GIS). Load the GIS library from https://accounts.google.com/gsi/client and set up a token client with google.accounts.oauth2.initTokenClient(). GIS works differently - you create the client once, then call requestAccessToken() whenever you need tokens. About client secrets: don’t put them in client-side code. They’re only for server-to-server auth. Browser apps just need the client ID, scopes, and callback function in your token client config. One gotcha that surprised me - GIS requires user interaction for token requests. You can’t auto-trigger auth on page load anymore. The token request has to happen from a user action like a button click.

6

Yeah, that’s the old deprecated method causing your headache. Switch to Google Identity Services - totally different setup but way more reliable. Just make sure you handle the async loading properly. GSI sometimes loads slow and you’ll get undefined errors if you rush it.